Highcharts column drilldown

Question

From my php file, my array prints something this:

Array
(
[2011] => Array
    (
        [name] => 2011
        [total] => 963
        [drilldown] => true
    )

[2012] => Array
    (
        [name] => 2012
        [total] => 1997
        [drilldown] => true
    )

[2013] => Array
    (
        [name] => 2013
        [total] => 1188
        [drilldown] => true
    )

)

And this is the json_encode:

{"2011":{"name":2011,"total":963,"drilldown":"true"},
"2012":{"name":2012,"total":1997,"drilldown":"true"},
"2013":{"name":2013,"total":1188,"drilldown":"true"}}

from this working link: highcharts/drilldown

data: [{
            name: 'Animals',
            y: 5,
            drilldown: true
        }, {
            name: 'Fruits',
            y: 2,
            drilldown: true
        }, {
            name: 'Cars',
            y: 4,
            drilldown: true
        }]

I want to change this part with my json.

Answer 1

I have made a JSFIDDLE demo.

What you need to do is assign the json encoded string of PHP array to a javascript variable like this:

var my_data = <?php echo json_encode($php_array); ?>

on this the variable my_data will have values like:

var my_data = {
        "2011":{"name":2011,"total":963,"drilldown":"true"},
        "2012":{"name":2012,"total":1997,"drilldown":"true"},
        "2013":{"name":2013,"total":1188,"drilldown":"true"}
    };

now this object needs to be structured into the format so that highcharts can use it as data source for plotting the values for the graph. It can be done like this:

var data_array = [];
$.each(my_data, function(key, value){

        var total_value = value.total;
        delete value.total;//remove the attribute total
        value.y = total_value;//add a new attribute "y" for plotting values on y-axis
        data_array.push(value);
    });

after this data_array will have structure like:

data_array = [
        {"name":2011,"y":963,"drilldown":"true"},//note we have removed attribute "total" with "y"
        {"name":2012,"y":1997,"drilldown":"true"},
        {"name":2013,"y":1188,"drilldown":"true"}
    ];

and now this data_array can be passed as data source to the chart while initialization like this:

// Create the chart
    $('#container').highcharts({
....
.....
series: [{
            name: 'Things',
            colorByPoint: true,
            data:data_array//put the data_array here
....
..

and you are done !

Here is the complete code:

$(function () {    
    var data_array = [];
    //assign the json encoded string of PHP array here like:
    //var my_data = <?php echo json_encode($php_array); ?>
    var my_data = {
        "2011":{"name":2011,"total":963,"drilldown":"true"},
        "2012":{"name":2012,"total":1997,"drilldown":"true"},
        "2013":{"name":2013,"total":1188,"drilldown":"true"}
    };

    $.each(my_data, function(key, value){
        //console.log("key = "+key);
        //console.log("value=");
        //console.log(value);
        var total_value = value.total;
        delete value.total;//remove the attribute total
        value.y = total_value;//add a new attribute "y" for plotting values on y-axis
        data_array.push(value);
    });

    //console.log("data_array = ");
    //console.log(data_array);


    // Create the chart
    $('#container').highcharts({
        chart: {
            type: 'column',
            events: {
                drilldown: function (e) {
                    if (!e.seriesOptions) {

                        var chart = this,
                            drilldowns = {
                                'Animals': {
                                    name: 'Animals',
                                    data: [
                                        ['Cows', 2],
                                        ['Sheep', 3]
                                    ]
                                },
                                'Fruits': {
                                    name: 'Fruits',
                                    data: [
                                        ['Apples', 5],
                                        ['Oranges', 7],
                                        ['Bananas', 2]
                                    ]
                                },
                                'Cars': {
                                    name: 'Cars',
                                    data: [
                                        ['Toyota', 1],
                                        ['Volkswagen', 2],
                                        ['Opel', 5]
                                    ]
                                }
                            },
                            series = drilldowns[e.point.name];

                        // Show the loading label
                        chart.showLoading('Simulating Ajax ...');

                        setTimeout(function () {
                            chart.hideLoading();
                            chart.addSeriesAsDrilldown(e.point, series);
                        }, 1000);
                    }

                }
            }
        },
        title: {
            text: 'Async drilldown'
        },
        xAxis: {
            type: 'category'
        },

        legend: {
            enabled: false
        },

        plotOptions: {
            series: {
                borderWidth: 0,
                dataLabels: {
                    enabled: true,
                }
            }
        },

        series: [{
            name: 'Things',
            colorByPoint: true,
            data:data_array

        }],

        drilldown: {
            series: []
        }
    })
});