Here we have a donut chart (which is itself a Pie chart with the variant option set to donut) which has had the colors manipulated (to a gradient) in order to give a 3D appearance to the donut. It also has a slight shadow to give it an extra bit of depth. And it uses the roundRobin animation effect along with segment separation (the exploded option).
This goes in the documents header:<script src="RGraph.common.core.js"></script> <script src="RGraph.pie.js"></script>Put this where you want the chart to show up:
<canvas id="cvs" width="475" height="350"> [No canvas support] </canvas>This is the code that generates the chart:
<script> new RGraph.Pie({ id: 'cvs', data: [41,37,16,3,3], options: { colors: [ 'Gradient(#c00:red:#f66:red:#c00)', 'Gradient(#00c:blue:#66f:blue:#00c)', 'Gradient(#0c0:#0f0:#6f6:#0f0:#0c0)', 'Gradient(#c66:pink:pink:pink:#c66)', 'Gradient(gray:#ccc:white:#ccc:gray)' ], variant: 'donut', linewidth: 5, exploded: 5, colorsStroke: 'rgba(0,0,0,0)', align: 'left', shadow: true, shadowOffsetx: 2, shadowOffsety: 2, shadowBlur: 30, centerx: 185 } }).roundRobin(); </script>