Creating Pie Chart from external JSON not working

Question

I have the following code to generate a pie chart. I am calling an external json file to generate the pie chart. For some reason. it not generating the pie chart. what am i missing or doing wrong?

Here is my code below:

<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>

JAVASCRIPT

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>

        <!-- high chart libarary -->

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-3d.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

    <script>


     var options = {
       chart: {
         renderTo: 'container',
         type: 'pie',
         options3d: {
           enabled: true,
           alpha: 15,
           beta: 15,
           depth: 50,
           viewDistance: 25
         }
       },
       title: {
         text: '',
       },
       subtitle: {
         text: '',
       },
       xAxis: {
         categories: []

       },
       yAxis: {
         enabled: false,
         title: {
           text: 'Amount'
         },
         labels: {
           //                            formatter:function() {
           //                              return Highcharts.numberFormat(this.value, 0, '', ',');
           //                            }
           //                        ,enabled: false
         },
         plotLines: [{
           value: 0,
           width: 1,
           color: '#808080'
         }]
       },
       tooltip: {
         formatter: function() {
           return '<b>' + this.series.name + '</b><br/>' +
             this.x + ': $' + Highcharts.numberFormat(this.y, 0, '', ',');
         }
       },
       credits: {
         enabled: false
       },
       plotOptions: {
         pie: {
           allowPointSelect: true,
           cursor: 'pointer',
           depth: 35,
           dataLabels: {
             enabled: true,
             format: '{point.name}'
           }
         }
       },
       legend: {
         enabled: false
       },

       series: [{}]
     }

     setTimeout(function() {

           $.getJSON("pie.json", function(json) {
//                options.xAxis.categories = json[0]['data'];
//                options.series[0] = json[1];
//                options.series[1] = json[2];
//                chart = new Highcharts.Chart(options);
                  //  debugger
                console.log(json);
                alert(json);

       options.series[0].data = json
       chart = new Highcharts.Chart(options);
            });





     }, 0)


    </script>

JSON - pie.json

 [{
       name: 'Microsoft Internet Explorer',
       y: 56.33
     }, {
       name: 'Chrome',
       y: 24.03,
       sliced: true,
       selected: true
     }, {
       name: 'Firefox',
       y: 10.38
     }, {
       name: 'Safari',
       y: 4.77
     }, {
       name: 'Opera',
       y: 0.91
     }, {
       name: 'Proprietary or Undetectable',
       y: 0.2
 }]

Answer 1

Here we are.The pie json data need a transfrom as I show you below:

  var options = {
       chart: {
         renderTo: 'container',
         type: 'pie',
         options3d: {
           enabled: true,
           alpha: 15,
           beta: 15,
           depth: 50,
           viewDistance: 25
         }
       },
       title: {
         text: '',
       },
       subtitle: {
         text: '',
       },
       xAxis: {
         categories: []

       },
       yAxis: {
         enabled: false,
         title: {
           text: 'Amount'
         },
         labels: {
           //                            formatter:function() {
           //                              return Highcharts.numberFormat(this.value, 0, '', ',');
           //                            }
           //                        ,enabled: false
         },
         plotLines: [{
           value: 0,
           width: 1,
           color: '#808080'
         }]
       },
       tooltip: {
         formatter: function() {
           return '<b>' + this.series.name + '</b><br/>' +
             this.x + ': $' + Highcharts.numberFormat(this.y, 0, '', ',');
         }
       },
       credits: {
         enabled: false
       },
       plotOptions: {
         pie: {
           allowPointSelect: true,
           cursor: 'pointer',
           depth: 35,
           dataLabels: {
             enabled: true,
             format: '{point.name}'
           }
         }
       },
       legend: {
         enabled: false
       },

       series: [{type:"pie"}]
     }

     setTimeout(function() {

           $.getJSON("pie.json", function(json) {
                console.log(json);
                alert(json);

       options.series[0].data = json;
       chart = new Highcharts.Chart(options);
            });





     }, 0);

<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>

        <!-- high chart libarary -->

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-3d.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
</head>
<body>
<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>  

</body></html>

pie..json

[{
       "name": "Microsoft Internet Explorer",
       "y": 56.33
     }, {
       "name": "Chrome",
       "y": 24.03,
       "sliced": true,
       "selected": true
     }, {
       "name":"Firefox",
       "y": 10.38
     }, {
       "name":"Safari",
       "y": 4.77
     }, {
       "name":"Opera",
       "y": 0.91
     }, {
       "name": "Proprietary or Undetectable",        
       "y": 0.2
 }]