Create dynamic chart with json data - Javascript highcharts

Javascript examples for highcharts:Chart Json Data

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

Description

Create dynamic chart with json data

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://code.highcharts.com/highcharts.js"></script> 
      <script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script> 
      <script type="text/javascript">
    window.onload=function(){//from  w  w  w . j  av  a 2 s .  c o m
var json = [{"hour":"6","value1":"10","value2":"5","value3":"0","value4":45},{"hour":"7","value1":"0","value2":"10","value3":"0","value4":50}];
var categories = [], data1 = [], data2 = [], data3 = [], data4 = [];
for(var i in json){
categories.push(parseInt(json[i].hour));
   var hour = (parseInt(json[i].hour));
   data1.push(parseInt(json[i].value1));
   data2.push(parseInt(json[i].value2));
   data3.push(parseInt(json[i].value3));
   data4.push(parseInt(json[i].value4));
}
console.log(categories);
console.log(data1);
    Highcharts.chart('container', {
        chart: {
            type: 'column'
        },
xAxis: {
        categories: categories ,
        crosshair: true
    },
    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: [{
        name: 'value1',
        data: data1
    }, {
        name: 'value2',
        data: data2
    }, {
        name: 'value3',
        data: data3
    },
    {
        name: 'value4',
        data: data4
    }]
});
    }

      </script> 
   </head> 
   <body> 
      <div id="container"> 
      </div>  
   </body>
</html>

Related Tutorials