<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="450" height="450"> [No canvas support] </canvas>This is the code that generates the chart:
<script> var rings = [ {color: '#2B908F', value: 67, width: 50, radius: 200}, {color: '#90EE7E', value: 57, width: 50, radius: 147}, {color: '#F45B5B', value: 46, width: 50, radius: 94} ]; for (var i=0; i<rings.length; ++i) { new RGraph.Pie({ id: 'cvs', data: [1], options: { variant: 'donut', colors: [rings[i].color], strokestyle: 'rgba(0,0,0,0)', shadow: false, radius: rings[i].radius, variantDonutWidth: rings[i].width, key: ['John','Freddy','Lucy'], keyPosition: 'gutter', keyTextColor: 'white', keyColors: ['#2B908F','#90EE7E','#F45B5B'] } }).draw(); new RGraph.Pie({ id: 'cvs', data: [1], options: { variant: 'donut', colors: ['rgba(0,0,0,0.25)'], strokestyle: 'rgba(0,0,0,0)', shadow: false, radius: rings[i].radius, variantDonutWidth: rings[i].width } }).draw(); new RGraph.Pie({ id: 'cvs', data: [rings[i].value,100 - rings[i].value], options: { variant: 'donut', colors: [rings[i].color,'rgba(0,0,0,0)'], strokestyle: 'rgba(0,0,0,0)', shadow: false, radius: rings[i].radius, variantDonutWidth: rings[i].width } }).roundRobin(); } </script>