This JSFiddle demo shows an example of a Highcharts drilldown. When you click on one of the columns in the chart, the series is replaced with a drilldown series corresponding to the column that was clicked on
drilldown: {
series: [{
id: 'animals',
data: [
['Cats', 4],
['Dogs', 2],
['Cows', 1],
['Sheep', 2],
['Pigs', 1]
]
}, {
id: 'fruits',
data: [
['Apples', 4],
['Oranges', 2]
]
}, {
id: 'cars',
data: [
['Toyota', 4],
['Opel', 2],
['Volkswagen', 2]
]
}]
}
For example, if you click on the fruits column, this data will be displayed
data: [
['Apples', 4],
['Oranges', 2]
]
Notice that all the drilldown series have to be created up front. In this particular case, there are only 3 drilldown series, so this isn't a big issue. However, in my case, there are about 30 drilldown series and creating each one requires a few queries to be executed. Is there a way to have the drilldown series loaded lazily instead, i.e. the drilldown series data is only requested at the point when a user clicks on one of the columns?
For that level of functionality, I'd just go ahead and create it yourself. Use the point.events.click
callback to make the ajax call and replace the series:
plotOptions: {
series: {
point: {
events: {
click: function(event) {
var chart = this.series.chart;
var name = this.name;
$.ajax({
url: name + ".json",
success: function(data) {
swapSeries(chart,name,data);
},
dataType: "json"
});
}
}
}
}
},
Where swapSeries
is:
function swapSeries(chart, name, data) {
chart.series[0].remove();
chart.addSeries({
data: data,
name: name,
colorByPoint: true
});
}
Here's a working example.
Lazy drilldowns are supported by Highcharts, though it uses the term "async drilldown".
$(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],
['Sheep', 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: []
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/drilldown.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
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