Chapter 5: Building a Chart with Multiple Series Type

Combine all different series types, pie, column and spline, into a single chart with a SVG image

HTML

<script type="text/javascript" src="http://code.highcharts.com/highcharts.js"></script>
<body>
<div style="margin: 5px 60px 5px 5px; " id='container'></div>
</body>

JavaScript

$(document).ready(function() {

       var wiiColor = '#BBBBBB';
       var x360Color = '#89A54E';
       var ps3Color = '#4572A7';
       var splineColor = '#FF66CC';
        var chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                borderWidth: 1,
                spacingTop: 40,
                backgroundColor: {                    linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
                    stops: [ [ 0, '#0A0A0A' ],
                             [ 1, '#303030' ] ]
                },
                events: {
                   click: function(e) { console.log(e); }
                }            },
            title: {
                text: null
            },
            subtitle: {
                text: 'Number of consoles sold (in millions)',
                floating: true,                y: 15 
            },
            credits: { 
               position: {
                  align: 'left',
                  x: 20
               },
               text: 'Source: vgchartz'
            },
            xAxis: {
               //categories: [ '2008', '2009', '2010', '2011' ],
               minPadding: 0.2,
               tickInterval: 1,
               labels: {
                   formatter: function() {
                        return this.value;
                   }, 
                   style: {
                      color: '#CFCFCF'
                   } 
               }
            },
            legend: {
                itemStyle: {
                    color: '#CFCFCF'
                }
            },
            yAxis: [{
               title: {
                   text: 'Number of games sold',
                   align: 'low',
                   style: {
                      color: '#CFCFCF'
                   } 
               },
               labels: {
                   style: {
                      color: '#CFCFCF'
                   } 
               },
               showLastLabel: false,
...