[Solved]-HighCharts - Pie chart drilldown for multilevel (3 to 4 level)-Highcharts

i guess you already got the answer. still it might be helpful for others.

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/data.js"></script>
<script src="http://code.highcharts.com/modules/drilldown.js"></script>

<div id="container" style="width: 700px; height: 400px; margin: 0 auto"></div>
<button id="pie">reset</button>

javascript part

var chart;
$(document).ready(function() { /*begin chart render*/
var colors = highcharts.getoptions().colors,
    categories = ['the americas', 'asia pacific', 'europe & africa'],
    //name = 'sectors',
    data = [{
        name: 'a-1',
        y: 55,
        color: colors[0],
        drilldown: {
            //begin alcohol
            name: 'a-1',
            categories: ['a', 'b', 'c', 'd', 'e', 'f', 'g'],
            data: [122252, 3516, 4036, 3557, 4021, 3624, 3847],
            color: colors[0],
            data: [{
                y: 33.06,
                name: 'a',
                drilldown: {
                    name: 'budweiser',
                    categories: ['a', 'b', 'c', 'd', 'e', 'f', 'g'],
                    data: [10838, 11349, 11894, 11846, 11878, 11662, 11652, 11438, 11833, 12252],
                    color: colors[0]
                }},
            {
                y: 10.85,
                name: 'b',
                drilldown: {
                    name: 'heinekein',
                    categories: ['a', 'b', 'c', 'd', 'e', 'f', 'g'],
                    data: [2266, 2396, 2431, 2380, 2357, 3516],
                    color: colors[0]
                }},
            {
                y: 7.35,
                name: 'c',
                drilldown: {
                    name: 'jack daniels',
                    categories: ['a', 'b', 'c', 'd', 'e', 'f', 'g'],
                    data: [1583, 1580, 1612, 4036],
                    color: colors[0]
                }},
            {
                y: 2.41,
                name: 'd',
                drilldown: {
                    name: 'johnnie walker',
                    categories: ['a', 'b', 'c', 'd', 'e', 'f', 'g'],
                    data: [1649, 1654, 1724, 3557],
                    color: colors[0]
                }},
            {
                y: 2.41,
                name: 'e',
                drilldown: {
                    name: 'moet & chandon',
                    categories: ['a', 'b', 'c', 'd', 'e', 'f', 'g'],
                    data: [2470, 2445, 2524, 2861, 2991, 3257, 3739, 3951, 3754, 4021],
                    color: colors[0]
                }},
            {
                y: 2.41,
                name: 'f',
                drilldown: {
                    name: 'smirnoff',
                    categories: ['a', 'b', 'c', 'd', 'e', 'f', 'g'],
                    data: [2594, 2723, 5600, 2975, 3097, 3032, 3379, 3590, 7350, 3624],
                    color: colors[0]
                }},
            {
                y: 2.41,
                name: 'g',
                drilldown: {
                    name: 'corona',
                    categories: ['a', 'b', 'c', 'd', 'e', 'f', 'g'],
                    data: [3847],
                    color: colors[0]
                }}],
        }},
    { 
        name: 'b-1',
        y: 11.94,
        color: colors[2],
        drilldown: {
            name: 'b',
            categories: ['a-2', 'b-2', 'c-2'],
            color: colors[2],
            data: [{
                y: 33.06,
                name: 'a',
                drilldown: {
                    name: 'a',
                    categories: ['a', 'b'],
                    data: [4444, 6666],
                    color: colors[3]
                },
                },
            {
                name: 'b',
                y: 10.85,
                drilldown: {
                    name: 'b',
                    categories: ['a', 'b'],
                    data: [22222, 6005],
                    color: colors[3]
                },
                },
            {
                name: 'c',
                y: 7.35,
                drilldown: {
                    name: 'c',
                    categories: ['2011'],
                    data: [3605],
                    color: colors[3]
                }}],
        }},
    ];



window.chart = new highcharts.chart({
    chart: {
        renderto: 'container',
        type: 'pie',
        /* changes bar size */
        pointpadding: -0.3,
        borderwidth: 0,
        pointwidth: 10,
        shadow: false,
        backgroundcolor: '#e2dfd3'
    },
    title: {
        text: 'pie test'
    },
    subtitle: {
        text: 'pie chart triple breakdown'
    },
    xaxis: {
        categories: categories
    },
    yaxis: {
        title: {
            text: 'total brand value',
            categories: categories
        }
    },
    //drilldown plot
    plotoptions: {
        pie: {
            cursor: 'pointer',
            allowpointselect: true,
            pointpadding: -0.3,
            borderwidth: 0,
            pointwidth: 15,
            shadow: false,
            point: {
                events: {
                    click: function() {
                        var chart = this.series.chart,
                            drilldown = this.drilldown;
                        if (drilldown) { // drill down
                            chart.setchart(drilldown.name, drilldown.categories, drilldown.data, drilldown.color);
                        }
                    }
                }
            },
            datalabels: {
                enabled: true,
                color: '#000',
                //label colors
                connectorcolor: '#000',
                // connector label colors
                formatter: function() {
                    return '<b>' + this.point.name + '</b>: ' + this.y;

                }
            }
        }
    },
    //formatting over hover tooltip
    tooltip: {
        formatter: function() {
            var point = this.point,
                s = point.name + ':<b>' + this.y + '% market share</b><br/>';
            if (point.drilldown) {
                s = point.name + ':<b>' + this.y + '222</b><br/>';
                s += 'click to view ' + point.name + ' versions';
            } else {
                s = point.name + ':<b>' + this.y + '333</b><br/>';
                s += 'click to return to browser brands';
            }
            return s;
        }
    },
    credits: {
        enabled: false
    },
    series: [{
        name: name,
        data: data,
        /* changes bar size */
        pointpadding: -0.3,
        borderwidth: 0,
        pointwidth: 15,
        shadow: false,
        color: 'black' //sectors icon
        }],
    exporting: {
        enabled: false
    }
}, function(chart){

    chart.upper = [];

    var up = false;

    chart.setchart = function(name, categories, data, color) {
        //chart.xaxis[0].setcategories(categories);
        if (name === true && chart.upper.length) {
            chart.series[0].remove();
            chart.addseries( chart.upper.pop() );

            if( chart.upper.length === 0 ) {
                $("#pie").hide('up');

                up = false;
            }
            return true;
        }

        if (up === false) {
           $("#pie").show().bind('click', function(){ chart.setchart(true); });
            up = true;
        }

        chart.upper.push( chart.series[0].options );
        chart.series[0].remove();
        chart.addseries({
            name: name,
            data: data,
            color: color || 'white'
            });
        }
    });
});

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);
                    });
                }
            }
        }
    }]
});