Highchart Drilldown with data call when clicked - highcharts

Question

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.

Answer 1

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