CODEWITHSUNDEEP
highcharts
carlo suarez
carlo suarez

Reputation: 55

Highchart Drilldown with data call when clicked

I want to create a drill down chart but when a certain bar or label is click the next chart to display will be load/get data from Database first. It means that 2nd level drill down is not yet preloaded. I don't know how to do it or the right functions to search.

Thank you.

Upvotes: 1

Views: 517

Answers (1)

ppotaczek
ppotaczek

Reputation: 39069

In drilldown event you can get data and use addSeriesAsDrilldown method:

Highcharts.chart('container', {
    chart: {
        type: 'column',
        events: {
            drilldown: function(e) {
                if (!e.seriesOptions) {

                    var chart = this,
                        source = {
                            Animals: 'https://api.myjson.com/bins/100f5h',
                            Fruits: 'https://api.myjson.com/bins/csik5',
                            Cars: 'https://api.myjson.com/bins/sxd1x'
                        };

                    chart.showLoading('Waiting for data...');

                    $.get(source[e.point.name], function(data) {
                        chart.hideLoading();
                        chart.addSeriesAsDrilldown(e.point, data[e.point.name]);
                    });
                }

            }
        }
    },
    ...

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

    drilldown: {
        series: []
    }
});

Live demo: http://jsfiddle.net/BlackLabel/7r2z3t85/

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

Docs: https://www.highcharts.com/docs/chart-concepts/drilldown

Upvotes: 1

Related Questions