I created an ASP.NET MVC Project to display the average duration of different actions. To do this I used Highcharts. In the beginning, I show the average duration per hour in the chart. When I click on this chart I want to show the average duration of every minute, then every second, millisecond... I tried to implement drill down but when I click on a bar nothing happens.
Here is the code of the Highchart and the data:
Highcharts.chart('container', {
chart: {
zoomType: 'xy',
spacingBottom: 40,
spacingTop: 40
},
title: {
text: 'Performance and Error Analytics'
},
subtitle: {
text: 'Analytics of: ' + func
},
xAxis: [{
categories: timeArray,
crosshair: true,
title: {
text: 'Hours',
align: 'middle'
}
}],
yAxis: [{ // Primary yAxis
labels: {
format: '{value}',
style: {
color: Highcharts.getOptions().colors[1]
}
},
title: {
text: 'Errors',
style: {
color: Highcharts.getOptions().colors[2]
}
}
}, { // Secondary yAxis
title: {
text: 'Duration in ms',
style: {
color: Highcharts.getOptions().colors[0]
}
},
labels: {
format: '{value} ms',
style: {
color: Highcharts.getOptions().colors[0]
}
},
opposite: true
}],
tooltip: {
shared: true
},
legend: {
layout: 'vertical',
align: 'center',
x: 0,
verticalAlign: 'bottom',
y: 50,
floating: true,
backgroundColor:
Highcharts.defaultOptions.legend.backgroundColor || // theme
'rgba(255,255,255,0.25)'
},
series: [{
name: 'Duration in ms',
type: 'column',
yAxis: 1,
data: durationPerHourArray,
tooltip: {
valueSuffix: ' ms'
}
}, {
name: 'Errors',
type: 'spline',
data: errorArray,
tooltip: {
valueSuffix: ' '
}
}],
drilldown: {
series: [{
type: 'column',
id: hourArray,
name: 'Duration every minute',
data: durationPerMinuteArray
}]
}
});
timeArray:
(3) […]
0: "9 Uhr"
1: "10 Uhr"
2: "11 Uhr"
durationPerHourArray:
(3) […]
0: Object { y: 2.5, drilldown: 9 }
1: Object { y: 3, drilldown: 10 }
2: Object { y: 141.5, drilldown: 11 }
hourArray:
(3) […]
0: 9
1: 10
2: 11
durationPerMinuteArray:
(3) […]
0: {…}
id: Array [ 16 ]
y: Array [ 2.5 ]
<prototype>: Object { … }
1: {…}
id: Array(4) [ 13, 16, 20, … ]
y: Array(4) [ 3, 2, 5, … ]
<prototype>: Object { … }
2: {…}
id: Array [ 50, 53 ]
y: Array [ 143, 140 ]
Your drilldown options seems to be misconfigured. An id of drilldown series must be the same as drilldown in a base series:
series: [{
...,
data: [{
...,
drilldown: '1'
}, {
...,
drilldown: '2'
}, ...]
}],
drilldown: {
series: [{
id: '1',
data: [...]
}, {
id: '2',
data: [...]
}, ...]
}
Live demo: http://jsfiddle.net/BlackLabel/Lfjs57xt/
Docs: https://www.highcharts.com/docs/chart-concepts/drilldown