Chapter 5: Preparing a Donut Chart - Multiple Series (3)

3 pie series donut chart

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() {

        function formatWithLineBreaks(str) {
            var words = str.split(' ');
            var lines = [];
            var line = ''; 
            $.each(words, function(idx, word) {
                if (line.length + word.length > 35) {
                    lines.push(line); 
                    line = ''; 
                } 
                line += word + ' ';
            });
            lines.push(line);
            return lines.join('<br/>');
        }

        function colorBrightness(color, brightness) {
            return Highcharts.Color(color).brighten(brightness).get();
        } 

        var chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                defaultSeriesType: 'pie',
                borderWidth: 1
            },
            title: {
                text: 'Number of Games Sold (in millions) in 2011',
            },
            credits: { 
               position: {
                  align: 'left',
                  x: 20
               },
               text: 'Source: vgchartz'
            },
            plotOptions: {
               pie: {
                   allowPointSelect: true
               }
            },
            series: [{
                name: 'Publishers',
                dataLabels : {
                    distance: -90,
                    color: 'white',
                    formatter: function() {
                         return Highcharts.numberFormat(this.y / 1000000, 2);
                    },
                    style: {
                         fontWeight: 'bold'
                    }
                },
                showInLegend: true,
                data: [ [ 'Nintendo', 54030288 ], [ 'Electronic Arts', 31367739 ],
                        [ 'Activision', 30230170 ] ]
            }, {
               name: 'Platform',
               innerSize: '30%',
                dataLabels : {
                    distance: -45,
                   ...