Pie Chart with Drill Down Capability

Following is an example of a Pie Chart with drill down capability.

We have already seen the configuration used to draw a chart in Highcharts Configuration Syntax chapter. Now, we will discuss how we have added a series under drilldown.

An example of a Pie Chart with drill down capability is given below.

Configurations

Let us now see additional configurations.

drilldown

This is the concept of inspecting increasingly high resolution data through clicking on chart items like columns or pie slices.

drilldown: {
   series: drilldownSeries
}

Example

highcharts_pie_drilldown.htm

Live Demo

<html>
   <head>
      <title>Highcharts Tutorial</title>
      <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
      <script src = "https://code.highcharts.com/highcharts.js"></script>  
      <script src = "https://code.highcharts.com/modules/drilldown.js"></script>  
      <script src = "https://code.highcharts.com/modules/data.js"></script> 
   </head>
   
   <body>
      <div id = "container" style = "width: 550px; height: 400px; margin: 0 auto"></div>
      <script language = "JavaScript">
         $(document).ready(function() { 
            Highcharts.data({
               csv: document.getElementById('tsv').innerHTML,
               itemDelimiter: '\t',
               
               parsed: function (columns) {
                  var brands = {}, brandsData = [], versions = {}, drilldownSeries = [];
                  
                  // Parse percentage strings
                  columns[1] = $.map(columns[1], function (value) {
                     if (value.indexOf('%') === value.length - 1) {
                        value = parseFloat(value);
                     }
                     return value;
                  });
                  $.each(columns[0], function (i, name) {
                     var brand, version;
                     
                     if (i > 0) {
                        // Remove special edition notes
                        name = name.split(' -')[0];

                        // Split into brand and version
                        version = name.match(/([0-9]+[\.0-9x]*)/);
                        
                        if (version) {
                           version = version[0];
                        }
                        brand = name.replace(version, '');

                        // Create the main data
                        if (!brands[brand]) {
                           brands[brand] = columns[1][i];
                        } else {
                           brands[brand] += columns[1][i];
                        }

                        // Create the version data
                        if (version !== null) {
                           if (!versions[brand]) {
                              versions[brand] = [];
                           }
                           versions[brand].push(['v' + version, columns[1][i]]);
                        }
                     }
                  });
                  $.each(brands, function (name, y) {
                     brandsData.push({
                        name: name,
                        y: y,
                        drilldown: versions[name] ? name : null
                     });
                  });
                  $.each(versions, function (key, value) {
                     drilldownSeries.push({
                        name: key,
                        id: key,
                        data: value
                     });
                  }); 
          
                  var chart = {
                     type: 'pie'
                  };
                  var title = {
                     text: 'Browser market shares. November, 2013'   
                  };    
                  var subtitle = {
                     text: 'Click the slices to view versions. Source: netmarketshare.com.'
                  };
                  var xAxis = {
                     type: 'category'      
                  };
                  var yAxis = {
                     title: {
                       text: 'Total percent market share'
                     }
                  };  
                  var tooltip = {
                     headerFormat: '<span style = "font-size:11px">{series.name}</span><br>',
                     pointFormat: '<span style = "color:{point.color}">{point.name}</span>:<b>{point.y:.2f}%</b> of total<br/>'
                  };   
                  var credits = {
                     enabled: false
                  };
                  var series = [{
                     name: 'Brands',
                     colorByPoint: true,
                     data: brandsData
                  }];
                  var drilldown = {
                     series: drilldownSeries
                  }   
                  var json = {};   
                  json.chart = chart; 
                  json.title = title;   
                  json.subtitle = subtitle;
                  json.xAxis = xAxis;
                  json.yAxis = yAxis;   
                  json.tooltip = tooltip;   
                  json.credits = credits;
                  json.series = series;
                  json.drilldown = drilldown;
                  $('#container').highcharts(json);
               }
            });
         });
      </script>
      
      <!-- Data from www.netmarketshare.com. Select Browsers => Desktop share by version.
         Download as tsv. -->
      <pre id = "tsv" style = "display:none">
         Browser Version	Total Market Share
         Microsoft Internet Explorer 8.0	26.61%
         Microsoft Internet Explorer 9.0	16.96%
         Chrome 18.0	8.01%
         Chrome 19.0	7.73%
         Firefox 12	6.72%
         Microsoft Internet Explorer 6.0	6.40%
         Firefox 11	4.72%
         Microsoft Internet Explorer 7.0	3.55%
         Safari 5.1	3.53%
         Firefox 13	2.16%
         Firefox 3.6	1.87%
         Opera 11.x	1.30%
         Chrome 17.0	1.13%
         Firefox 10	0.90%
         Safari 5.0	0.85%
         Firefox 9.0	0.65%
         Firefox 8.0	0.55%
         Firefox 4.0	0.50%
         Chrome 16.0	0.45%
         Firefox 3.0	0.36%
         Firefox 3.5	0.36%
         Firefox 6.0	0.32%
         Firefox 5.0	0.31%
         Firefox 7.0	0.29%
         Proprietary or Undetectable	0.29%
         Chrome 18.0 - Maxthon Edition	0.26%
         Chrome 14.0	0.25%
         Chrome 20.0	0.24%
         Chrome 15.0	0.18%
         Chrome 12.0	0.16%
         Opera 12.x	0.15%
         Safari 4.0	0.14%
         Chrome 13.0	0.13%
         Safari 4.1	0.12%
         Chrome 11.0	0.10%
         Firefox 14	0.10%
         Firefox 2.0	0.09%
         Chrome 10.0	0.09%
         Opera 10.x	0.09%
         Microsoft Internet Explorer 8.0 - Tencent Traveler Edition	0.09%
      </pre>
   </body>
   
</html>

Result

Verify the result.

highcharts_pie_charts.htm