Как отобразить Highcharts из базы данных в C# .Net

Я видел эту ссылку http://codepedia.info/chartjs-asp-net-create-pie-chart-with-database-calling-jquery-ajax-c/ и следил за каждым шагом, но dint получал вывод (я использовал «public class cityPopulation») в коде вместо страницы asmx, это будет ошибкаКак отобразить Highcharts из базы данных в C# .Net

</head> 
<body> 
    <script> 
     function drawPieChart(seriesData) { 

      $('#container').highcharts({ 
       chart: { 
        plotBackgroundColor: null, 
        plotBorderWidth: null, 
        plotShadow: false, 
        type: 'pie' 
       }, 
       title: { 
        text: 'Population percentage city wise' 
       }, 
       tooltip: { 
        pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>' 
       }, 
       plotOptions: { 
        pie: { 
         allowPointSelect: true, 
         cursor: 'pointer', 
         dataLabels: { 
          enabled: true, 
          format: '<b>{point.name}</b>: {point.percentage:.1f} %', 
          style: { 
           color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black' 
          } 
         } 
        } 
       }, 
       series: [{ 
        name: "Brands", 
        colorByPoint: true, 
        data: seriesData 
       }] 
      }); 
     } 
     $("#btnCreatePieChart").on('click', function (e) { 
      var pData = []; 
      pData[0] = $("#ddlyear").val(); 

      var jsonData = JSON.stringify({ pData: pData }); 

      $.ajax({ 
       type: "POST", 
       url: "aspchartjsdemo.aspx/getCityPopulation", 
       data: jsonData, 
       contentType: "application/json; charset=utf-8", 
       dataType: "json", 
       success: OnSuccess_, 
       error: OnErrorCall_ 
      }); 

      function OnSuccess_(response) { 
       var aData = response.d; 
       var arr = [] 

       $.map(aData, function (item, index) { 
        var i = [item.city_name, item.population]; 
        var obj = {}; 
        obj.name = item.city_name; 
        obj.y = item.population; 
        arr.push(obj); 
       }); 
       var myJsonString = JSON.stringify(arr); 
       var jsonArray = JSON.parse(JSON.stringify(arr)); 

       drawPieChart(jsonArray); 

      } 
      function OnErrorCall_(response) { 
       alert("Whoops something went wrong!"); 
      } 
      e.preventDefault(); 
     }); 
     </script> 
    <form id="form1" runat="server"> 
    <div> 
     <asp:DropDownList ID="ddlyear" runat="server" > 
      <asp:ListItem>2010</asp:ListItem> 
      <asp:ListItem>2011</asp:ListItem> 
      <asp:ListItem>2012</asp:ListItem> 
     </asp:DropDownList> 

     <asp:Button ID="btnCreatePieChart" runat="server" Text="Button" /> 

<br /> 
<div> 
    <div id="container" style="width: 500px; height: 500px"></div> 
</div> 
    </div> 
    </form> 
</body> 
</html> 


here is my Code Behind..Im Unable to Fetch the data from database. 

    [WebMethod] 
    public List<cityPopulation> getCityPopulation(List<string> pData) 
    { 
     List<cityPopulation> p = new List<cityPopulation>(); 

     using (NpgsqlConnection con = new NpgsqlConnection("Server=Localhost;Port=5432;User Id=postgres;Password=postgres;Database=database4;")) 
     { 
      string myQuery = "SELECT id_, city_name, population FROM tb_city_population WHERE year_of = @year"; 
      NpgsqlCommand cmd = new NpgsqlCommand(); 
      cmd.CommandText = myQuery; 
      cmd.CommandType = CommandType.Text; 
      cmd.Parameters.AddWithValue("@year", pData[0]); 
      cmd.Connection = con; 
      con.Open(); 
      NpgsqlDataReader dr = cmd.ExecuteReader(); 
      if (dr.HasRows) 
      { 
       while (dr.Read()) 
       { 
        cityPopulation cpData = new cityPopulation(); 
        cpData.city_name = dr["city_name"].ToString(); 
        cpData.population = Convert.ToInt32(dr["population"].ToString()); 
        p.Add(cpData); 
       } 
      } 
     } 
     return p; 
    } 

    public class cityPopulation 
    { 
     public string city_name { get; set; } 
     public int population { get; set; } 
     public string id { get; set; } 
    } 
Any Help Highly appreciated..

источник

2016-08-10 imtiyaz

