how to display drilldown column highchart using json array objects - 3 level drilldown column highchart

0
votes

using json array objects i want to display 3 level drilldown column highchart: in 1-level: in this i want to display wardid's - total 5 wardid's are there(1,2,3,4,5). in 2-level: in this i want to display areaid's - in the 1-level when i click wardid:1,that wardid:1 related areaid's will come in 2-level. in 3-level: in this i want to display drywaste and wetwaste quantity - in the 2-level when i click areaid:15,that areaid:15 related drywaste and wetwaste quantity will be displayed along with date

and time in 3-level.

This is the actual data,

var data = [
    {
        "solidwastecollectionid": 50,
        "areaid": 25,
        "wardid": 5,
        "collectiondate": 1501698600000,
        "drywaste": 11.23,
        "wetwaste": 12.47,
        "collectionqty": 23.7
    },
    {
        "solidwastecollectionid": 47,
        "areaid": 22,
        "wardid": 5,
        "collectiondate": 1501698600000,
        "drywaste": 13.2,
        "wetwaste": 10.4,
        "collectionqty": 23.6
    },
    {
        "solidwastecollectionid": 46,
        "areaid": 21,
        "wardid": 4,
        "collectiondate": 1501698600000,
        "drywaste": 13.02,
        "wetwaste": 5.38,
        "collectionqty": 18.4
    },
    {
        "solidwastecollectionid": 45,
        "areaid": 20,
        "wardid": 4,
        "collectiondate": 1501698600000,
        "drywaste": 10.22,
        "wetwaste": 4.98,
        "collectionqty": 15.2
    },
    {
        "solidwastecollectionid": 44,
        "areaid": 19,
        "wardid": 4,
        "collectiondate": 1501698600000,
        "drywaste": 15.3,
        "wetwaste": 3.5,
        "collectionqty": 18.8
    },
    {
        "solidwastecollectionid": 43,
        "areaid": 18,
        "wardid": 3,
        "collectiondate": 1501698600000,
        "drywaste": 9.9,
        "wetwaste": 11.7,
        "collectionqty": 21.6
    },
    {
        "solidwastecollectionid": 42,
        "areaid": 17,
        "wardid": 3,
        "collectiondate": 1501698600000,
        "drywaste": 13.2,
        "wetwaste": 3.3,
        "collectionqty": 16.5
    },
    {
        "solidwastecollectionid": 41,
        "areaid": 16,
        "wardid": 3,
        "collectiondate": 1501698600000,
        "drywaste": 11.9,
        "wetwaste": 5.4,
        "collectionqty": 17.3
    }, 
    {
        "solidwastecollectionid": 38,
        "areaid": 13,
        "wardid": 3,
        "collectiondate": 1501698600000,
        "drywaste": 9.4,
        "wetwaste": 15,
        "collectionqty": 24.4
    },
    {
        "solidwastecollectionid": 37,
        "areaid": 12,
        "wardid": 3,
        "collectiondate": 1501698600000,
        "drywaste": 10.6,
        "wetwaste": 7.3,
        "collectionqty": 17.9
    },
    {
        "solidwastecollectionid": 36,
        "areaid": 11,
        "wardid": 2,
        "collectiondate": 1501698600000,
        "drywaste": 11.2,
        "wetwaste": 11.4,
        "collectionqty": 22.6
    },
    {
        "solidwastecollectionid": 35,
        "areaid": 10,
        "wardid": 2,
        "collectiondate": 1501698600000,
        "drywaste": 12.1,
        "wetwaste": 5,
        "collectionqty": 17.1
    },
    {
        "solidwastecollectionid": 34,
        "areaid": 9,
        "wardid": 2,
        "collectiondate": 1501698600000,
        "drywaste": 2.06,
        "wetwaste": 19.34,
        "collectionqty": 21.4
    },
    {
        "solidwastecollectionid": 31,
        "areaid": 6,
        "wardid": 2,
        "collectiondate": 1501698600000,
        "drywaste": 4.89,
        "wetwaste": 11.41,
        "collectionqty": 16.3
    },
    {
        "solidwastecollectionid": 30,
        "areaid": 5,
        "wardid": 2,
        "collectiondate": 1501698600000,
        "drywaste": 8.84,
        "wetwaste": 17.66,
        "collectionqty": 26.5
    },
    {
        "solidwastecollectionid": 29,
        "areaid": 4,
        "wardid": 1,
        "collectiondate": 1501698600000,
        "drywaste": 9,
        "wetwaste": 15.9,
        "collectionqty": 24.9
    },
    {
        "solidwastecollectionid": 28,
        "areaid": 3,
        "wardid": 1,
        "collectiondate": 1501698600000,
        "drywaste": 12.67,
        "wetwaste": 6.73,
        "collectionqty": 19.4
    },
    {
        "solidwastecollectionid": 27,
        "areaid": 2,
        "wardid": 1,
        "collectiondate": 1501698600000,
        "drywaste": 11.78,
        "wetwaste": 11.02,
        "collectionqty": 22.8
    },
    {
        "solidwastecollectionid": 25,
        "areaid": 25,
        "wardid": 5,
        "collectiondate": 1501612200000,
        "drywaste": 9.44,
        "wetwaste": 6.16,
        "collectionqty": 15.6
    },
    {
        "solidwastecollectionid": 24,
        "areaid": 24,
        "wardid": 5,
        "collectiondate": 1501612200000,
        "drywaste": 7.19,
        "wetwaste": 15.21,
        "collectionqty": 22.4
    },
    {
        "solidwastecollectionid": 23,
        "areaid": 23,
        "wardid": 5,
        "collectiondate": 1501612200000,
        "drywaste": 10.78,
        "wetwaste": 14.72,
        "collectionqty": 25.5
    },
    {
        "solidwastecollectionid": 21,
        "areaid": 21,
        "wardid": 4,
        "collectiondate": 1501612200000,
        "drywaste": 10.9,
        "wetwaste": 5.2,
        "collectionqty": 16.1
    },
    {
        "solidwastecollectionid": 18,
        "areaid": 18,
        "wardid": 3,
        "collectiondate": 1501612200000,
        "drywaste": 10.2,
        "wetwaste": 10.2,
        "collectionqty": 20.4
    },
    {
        "solidwastecollectionid": 17,
        "areaid": 17,
        "wardid": 3,
        "collectiondate": 1501612200000,
        "drywaste": 9.3,
        "wetwaste": 9.3,
        "collectionqty": 18.6
    },
    {
        "solidwastecollectionid": 14,
        "areaid": 14,
        "wardid": 3,
        "collectiondate": 1501612200000,
        "drywaste": 13.3,
        "wetwaste": 9.3,
        "collectionqty": 22.6
    },
    {
        "solidwastecollectionid": 13,
        "areaid": 13,
        "wardid": 3,
        "collectiondate": 1501612200000,
        "drywaste": 8.2,
        "wetwaste": 10.1,
        "collectionqty": 18.3
    },
    {
        "solidwastecollectionid": 12,
        "areaid": 12,
        "wardid": 3,
        "collectiondate": 1501612200000,
        "drywaste": 4.05,
        "wetwaste": 12.05,
        "collectionqty": 16.1
    },
    {
        "solidwastecollectionid": 11,
        "areaid": 11,
        "wardid": 2,
        "collectiondate": 1501612200000,
        "drywaste": 11.9,
        "wetwaste": 11.8,
        "collectionqty": 23.7
    },
    {
        "solidwastecollectionid": 10,
        "areaid": 10,
        "wardid": 2,
        "collectiondate": 1501612200000,
        "drywaste": 2.2,
        "wetwaste": 17,
        "collectionqty": 19.4
    },
    {
        "solidwastecollectionid": 9,
        "areaid": 9,
        "wardid": 2,
        "collectiondate": 1501612200000,
        "drywaste": 11.2,
        "wetwaste": 5,
        "collectionqty": 16.2
    },
    {
        "solidwastecollectionid": 8,
        "areaid": 8,
        "wardid": 2,
        "collectiondate": 1501612200000,
        "drywaste": 8.9,
        "wetwaste": 5.4,
        "collectionqty": 14.3
    },
    {
        "solidwastecollectionid": 7,
        "areaid": 7,
        "wardid": 2,
        "collectiondate": 1501612200000,
        "drywaste": 6.8,
        "wetwaste": 21.3,
        "collectionqty": 28.1
    },
    {
        "solidwastecollectionid": 6,
        "areaid": 6,
        "wardid": 2,
        "collectiondate": 1501612200000,
        "drywaste": 10.7,
        "wetwaste": 11.1,
        "collectionqty": 21.9
    },
    {
        "solidwastecollectionid": 5,
        "areaid": 5,
        "wardid": 2,
        "collectiondate": 1501612200000,
        "drywaste": 15.05,
        "wetwaste": 9.15,
        "collectionqty": 24.2
    },
    {
        "solidwastecollectionid": 4,
        "areaid": 4,
        "wardid": 1,
        "collectiondate": 1501612200000,
        "drywaste": 11.2,
        "wetwaste": 9.1,
        "collectionqty": 21.2
    },
    {
        "solidwastecollectionid": 3,
        "areaid": 3,
        "wardid": 1,
        "collectiondate": 1501612200000,
        "drywaste": 12.5,
        "wetwaste": 6.2,
        "collectionqty": 18.7
    },
    {
        "solidwastecollectionid": 2,
        "areaid": 2,
        "wardid": 1,
        "collectiondate": 1501612200000,
        "drywaste": 9,
        "wetwaste": 11.2,
        "collectionqty": 21.2
    },
    {
        "solidwastecollectionid": 1,
        "areaid": 1,
        "wardid": 1,
        "collectiondate": 1501612200000,
        "drywaste": 10.2,
        "wetwaste": 5.3,
        "collectionqty": 15.5
    }
];
1
highcharts
Check this demo which have 2 levels and adapt it to your json. – Core972
Hi Kranthi, From your description I understood that you want to achieve something like this: jsfiddle.net/BlackLabel/h1kxc6yj Please refer to the example and let me know if your problem is solved. – ppotaczek
Thanks for your reply @ppotaczek. But in the level-1 display only ward ids(1,2,3,4,5) not repeated ward ids. and in the level-2, that particular ward related area ids will come. suppose for example when i click ward 5 in level-1, in the level-2 all ward 5 related area ids(25,22,25,24,23) will come. – Kranthi
Hi Kranthi, Thank you for the explanation, but I still do not understand how you can display the last level. Here is an example with two levels: jsfiddle.net/BlackLabel/rxvcn7g4 – ppotaczek
Thank you so much for the solution @ppotaczek . in the last level based on area id we need to display that particular area id related dry waste and wet waste data along with proper date and time. suppose i am selecting ward id 5 in level 1 and in level 2 all area ids (25,22,25,24,23) are coming to that particular wardid. In level 2, when i click area id 22 it will display "drywaste": 13.2, "wetwaste": 10.4 in the last level along with date and time. – Kranthi

