Drilling down the chart

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.

Note

To use the drilldown feature, you need to include the Highcharts-4.x.x/js/modules/drilldown.js file in your HTML after the Highcharts.js file. Not doing so will not throw any error or warning, but the drilldown feature will not work, hence making debugging difficult.

To start creating the drilldown chart for the table data, perform the following steps:

  1. Create a new blank HTML file and paste in the following code:
    <!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>
  2. Let's first draw a column chart to display the total yearly revenue:
    (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:

    Drilling down the 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:

  1. Modify your 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'
  }]
}]
  2. Now, include in your code the 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.

  3. Now, click on any of the columns and you will be taken to another chart showing the revenue breakdown, as shown in the following screenshot:
    Drilling down the chart

    Notice the Back to Revenue button that shows up after drilling down into the child chart.SW

Note

You can find out more about the Highcharts drilldown feature by visiting the official documentation at http://api.highcharts.com/highcharts#drilldown.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.133.150.142