Consider the following table showing the retail revenue breakdown by month for the US video game industry starting from March 2012 to February 2014:
Mar |
Apr |
May |
Jun |
Jul |
Aug |
Sep |
Oct |
Nov |
Dec |
Jan |
Feb | |
---|---|---|---|---|---|---|---|---|---|---|---|---|
2012 - 2013 |
1.1 |
0.63 |
0.52 |
0.7 |
0.55 |
0.52 |
0.85 |
0.76 |
2.55 |
3.21 |
0.84 |
0.81 |
2013 - 2014 |
0.99 |
0.5 |
0.39 |
0.59 |
0.44 |
0.52 |
1.08 |
0.79 |
2.74 |
3.28 |
0.66 |
0.89 |
This table shows the revenue (in billions of US dollars) for the video game retail industry. In this example, we will plot a chart to visualize this data. We will draw a column chart that shows the total revenue for the fiscal year starting from March 2012 to February 2014. On clicking on the column, the reader will be shown a more detailed column chart showing the breakdown by months for the respective year.
To start creating the drilldown chart for the table data, perform the following steps:
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Highcharts Essentials</title> </head> <body> <div id="revenue_chart" style="width: 600px; height: 450px;"></div> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="js/highcharts.js"></script> <script src="js/modules/drilldown.js"></script> </body> </html>
(function() { $( '#revenue_chart' ).highcharts({ chart: { type: 'column' }, title: { text: 'Retail Revenue for Video Game Industry' }, subtitle: { text: 'Source: NPD Group; AFJV' }, xAxis: { title: { text: 'Years' }, Type: 'category' }, yAxis: { title: { text: 'Revenue (in U.S. billion dollars)' } }, series: [{ data: [{ name: '2012 - 2013', y: 13.04 }, { name: '2013 - 2014', y: 12.87 }] }] }); })();
In the preceding code, we passed the data series for each category as a distinct data object that includes the name of the data series and its value on the y axis. The preceding code will produce the following chart:
To enable the drilldown feature, we will specify the IDs of the drilldown series to be used for both categories (years) and then pass those series as a data object in the drilldown
component:
series
component to reference the IDs of the drilldowns to be used as follows:series: [{ data: [{ name: '2012 - 2013', y: 13.04, drilldown: 'rev1213' }, { name: '2013 - 2014', y: 12.87, drilldown: 'rev1314' }] }]
drilldown
component:drilldown: { series: [{ name: 'Revenue', id: 'rev1213', data: [ ['Mar', 1.1], ['Apr', 0.63], ['May', 0.52], ['Jun', 0.7], ['Jul', 0.55], ['Aug', 0.52], ['Sep', 0.85], ['Oct', 0.76], ['Nov', 2.55], ['Dec', 3.21], ['Jan', 0.84], ['Feb', 0.81] ] }, { name: 'Revenue', id: 'rev1314', data: [ ['Mar', 0.99], ['Apr', 0.5], ['May', 0.39], ['Jun', 0.59], ['Jul', 0.44], ['Aug', 0.52], ['Sep', 1.08], ['Oct', 0.79], ['Nov', 2.74], ['Dec', 3.28], ['Jan', 0.66], ['Feb', 0.89] ] }] }
Notice the id
properties of the drilldown series that are the same as used to reference in the drilldown parent point.
Notice the Back to Revenue button that shows up after drilling down into the child chart.SW
You can find out more about the Highcharts drilldown feature by visiting the official documentation at http://api.highcharts.com/highcharts#drilldown.