1 Answers

0
votes

You need to create custom drilldown for your chart:

chart: {
    type: 'column',
    events: {
        drillup: function() {
            if (this.xAxis[0].isDatetimeAxis) {
                this.xAxis[0].update({
                    type: 'linear'
                });
            }

        },
        drilldown: function(e) {
            if (!e.seriesOptions) {

                var chart = this,
                    drilldown1,
                    drilldown2;

                if (e.point.series.name === 'wardid') {
                    drilldown1 = {
                        name: 'areaid',
                        data: (function() {
                            var data = [];

                            JSONdata.forEach(function(el) {
                                if (e.point.y === el.wardid) {
                                    data.push({
                                        y: el.areaid,
                                        drilldown: true
                                    });
                                }
                            });

                            return data;
                        })()
                    }

                    chart.addSeriesAsDrilldown(e.point, drilldown1);
                } else {
                    drilldown1 = {
                        name: 'drywaste',
                        data: [{
                            y: JSONdata[e.point.index].drywaste,
                            x: JSONdata[e.point.index].collectiondate
                        }]
                    }

                    drilldown2 = {
                        name: 'wetwaste',
                        data: [{
                            y: JSONdata[e.point.index].wetwaste,
                            x: JSONdata[e.point.index].collectiondate
                        }]
                    }
                    chart.addSingleSeriesAsDrilldown(e.point, drilldown1);
                    chart.addSingleSeriesAsDrilldown(e.point, drilldown2);
                    chart.xAxis[0].update({
                        type: 'datetime'
                    });
                }

                chart.applyDrilldown();
            }

        }
    }
}

Live demo: http://jsfiddle.net/BlackLabel/q1n7r6oh/

API Reference: https://api.highcharts.com/class-reference/Highcharts.Chart#addSeriesAsDrilldown