How to do Drilldown in Piechart of Highchart?

Question

I have Drilled the "Column chart". & Now I want to Drill down the "Pie chart"

my code for showing Pie chart is as below,

$(function () {
    var chart;
    $(document).ready(function() {
        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',

            },
            title: {
                text: ''
            },
            tooltip: {
                pointFormat: '{series.name}: <b>{point.percentage}%</b>',
                percentageDecimals: 1
            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    dataLabels: {
                        enabled: true,
                        color: '#000000',
                        connectorColor: '#000000',
                        formatter: function() {
                            return '<b>'+ this.point.name +'</b>: '+ Math.round(this.percentage) +' %';
                        }
                    }
                }
            },
            series: 
                [{
                   type:'pie',
                    data: model.mixchart

                }]
});
});

});

How can I do drilldown in this ?

After Drilldown It should show the Pie chart only. So what should I do for that in the code abve?

At least just Give me some reference links for drilldown in Pie chart so that I can Prefer that one.

Solution 1

<script type="text/javascript">

         var chart;
         $(document).ready(function() {
            chart = new Highcharts.Chart({
               chart: {
                  renderTo: 'container',
                  backgroundColor: '#e2dfd3',
                  plotBackgroundColor: null,
                  plotBorderWidth: null,
                  plotShadow: false,

               },
               //credits for highcharts
               credits: {
                       enabled: false
                  },
               title: {
                  text: 'Country/Region',
               },
               tooltip: {
                  formatter: function() {
                     return '<b>'+ this.point.name +'</b>: '+ this.y +' %';
                  }
               },
               plotOptions: {
                  pie: {
                     borderWidth: 0, // border color control
                     size: '80%',
                     allowPointSelect: true,
                     cursor: 'pointer',
                     point: {
                        events: {
                           click: function() {
                              var drilldown = this.drilldown;
                              if (drilldown) { // drill down
                                 setChart(drilldown.name, drilldown.categories, drilldown.data, drilldown.color);
                              } else { // restore
                                 setChart(name, categories, data);
                              }
                           }
                        },

                     dataLabels: {
                        enabled: true,
                        color: '#000', //label colors
                        connectorColor: '#000', // connector label colors
                        formatter: function() {
                           return '<b>'+ this.point.name +'</b>: '+ this.y +' %';
                        }
                     }
                  }
               },
                series: [{
                  type: 'pie',

                  name: 'Country/Region',
                  data: [
                     {
                        name:'United States',
                        y: 45.0,
                     },{
                        name:'Germany', 
                        y: 26.8
                     },{
                        name: 'France',    
                        y: 12.8,
                        sliced: true,
                        selected: true,
                        /*drilldown: {
                            name: ['Disney'],
                            categories: ['2001', '2002', '2003','2004','2005','2006','2007','2008','2009','2010','2011'],
                            data: [32591, 29256, 28036, 27113, 26441, 27848, 29210, 29251, 28447, 28731],
                            color: colors[12] 
                         },*/




                     },{
                        name:'Japan',
                        y: 8.5
                     },{
                        name:'United Kingdom',
                        y: 8.5
                     },{
                        name:'Switzerland',
                        y: 8.5
                     },{
                        name: 'South Korea',
                        y: 6.2
                     },{
                        name:'Italy',
                        y: 6.2
                     },{
                        name:'Canada',
                        y: 0.7
                     },{
                        name:'Finland',
                        y: 0.7
                     },{
                        name:'Netherlands',
                        y: 0.7
                     },{
                        name:'Spain',
                        y: 0.7
                     },{
                        name:'Sweden',
                        y: 0.7
                     }
                  ]
               }]
               }/**/
            });
         });

      </script>

Solution 2

There are two methods you can drill down pie chart.

• Either you can modify same chart data
• You can draw new pie chart using the clicked refrence to previous chart.

here is my Jsfiddle link. I have drilled down the pie chart to show column chart.
To drill down a pie chart,What you need is the clicked slice.

to do that what you need is,

plotOptions: {
         pie: {
             point: {
                 events: {
                     click: function() {
                        //logic for drill down goes here                       
                     }
                 }
             }
         }
     },

Note : If you are drilling down in the same chart..
You will also need plot options for that chart type,If you are drilling down to different chart type.
I hope this helps.
cheers :)