Reputation: 423
Highcharts multiple series drilldown to multiple series
I'm trying to generate a Highcharts column chart which initially shows IT costs ( in euro ) of all divisions within our company for each month of the year.
Each division needs to be clickable which drills down to the all the departments within that division; again for each month of the year.
I've added my latest tryout in the following JSFiddle in which the first level works, but the second level does not:
http://jsfiddle.net/r8h1etua/5/
$(function () {
// Create the chart
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: null
},
subtitle: {
text: null
},
xAxis: {
categories: [
'Jan',
'Feb',
'Mar',
'Apr',
'May',
'Jun',
'Jul',
'Aug',
'Sep',
'Oct',
'Nov',
'Dec'
],
crosshair: true
},
yAxis: {
min: 0,
title: {
text: 'Costs ( € )'
}
},
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y:.1f} k</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: 'Infra',
data: [
{ y: 49.9, drilldown: 'Div1' },
{ y: 71.59, drilldown: 'Div1' },
{ y: 106.4, drilldown: 'Div1' },
{ y: 129.2, drilldown: 'Div1' },
{ y: 144.0, drilldown: 'Div1' },
{ y: 176.0, drilldown: 'Div1' },
{ y: 135.69, drilldown: 'Div1' },
{ y: 148.5, drilldown: 'Div1' },
{ y: 216.4, drilldown: 'Div1' },
{ y: 194.1, drilldown: 'Div1' },
{ y: 95.6, drilldown: 'Div1' },
{ y: 54.4, drilldown: 'Div1' }
]
}, {
name: 'Industry North',
data: [
{ y: 83.6, drilldown: 'Div2' },
{ y: 78.8, drilldown: 'Div2' },
{ y: 98.5, drilldown: 'Div2' },
{ y: 93.4, drilldown: 'Div2' },
{ y: 106.0, drilldown: 'Div2' },
{ y: 84.5, drilldown: 'Div2' },
{ y: 105.0, drilldown: 'Div2' },
{ y: 104.3, drilldown: 'Div2' },
{ y: 91.2, drilldown: 'Div2' },
{ y: 83.5, drilldown: 'Div2' },
{ y: 106.6, drilldown: 'Div2' },
{ y: 92.3, drilldown: 'Div2' }
]
}, {
name: 'Industry South',
data: [
{ y: 48.9, drilldown: 'Div3' },
{ y: 38.8, drilldown: 'Div3' },
{ y: 39.3, drilldown: 'Div3' },
{ y: 41.4, drilldown: 'Div3' },
{ y: 47.0, drilldown: 'Div3' },
{ y: 48.3, drilldown: 'Div3' },
{ y: 59.0, drilldown: 'Div3' },
{ y: 59.6, drilldown: 'Div3' },
{ y: 65.2, drilldown: 'Div3' },
{ y: 65.2, drilldown: 'Div3' },
{ y: 59.3, drilldown: 'Div3' },
{ y: 51.2, drilldown: 'Div3' }
]
}],
drilldown: {
series: [{
name: 'Infra',
id: 'Div1',
series: [{
name: '1',
data: [
{ y: 49.9, name: '1' },
{ y: 71.59, name: '1' },
{ y: 106.4, name: '1' },
{ y: 129.2, name: '1' },
{ y: 144.0, name: '1' },
{ y: 176.0, name: '1' },
{ y: 135.69, name: '1' },
{ y: 148.5, name: '1' },
{ y: 216.4, name: '1' },
{ y: 194.1, name: '1' },
{ y: 95.6, name: '1' },
{ y: 54.4, name: '1' }
]
}, {
name: '2',
data: [
{ y: 83.6, name: '2' },
{ y: 78.8, name: '2' },
{ y: 98.5, name: '2' },
{ y: 93.4, name: '2' },
{ y: 106.0, name: '2' },
{ y: 84.5, name: '2' },
{ y: 105.0, name: '2' },
{ y: 104.3, name: '2' },
{ y: 91.2, name: '2' },
{ y: 83.5, name: '2' },
{ y: 106.6, name: '2' },
{ y: 92.3, name: '2' }
]
}, {
name: '3',
data: [
{ y: 48.9, name: '3' },
{ y: 38.8, name: '3' },
{ y: 39.3, name: '3' },
{ y: 41.4, name: '3' },
{ y: 47.0, name: '3' },
{ y: 48.3, name: '3' },
{ y: 59.0, name: '3' },
{ y: 59.6, name: '3' },
{ y: 65.2, name: '3' },
{ y: 65.2, name: '3' },
{ y: 59.3, name: '3' },
{ y: 51.2, name: '3' }
]
}]
}, {
name: 'Industry North',
id: 'Div2',
data: [48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2]
}, {
name: 'Industry South',
id: 'Div3',
data: [48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 51.2]
}]
}
});
});
Thanks in advance.
As you can see in the jsfiddle the second and third departments do get a drilldown result, but that's showing just one serie. I need to show multiple series, one for each department within the chosen division.
Upvotes: 3
Views: 1956
Answers (1)
Reputation: 7886
Drilldown to multiple series from a single point is already explained here: Single series drilldown to multiple series Highcharts
The main challange here is to drilldown into category with each point having mulitple series. For this let's check if first argument of event function in chart's drilldown event has property points defined as array (when drilling down into category) instead of having it set to false (when drilling down into a point).
$('#container').highcharts({
chart: {
events: {
drilldown: function(e) {
...
if (e.points === false) {
... //single point drilldown
} else {
... //or category drilldown and e.points is array of clicked category's points
}
...
Next, load all series for all points as previously, so multiple chart.addSingleSeriesAsDrilldown(point, series); and chart.applyDrilldown(); in the end.
Example: http://jsfiddle.net/pk544oad/
Upvotes: 5
Related Questions
- Return multiple values in JavaScript?
- How can I run multiple npm scripts in parallel?
- Regex to replace multiple spaces with a single space
- Switch statement for multiple cases in JavaScript
- Set Additional Data to highcharts series
- nested series in highcharts drilldown
- Highcharts: Stacked area drilldown to multiple series
- Single series drilldown to multiple series Highcharts
- Highcharts 3.08 drilldown with multiple parent series