Highchart multiple level drilldown click event get drilldown series data

Question

I am using Highchart to display data as column chart with drilldown functionality. I wish to display respective drill-down data of that column in table format by click on the column.

when I click on a column, it returns null value to me.

how can I display the respective drill-down data by clicking on a column?

I am using multi-level drill-down highchart to display data as a column chart.

you can view full code by clicking given the link:

http://jsfiddle.net/me_ankit/sp0t5bkr/

jQuery(function () {
// Create the chart
var chart = Highcharts.chart('container', {
    credits: {
        enabled: false
    },
    exporting: { enabled: true },
    chart: {
        type: 'column',
        renderTo: 'sampleChart',
    },
    credit:{enabled:false},
    title: {
        text: 'Reviews'
    },
    lang: {
        drillUpText: '◁ Back'
    },
    subtitle: {
        text: 'Details of reviews'
    },
    xAxis: {
        type: 'category',
        labels:{
            formatter: function() {
                return (this.value.toString()).replace(/[^\da-zA-Z]/g,' ');
            },
            showInLegend: true,
        },
        title: {
            text: 'Date of Reviews'
        }
    },
    yAxis: {
        allowDecimals: false,
        title: {
            text: 'Number of Reviews'
        }
    },
    legend: {
        // layout: 'vertical',
        // backgroundColor: '#FFFFFF',
        enabled: true,
        floating: false,
        shadow :false,
        // align: 'left',
        // verticalAlign: 'top',
        // x: 90,
        // y: 45,
        labelFormatter: function () {
            return (this.name).replace(/[^a-zA-Z0-9]/g,' ');
        }
    },
    plotOptions: {
        series: {               
            borderWidth: 2,
            cursor: 'pointer',
            groupPadding: 0.125,
            dataLabels: {
                enabled: true,
                format: '{point.y}'
            },
            point: {
                events: {
                    click: function (e) {
                       console.log(this)
                    }
                }
            }
        },
    },
    tooltip: {
        useHtml:true,
        headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
        //pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y}</b> of total<br/>',
        formatter: function() {
            if(this.point.text)
                return '<b>'+this.point.text+'</b>';
            return '<b>'+ this.point.name+'</b>';
        }
    },
    series: [{
        name: 'Years',
        colorByPoint: true,
        data:[{"name":"Audio-2016","y":64,"drilldown":"audio_2016"},{"name":"Text-2016","y":8,"drilldown":"text_2016"},{"name":"Video-2016","y":10,"drilldown":"video_2016"}]        }],
    drilldown: {
        series: [{"name":"AUDIO_2016","id":"audio_2016","data":[{"name":"October-2016","y":54,"drilldown":"october_audio_2016"},{"name":"November-2016","y":10,"drilldown":"november_audio_2016"}]},{"name":"TEXT_2016","id":"text_2016","data":[{"name":"October-2016","y":7,"drilldown":"october_text_2016"},{"name":"November-2016","y":1,"drilldown":"november_text_2016"}]},{"name":"VIDEO_2016","id":"video_2016","data":[{"name":"October-2016","y":8,"drilldown":"october_video_2016"},{"name":"November-2016","y":2,"drilldown":"november_video_2016"}]},{"name":"OCTOBER_AUDIO_2016","id":"october_audio_2016","data":[{"name":"week-4","y":50,"drilldown":"week_4_october_audio_2016"},{"name":"week-1","y":4,"drilldown":"week_1_october_audio_2016"}]},{"name":"NOVEMBER_AUDIO_2016","id":"november_audio_2016","data":[{"name":"week-1","y":10,"drilldown":"week_1_november_audio_2016"}]},{"name":"OCTOBER_TEXT_2016","id":"october_text_2016","data":[{"name":"week-4","y":7,"drilldown":"week_4_october_text_2016"}]},{"name":"NOVEMBER_TEXT_2016","id":"november_text_2016","data":[{"name":"week-1","y":1,"drilldown":"week_1_november_text_2016"}]},{"name":"OCTOBER_VIDEO_2016","id":"october_video_2016","data":[{"name":"week-4","y":8,"drilldown":"week_4_october_video_2016"}]},{"name":"NOVEMBER_VIDEO_2016","id":"november_video_2016","data":[{"name":"week-1","y":2,"drilldown":"week_1_november_video_2016"}]},{"name":"WEEK_4_OCTOBER_AUDIO_2016","id":"week_4_october_audio_2016","data":[{"name":"26-October-2016_Inactive","y":13,"color":"#D6CBC9","text":""},{"name":"26-October-2016_Active","y":29,"color":"#FFD700","text":"Winner of the week"},{"name":"27-October-2016_Active","y":8,"color":null,"text":""}]},{"name":"WEEK_1_OCTOBER_AUDIO_2016","id":"week_1_october_audio_2016","data":[{"name":"02-October-2016_Inactive","y":1,"color":"#D6CBC9","text":""},{"name":"02-October-2016_Active","y":3,"color":"#FFD700","text":"Winner of the week"}]},{"name":"WEEK_4_OCTOBER_TEXT_2016","id":"week_4_october_text_2016","data":[{"name":"26-October-2016_Active","y":7,"color":"#FFD700","text":""}]},{"name":"WEEK_4_OCTOBER_VIDEO_2016","id":"week_4_october_video_2016","data":[{"name":"27-October-2016_Active","y":8,"color":"#FFD700","text":""}]},{"name":"WEEK_1_NOVEMBER_AUDIO_2016","id":"week_1_november_audio_2016","data":[{"name":"01-November-2016_Active","y":6,"color":"#FFD700","text":""},{"name":"03-November-2016_Inactive","y":2,"color":"#D6CBC9","text":""},{"name":"03-November-2016_Active","y":2,"color":null,"text":""}]},{"name":"WEEK_1_NOVEMBER_TEXT_2016","id":"week_1_november_text_2016","data":[{"name":"03-November-2016_Active","y":1,"color":"#FFD700","text":""}]},{"name":"WEEK_1_NOVEMBER_VIDEO_2016","id":"week_1_november_video_2016","data":[{"name":"07-November-2016_Active","y":2,"color":"#FFD700","text":""}]}],
    }
});

});

Answer 1

Although this is not correct way, but I found a side way to solve that issue . I used following ways to solve this issue by myself:

1) I made a div and on tool tip part of highchart, I instruct it to display column name on that div. 2) on click, I get the name from that div and get whole drilldown data on click.

3) now I call another function on click and send name of column and all drilldown object to that function.

4) after that, I find that name in drilldown and display average in table.

you can view complete solution on this link. jsfiddle.net/me_ankit/sp0t5bkr/