fill json data to chart - Javascript highcharts

Javascript examples for highcharts:Chart Json Data

  1. HOME
  2. Javascript
  3. highcharts
  4. Chart Json Data

Description

fill json data to chart

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <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  v  a2  s. com
var data = [{
    "name": "sisa_bulan_lalu",
    "data": [67]
}, {
    "name": "masuk_bulan_ini",
    "data": [23]
}, {
    "name": "minutasi_bulan_ini",
    "data": [17]
}, {
    "name": "sisa_bulan_lalu",
    "data": [66]
}, {
    "name": "masuk_bulan_ini",
    "data": [22]
}, {
    "name": "minutasi_bulan_ini",
    "data": [27]
}, {
    "name": "sisa_bulan_lalu",
    "data": [53]
}, {
    "name": "masuk_bulan_ini",
    "data": [11]
}, {
    "name": "minutasi_bulan_ini",
    "data": [12]
}, {
    "name": "sisa_bulan_lalu",
    "data": [33]
}, {
    "name": "masuk_bulan_ini",
    "data": [20]
}, {
    "name": "minutasi_bulan_ini",
    "data": [39]
}];
  var res = [];
  var axis = [];
  data.forEach(function(o) {
    var exists = res.find(p => p.name === o.name);
    if (exists) {
      exists.data.push(o.data[0]);
    } else {
      axis.push(o.name);
      res.push(o);
    }
  });
  Highcharts.chart('container', {
    chart: {
      type: 'column'
    },
    title: {
      text: 'Stacked column chart'
    },
    xAxis: {
      categories: axis
    },
    yAxis: {
      min: 0,
      title: {
        text: 'Total fruit consumption'
      },
      stackLabels: {
        enabled: true,
        style: {
          fontWeight: 'bold',
          color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
        }
      }
    },
    legend: {
      align: 'right',
      x: -30,
      verticalAlign: 'top',
      y: 25,
      floating: true,
      backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
      borderColor: '#CCC',
      borderWidth: 1,
      shadow: false
    },
    tooltip: {
      headerFormat: '<b>{point.x}</b><br/>',
      pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
    },
    plotOptions: {
      column: {
        stacking: 'normal',
        dataLabels: {
          enabled: true,
          color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
        }
      }
    },
    series: res
  });
});

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

Related Tutorials