Column Chart with Drill Down Capability

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

We have already seen the configuration used to draw a chart in Highcharts Configuration Syntax chapter. Now, we will see an example of a Column Chart with drill down capability.

Configurations

Let us now discuss additional configurations and also how we have added a series under drilldown.

drilldown

Options for drill down, the concept of inspecting increasingly high resolution data through clicking on chart items like columns or pie slices.

drilldown: {
   series: drilldownSeries
}

Example

highcharts_column_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: 'column'
                  };
                  var title = {
                     text: 'Browser market shares. November, 2013'   
                  };    
                  var subtitle = {
                     text: 'Click the columns 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'
                  };   
                  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_column_charts.htm