Combining line and column charts

Consider the following example that shows the sales of smartphones to end users in each quarter of the year 2013. For the sake of simplicity, only three leading vendors have been included:

(function() {
  $( '#chart_container' ).highcharts({
    title: {
      text: 'Global Smartphone Sales in 2013'
    },
    subtitle: {
      text: 'Source: Gartner'
    },
    xAxis: {
      categories: ["Q1'13", "Q2'13", "Q3'13"]
    },
    yAxis: {
      title: {
        text: 'Units (in millions)'
      }
    },
    series: [{
      name: 'Android',
      type: 'column',
      data: [156.19, 177.9, 205.02]
    }, {
      name: 'iOS',
      type: 'column',
      data: [38.33, 31.9, 30.33]
    }, {
      name: 'Microsoft',
      type: 'column',
      data: [5.99, 7.41, 8.91]
    }]
  });
})();

This code generates a column chart that consists of three series for Android, iOS, and Microsoft with the numbers of their units sold in millions:

Combining line and column charts

We can easily introduce another series with type as line to show the total number of sales made in that quarter:

{
  name: 'Total',
  type: 'line',
  data: [200.51, 217.21, 244.26]
}

The additional series of type line is now inserted in the following chart showing the total number of sales in each quarter:

Combining line and column charts
..................Content has been hidden....................

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