Highcharts async multi level drill down - highcharts

Question

I am looking for help in implementing multi-level drill down with Highcharts async drill down. I was able to implement the drill down to first level but i need drill down to one more level. Below is sample example which i am using for reference. In below example i can drill down to "Animals","Fruits" & "Cars". I also can click on Sheep and able to drilldown but how can i add series which will be displayed after i click on Sheep. Thanks for any help..
$('#container').highcharts({
chart: {
type: 'column',
events: {
drilldown: function (e) {
if (!e.seriesOptions) {
var chart = this,
drilldowns = {
'Animals': {
name: 'Animals',
data: [
{name: 'Sheep',
y:5,
drilldown: true
},
['Cow', 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: [{
name: 'Animals',
y: 5,
drilldown: true
}, {
name: 'Fruits',
y: 2,
drilldown: true
}, {
name: 'Cars',
y: 4,
drilldown: true
}]
}],
drilldown: {
series: []
}
});
});

Answer 1

Since their sample code references the point's name, should should create the drilled down values in the "drilldowns" dictionary using the data's parent name as the dictionary key. Here is an example of drilling into Dogs:
if (!e.seriesOptions) {
var chart = this,
drilldowns = {
'Animals': {
name: 'Animals',
data: [
{name: 'Dogs',
drilldown: true,
y: 2
},
['Cows', 2],
['Sheep', 3]
]
},
'Fruits': {
name: 'Fruits',
data: [
['Apples', 5],
['Oranges', 7],
['Bananas', 2]
]
},
'Cars': {
name: 'Cars',
data: [
['Toyota', 1],
['Volkswagen', 2],
['Opel', 5]
]
},
"Dogs": {
name: 'Dogs',
data: [
{
name: 'Rottweiler',
drilldown: true,
y: 6,
}, {
name: 'Pit Bull',
y: 2,
}, {
name: 'Poodle',
y: 4,
}]
},
"Rottweiler": {
name: 'Rottweiler',
data: [
['male', 4],
['female', 2]
]
}
},
series = drilldowns[e.point.name];
// Show the loading label
chart.showLoading('Simulating Ajax ...');
setTimeout(function () {
chart.hideLoading();
chart.addSeriesAsDrilldown(e.point, series);
}, 200);
}
Notice I added two new keys: "Dogs" and "Rottweiler".
Hope that helps.

Answer 2

$(function () {
// 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, true],
['Sheep', 3, true]
],
keys: ['name','y','drilldown']
},
'Sheep': {
name: 'Sheep',
data: [
['Red', 2],
['White', 1]
]
},
'Cows': {
name: 'Cows',
data: [
['Red', 1],
['White', 1]
]
},
'Fruits': {
name: 'Fruits',
data: [
['Apples', 5, true],
['Oranges', 7, true],
['Bananas', 2]
],
keys: ['name','y','drilldown']
},
'Apples': {
name: 'Apples',
data: [
['Red', 3],
['Green', 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: [{
name: 'Animals',
y: 5,
drilldown: true
}, {
name: 'Fruits',
y: 2,
drilldown: true
}, {
name: 'Cars',
y: 4,
drilldown: true
}]
}],
drilldown: {
series: []
}
});
});