Create dynamic Highcharts graphs with json data

Question

I have json output with data:

[{"hour":"6","value1":"10","value2":"5","value3":"0","value4":45},{"hour":"7","value1":"0","value2":"10","value3":"0","value4":50}]

And I need to generate charts with highchart engine Here is highchart code fragment but i don't understand how to pass data into 'series' and 'categories':

xAxis: {
        categories: [
            'Jan',
            'Feb',
            'Mar', <------------------------here need to be a hours
            'Apr',
            'May',
            'Jun',
            'Jul',
            'Aug',
            'Sep',
            'Oct',
            'Nov',
            'Dec'
        ],
        crosshair: true
    },
    series: [{
        name: 'value1',     
        data: [49.9, 71.5]   <----------------values 1
    }, {
        name: 'value2',
        data: [83.6, 78.8]   <----------------values 2
    }, {
        name: 'value3',
        data: [48.9, 38.8]

    },
    {
        name: 'value4',
        data: [42.4, 33.2]

    }        ]
});

Answer 1

https://jsfiddle.net/rb8ege93/1/

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){
   var hour = (parseInt(json[i].hour));

   categories.push(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));
}

    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
    }]
});