<script src="RGraph.common.core.js"></script> <script src="RGraph.drawing.text.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> centerx = 170; pie1 = new RGraph.Pie({ id: 'cvs', data: [1,1,1,1,1,1], options: { colors: ['#0096A0','#0096A0','#FDA72A','#FDA72A','#0096A0','#0096A0'], variant: 'donut', radius: 125, centerx: centerx, variantDonutWidth: 20, linewidth: 2, exploded: [,25], // Just explode the second segment strokestyle: 'white', shadow: false } }).roundRobin(null, function () { var pie2 = new RGraph.Pie({ id: 'cvs', data: [1,1,1,1,1,1], options: { colors: ['#0096A0','#0096A0','#FDA72A','#FDA72A','#0096A0','#0096A0'], variant: 'donut', radius: 104, centerx: centerx, variantDonutWidth: 20, linewidth: 2, exploded: [,25], // Just explode the second segment strokestyle: 'white', shadow: false } }).roundRobin(null, function () { var pie3 = new RGraph.Pie({ id: 'cvs', data: [1,1,1,1,1,1], options: { colors: ['#0096A0','#0096A0','#FDA72A','#FDA72A','#FDA72A','#0096A0'], variant: 'donut', radius: 83, centerx: centerx, variantDonutWidth: 20, linewidth: 2, exploded: [,25], // Just explode the second segment strokestyle: 'white', shadow: false } }).roundRobin(null, function () { var text = new RGraph.Drawing.Text({ id: 'cvs', x: pie1.centerx, y: pie1.centery, text: '100%', options: { halign: 'center', valign: 'center', size: 30 } }).draw(); }); }); }); </script>