HighCharts - Pie chart drilldown for multilevel (3 to 4 level)

Question

I am using high chart to draw a pie chart and requirement are when we click on a part of chart it need to drill down to other level.

I need to drill down up to 3 to 4 level.

For example if I create chart for apparel when I click it will drill down to chart that contains apparel categories like - men apparel, women apparel , child apparel etc. (Level 2)

It is working fine 1 level and example for this given at High Charts official site (http://www.highcharts.com/demo/pie-drilldown/)

But I want one more level deep drill down like if now I click on women apparel it will drill down to women apparel categories like - bags, sunglasses, watches, earnings, etc.

Can anyone help me out :(

Answer 1

Not sure if this helps you. But I think it will be easier for you to implement this using the data from server side. You can just change the data of the piechart as shown below that can take you to any level. You just have to keep an identified to identify which level you are in.

var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container',
        type: 'pie'
    },
    series: [{
        data: myInitialDataArray, // make sure each data point has an id
        point: {
            events: {
                click: function () {
                    $.post('/get/data/url/' + this.id, function(data) {
                        // you may need to format your data here
                        // Set the level here. e.g Level 1, 2 or 3 and then depending on that you can also change the url also or any other logic
                        chart.series[0].setData(data);
                    });
                }
            }
        }
    }]
});