A gray Pie chart
This goes in the documents header:
<script src="RGraph.common.core.js"></script>
<script src="RGraph.common.dynamic.js"></script>
<script src="RGraph.common.tooltips.js"></script>
<script src="RGraph.pie.js"></script>
Put this where you want the chart to show up:
<canvas id="cvs" width="550" height="300">
[No canvas support]
</canvas>
This is the code that generates the chart:
<script>
data = [41.2,18.2,17.2,14.2,5,4.2];
labels = ['Symbian','Blackberry','Android','iOS','Windows','Others'];
tooltips = [];
labels.forEach(function (v, k, arr)
{
tooltips[k] = '{1}
Market share: {2}%'.format(
labels[k],
data[k]
);
labels[k] = labels[k] + ' ' + data[k] + '%';
});
new RGraph.Pie({
id: 'cvs',
data: data,
options: {
marginTop: 50,
tooltips: tooltips,
labels: labels,
labelsBold: true,
labelsSticksLength: 45,
labelsColors: ['black'],
textFont: '"Lucida Grande", "Lucida Sans Unicode", Arial',
textSize: 10,
textColor: 'black',
shadow: false,
colors: ['#F0F0F0','#08306B','#D9D9D9','#BDBDBD','#969696','#D9D9D9'],
colorsStroke: 'rgba(0,0,0,0)',
tooltipsEvent: 'mousemove',
highlightStyle: 'outline',
title: 'Smartphone share in Q2 2010',
titleY: -25,
titleSize: 18
}
}).roundRobin();
// Align the tooltip text to the left
RGraph.tooltips.style.textAlign = 'left';
</script>