title: Highchart not displaying the pie chart with Ajax data
body: <p>I am trying to integrate highcharts chart with a rest API. When I hardcode the value of <code>data</code> inside the <code>series</code> attribute of the <code>chartObj</code>, I am seeing the chart, but when I try to integrate with the API and populate the <code>data</code> value to the <code>series</code>, the chart does not show up. Can you please let me know where I am going wrong? </p>
  
  <p>Note: I have commented the code of <code>data</code> with hard coded values which is working.    </p>
  
  <pre><code>var chartObj = {
              chart: {
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false,
                backgroundColor:null
              },
              tooltip: {
                pointFormat: '{series.name}: &lt;b&gt;{point.percentage:.1f}%&lt;/b&gt;'
              },
              plotOptions: {
                pie: {
                  allowPointSelect: true,
                  cursor: 'pointer',
                  dataLabels: {
                    enabled: true,
                    color: '#000000',
                    connectorColor: '#000000',
                    format: '&lt;b&gt;{point.name}&lt;/b&gt;: {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&lt;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);
  </code></pre>
  
  <p>Adding the json data:</p>
  
  <pre><code>{
   "links": [],
   "content": [
    {
      "x": "POWEREDGE R610",
      "y": 238
    },
    {
      "x": "POWEREDGE R810",
      "y": 229
    }
  ],
  "id": null
  }
  </code></pre>
  
  <p>Adding the code of having a callback and the related error from the console:</p>
  
  <pre><code>        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&lt;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;       
  
  
                });
  </code></pre>
  
  <p>The console is not getting printed with 'came here' and throwing below error on the console:
  <code>Uncaught SyntaxError: Unexpected token : {"links":[],"content":[{"x":"HP","y":238},{"x":"DELL","y":229}],"id":null}</code> </p>
  
  <p>Please let me know where I am going wrong.</p>