We like to Drilldown on multiple levels in Highchart. Is there already an example in Highchart?
Currently used code:
$(div).highcharts({
chart: {type: 'column'},
credits: {enabled: false},
title: {text: title},
xAxis: {
categories: [
'Instroom',
'Rijdend',
'Úitstroom'
]
},
yAxis: {title: {text: ytitle}},
legend: {enabled: true},
plotOptions: {series: { borderWidth: 1, dataLabels: {enabled: true,}}},
series: first,
drilldown: {
series: drillDownObject(second)
}
});
It's possible, just add all drilldown series, then create a connection between point and drilldown. See: https://jsfiddle.net/BlackLabel/rpt741xc/
series: [{
name: 'Things',
colorByPoint: true,
data: [{
name: 'Animals',
y: 5,
drilldown: 'animals'
}]
}],
drilldown: {
series: [{
id: 'animals',
name: 'Animals',
data: [{
name: 'Cats',
y: 4,
drilldown: 'cats'
}, ['Dogs', 2],
['Cows', 1],
['Sheep', 2],
['Pigs', 1]
]
}, {
id: 'cats',
data: [1, 2, 3]
}]
}
For a mutiple levels pie chart check out http://jsfiddle.net/bge14m3a/1/
$(function () {
// Create the chart
$('#container').highcharts({
chart: {
type: 'pie'
},
title: {
text: 'Deep 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: 'animals'
},{
name: 'Food',
y: 4,
drilldown: 'food'
}]
}],
drilldown: {
series: [{
id: 'food',
name: 'Food',
data: [{
name: 'Apple',
y: 1.5,
drilldown: 'apple'
},
['Banana', 1],
['Peer', 0.5],
['Pineapple', 1]
]
}, {
id: 'apple',
data: [['1/6' ,1],
['1/3' , 2],
['1/2' , 3]]
},{
id: 'animals',
name: 'Animals',
data: [{
name: 'Cats',
y: 5,
drilldown: 'cats'
}, ['Dogs', 2],
['Cows', 1],
['Sheep', 1],
['Pigs', 1]
]
}, {
id: 'cats',
data: [1, 2, 3]
}]
}
})
});
<script src="js/jquery-2.0.2.min.js"></script>
<script src="js/highcharts.js"></script>
<script src="js/drilldown.js"></script>
<script>
var chartSeriesData = [];
var chartDrilldownData = [];
$.ajax({
type: 'GET',
url: 'abc.json',
success: function(data) {
var agentJson = data;
for (var i = 0;i <agentJson.countryInfo.length; i++)
{
var series_name = agentJson.countryInfo[i].name;
var drill_id = agentJson.countryInfo[i].drilldown;
var series_data = agentJson.countryInfo[i].y;
var drill_data = agentJson.countryInfo[i].data;
chartSeriesData.push({
name: series_name,
y: parseFloat(series_data),
drilldown : drill_id
});
chartDrilldownData.push({
data : drill_data,
id: drill_id,
name: series_name,
});
}
/// END FOR LOOP
$('#countryInfo').highcharts({
credits: {
enabled: false
},
chart: {
type: 'pie',
backgroundColor:'rgba(255, 255, 255, 0.1)'
},
title: {
text: 'Human Resources'
},
subtitle: {
text: ''
},
plotOptions: {
series: {
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '{point.name}: {point.y:.1f}%',
style: {
color: '#000',
fontWeight: 'bold',
fontSize: '12px',
textShadow: "0px #ffffff"
}
}
}
},
tooltip: {
headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>'
},
series: [{
name: 'Country',
colorByPoint: true,
data: chartSeriesData
}],
drilldown: {
series: chartDrilldownData
}
});
}
});
</script>
and your json file look likes:
{"countryInfo":[{"name":"Firefox","y":4,"drilldown":"Firefox","data":[["desktop",1]]},{"name":"Chrome","y":176,"drilldown":"Chrome","data":[["desktop",1],["desktop",18]]}]}
Here is an example that preserves the names on the axis. (Drilldown works on "Animals" > "Mammals")
Drilldown options looks like this:
drilldown: {
series: [{
id: 'animals',
data: [{
name: 'Mammals',
y: 4,
drilldown: 'mammals'
},
['Reptiles', 2],
['Vertebrates', 1]
]
}, {
id: 'mammals',
data: [['Cats', 3], ['Dogs', 2], ['Platypus', 1]]
},
...
http://jsfiddle.net/vcsqnr2z/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With