Highchart 不显示带有 Ajax 数据的饼图

Question

I am trying to integrate highcharts chart with a rest API. When I hardcode the value of data inside the series attribute of the chartObj , I am seeing the chart, but when I try to integrate with the API and populate the data value to the series , the chart does not show up. Can you please let me know where I am going wrong?

Note: I have commented the code of data with hard coded values which is working.

var chartObj = {
            chart: {
              plotBackgroundColor: null,
              plotBorderWidth: null,
              plotShadow: false,
              backgroundColor:null
            },
            tooltip: {
              pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
            },
            plotOptions: {
              pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                  enabled: true,
                  color: '#000000',
                  connectorColor: '#000000',
                  format: '<b>{point.name}</b>: {point.percentage:.1f} %'
                }
              }
            },
            navigation: {
              buttonOptions: {
                enabled: false
              }
            },
            title:{
              text: 'Storage Data'
                },
            series:[{
              type: 'pie',
              name: 'Storage Data',
              /*data: [
                ['HP',   80.0],
                ['DELL', 20.0]
                ]*/
                }]
            }

             var storageData = $.getJSON('http://hostname/resturl/data', 
               function(data) { 
              var result = new Array();
              for (i=0;i<data.content.length;i++) {
                  var alpha = new Array();
                          alpha.push(data.content[i].x);
                  alpha.push(data.content[i].y);
                      result.push(alpha);
              }
                storageobj.series.data=result;       
              });
          $('#pie-chart2').highcharts(storageobj);

Adding the json data:

{
 "links": [],
 "content": [
  {
    "x": "POWEREDGE R610",
    "y": 238
  },
  {
    "x": "POWEREDGE R810",
    "y": 229
  }
],
"id": null
}

Adding the code of having a callback and the related error from the console:

        var restUrl='http://hostname:port/url/of/rest?callback=?';

             var getData = $.getJSON(restUrl, 
          function(data) { 
            console.log('came her');
              var result = new Array();
              for (i=0;i<data.content.length;i++) {
                  var alpha = new Array();
                  alpha.push(data.content[i].x);
                  alpha.push(data.content[i].y);
                  result.push(alpha);
              }
                    storageobj.series.data=result;       


              });

The console is not getting printed with 'came here' and throwing below error on the console: Uncaught SyntaxError: Unexpected token : {"links":[],"content":[{"x":"HP","y":238},{"x":"DELL","y":229}],"id":null}

Please let me know where I am going wrong.

Answer 1

The problem is that you create chart before AJAX's response is received.

Create chart inside callback, see:

$.getJSON(
    'http://hostname/resturl/data',
    function (data) {
      var result = new Array();

      for (i = 0; i < data.content.length; i++) {
          var alpha = new Array();
          alpha.push(data.content[i].x);
          alpha.push(data.content[i].y);
          result.push(alpha);
      }

      chartObj.series[0].data = result;

      $('#pie-chart2').highcharts(chartObj);
  }
);

Also, use chartObj for creating chart, not returned value from getJSON() method.

Answer 2

Specify the callback function for your ajax request .

$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=analytics.csv&callback=?', function (csv) {

}

Within your url append "callback=?" see the Example