Ошибки здесь, как правило, плохой рендеринг javascript или плохой формат данных. Посмотрите в первую очередь, если на вашей консоли есть ошибки JavaScript. Затем исправьте их и продолжите отладку данных, которые вы отправляете. – Aristos

Привет, Aristos спасибо за ур ответить .. Я видел консоль, но ошибок не было найдено. – imtiyaz

затем отлаживайте свои данные, чтобы увидеть, что вы отправляете, и как вы вводите его в hightchart. – Aristos

Это, как я построить пирог:

<div id="pieChart"></div> 

<script type="text/javascript" src="highcharts.js"></script> 

<script> 
    var myPieData = [ ['AAA', 34.03], ['BBB', 27.01], ['CCC', 18.77], ['DDD', 11.01], ['EEE', 5.91], ['FFF', 3.27] ]; 

    chart = new Highcharts.Chart({ 
     chart: { 
      renderTo: 'pieChart', 
      plotBackgroundColor: null, 
      plotBorderWidth: null, 
      plotShadow: false 
     }, 
     title: { 
      text: 'My PieData' 
     }, 
     tooltip: { 
      pointFormat: '<b>{point.percentage:.2f}%</b>', 
      percentageDecimals: 2 
     }, 
     plotOptions: { 
      pie: { 
       allowPointSelect: false, 
       cursor: 'default', 
       dataLabels: { 
        enabled: false, 
        color: '#000000', 
        connectorColor: '#000000', 
        formatter: function() { 
         return '<b>' + this.point.name + '</b>: ' + this.percentage + ' %'; 
        } 
       } 
      } 
     }, 
     series: [{ 
      type: 'pie', 
      name: '', 
      data: myPieData 
     }] 
    }); 
</script>

часть вы должны заменить собственные данные [ ['Label A', 34.03], ['Label B', 27.01], ['Label C', 18.77], ['Label D', 11.01], ['Label E', 5.91], ['Label F', 3.27] ] конечно общая стоимость всех данных должна быть 100,00%

Вы можете сделать это с помощью Литерала или строки, заполненной содержимым от кода: var myPieData = [ <%= pieData %> ] или получить его из внешнего источника.

В зависимости от ваших настроек локализации числовое значение может содержать «,» вместо «.». (23,59 или 23,59). Если ваша локализация использует «,», вам придется заменить ее точкой.

ОБНОВЛЕНИЕ

В соответствии с просьбой примера того, как получить правильную строку, которые можно использовать для создания пироги. Это должно заставить вас начать ... Просто убедитесь, что population находится в процентах, а не в абсолютных цифрах.

public string getCityPopulation(List<string> pData) 
{ 
    StringBuilder sb = new StringBuilder(); 
    string myQuery = "SELECT city_name, population FROM tb_city_population WHERE (year_of = @year)"; 

    using (SqlConnection connection = new SqlConnection(Common.connectionString)) 
    using (SqlCommand command = new SqlCommand(myQuery, connection)) 
    { 
     command.Parameters.AddWithValue("@year", pData[0]); 
     try 
     { 
      connection.Open(); 
      SqlDataReader dr = command.ExecuteReader(); 
      if (dr.HasRows) 
      { 
       while (dr.Read()) 
       { 
        sb.Append("["); 
        sb.Append("'" + dr["city_name"].ToString() + "'"); 
        sb.Append(", "); 
        sb.Append(dr["population"].ToString().Replace(",", ".")); 
        sb.Append("],"); 
       } 
      } 
     } 
     catch 
     { 
      //error connecting\reading the database 
     } 
    } 

    return "[ " + sb.ToString().TrimEnd(',') + " ]"; 
}

источник

2016-08-10 12:40:38 VDWWD

Привет VDWWD спасибо за ваш ответ. Фактически im получая данные из базы данных и конвертируя их в json. Если какой-либо пример будет высоко оценен – imtiyaz

Привет imtiyaz, я обновил свой ответ на примере. – VDWWD

Спасибо VDWWD ваш код, я думаю, что работает нормально, но когда я нажимаю кнопку, как это делается в этом уроке [ссылка] (http://codepedia.info/highcharts-asp-net-create-pie-chart-with-jquery-ajax- in-c-sharp-ms-sql-database /). У вас нет выхода. Можете ли вы посоветовать мне, где идет не так, спасибо alor за помощь ур. – imtiyaz

Как отобразить Highcharts из базы данных в C# .Net

ответ

Смежные вопросы