Create pie chart from json - Javascript highcharts

Javascript examples for highcharts:Pie Chart

  1. HOME
  2. Javascript
  3. highcharts
  4. Pie Chart

Description

Create pie chart from json

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Highcharts Demo</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
      <script type="text/javascript">
$(function() {//from w w w .j  a  va  2  s.c om
  // paste your exemplary Result JSON data into Result variable
  var Result = {"d":[{"City":"NYC","DevelopmentPercentage":42,"ID":1234},{"City":"Berlin","DevelopmentPercentage":72,"ID":2345},{"City":"Tokyo","DevelopmentPercentage":92,"ID":5432}]};
  //success: function (Result) {
  Result = Result.d;
  var data = [];
  for (var i in Result) {
    //var jsondata = new Array(Result[i].City, Result[i].DevelopmentPercentage, Result[i].ID);
    var jsondata = {
      city: Result[i].City,
      y: Result[i].DevelopmentPercentage,
      ID: Result[i].ID
    }
    data.push(jsondata);
  }
  DreawChart(data);
  console.log(data);
  //} //end of success function
  function DreawChart(series) {
    $('#container').highcharts({
      chart: {
        plotBackgroundColor: null,
        plotBorderWidth: null,
        plotShadow: false,
        type: 'pie'
      },
      title: {
        text: 'Village Development Measuring System'
      },
      tooltip: {
        formatter: function() {
          return '<b>' + this.point.city + '</b>: ' + this.point.y + ' %';
        }
      },
      plotOptions: {
        pie: {
          allowPointSelect: true,
          cursor: 'pointer',
          dataLabels: {
            enabled: true,
            format: '<b>{point.city}</b>: {point.percentage:.1f} %',
            style: {
              color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
            },
            connectorColor: 'silver'
          }
        }
      },
      series: [{
        data: series,
        type: 'pie',
        dataType: 'json',
        animation: false,
        point: {
          events: {
            click: function(event) {
            }
          }
        }
      }],
    });
  }
});

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

Related Tutorials