highcharts from array

shift this to a json file is easy

by grant

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<div id="container">

</div>

JavaScript

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',
   ...