<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> var colors = ['red','yellow','blue','cyan','green','pink','white','#ddd']; var data = [4,5,5,7,5,8,4,9]; var 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]); } var 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: { strokestyle: '#e8e8e8', variant: 'pie3d', linewidth: 2, shadowOffsetx: 0, shadowOffsety: 7, shadowColor: '#ddd', shadowBlur: 15, radius: 80, colors: colors } }).draw(); </script>