3D Pie chart
This goes in the documents header:
<script src="RGraph.common.core.js"></script>
<script src="RGraph.common.key.js"></script>
<script src="RGraph.pie.js"></script>
Put this where you want the chart to show up:
<div id="container" style="display: inline-block; position: relative">
<canvas id="cvs" width="450" height="300">[No canvas support]</canvas>
<div>
This is the code that generates the chart:
<script>
colors = ['red','yellow','blue','cyan','green','pink','white','#ddd'];
data = [4,5,5,7,5,8,4,9];
labels = ['Mavis','Kevin','Luis','June','Olga','Luis','Pete','Bridget'];
for (var i=0; i<data.length; i++) {
labels[i] = '{1}: {2}%'.format(labels[i], data[i]);
}
key = RGraph.HTML.Key('container',
{
colors: colors,
labels: labels,
tableCss: {
position: 'absolute',
top: '50%',
right: '-70px',
transform: 'translateY(-50%)'
}
});
new RGraph.Pie({
id: 'cvs',
data: data,
options: {
colorsStroke: 'transparent',
variant: 'pie3d',
linewidth: 2,
shadowOffsetx: 0,
shadowOffsety: 7,
shadowColor: '#ddd',
shadowBlur: 15,
radius: 80,
colors: colors
}
}).draw();
</script>