How to implement drilldown in asp.net mvc project?

Question

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 ]

Answer 1

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