Chapter 5: Plotting Multiple Pies in a Chart - Multiple Series
Multiple pie series, each series associates with a pie (Publishers and Platforms series)
by JoeKuan
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 > 25) {
lines.push(line);
line = '';
}
line += word + ' ';
});
lines.push(line);
return lines.join('<br/>');
}
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
defaultSeriesType: 'pie',
borderWidth: 1
},
title: {
text: 'Number of Games Sold in 2011',
},
credits: {
position: {
align: 'left',
x: 20
},
text: 'Source: vgchartz'
},
plotOptions: {
pie: {
slicedOffset: 20,
allowPointSelect: true,
dataLabels: {
formatter: function() {
var str = this.point.name + ': ' + Highcharts.numberFormat(this.y, 0);
return formatWithLineBreaks(str);
}
}
}
},
series: [{
center: [ '25%', '50%' ],
data: [ [ 'Nintendo', 54030288 ], [ 'Electronic Arts', 31367739 ],
[ 'Activision', 30230170 ], [ 'Ubisoft', 25318980 ],
[ 'Microsoft', 24372261 ], [ 'Sony Computer Entertainment', 13805937 ],
[ 'Bethesda Softworks', 10813372 ], [ 'Take-Two Interactive', 10012212 ],
[ 'Others', 33910911 ] ]
}, {
center: [ '75%', '50%' ],
dataLabels: {
formatter:...