A segmented Donut chart

Summary: A segmented (done by using the draw event) Donut chart that uses the roundRobin() effect, and which could act as a very effective meter.

[No canvas support]

This is an example of using the Pie chart that's customised to such a degree that it appears as more like a progress meter or a "percent complete" style meter.

The segmentation effect is achieved by using the draw event. This event is used by code that draws lines from outside the Donut chart back to the center, drawing them every 10-15 degrees. In this custom code the RGraph API function RGraph.degrees2Radians() is used to do the necessary conversion and the RGraph.path2() function is used to handle the pathing of these lines.

The text in the center of the Donut chart is added by using the RGraph drawing API - the Text object. On each frame of the roundRobin() effect the object is updated with the new percentage and it then gets redrawn. This gives you an effect of the text constantly changing.

The chart is quite small and fits well on smaller devices so it doesn't need a lot changing with the responsive() function. The only thing that's done is the CSS float of the canvas tag is removed.

This goes in the documents header:

<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="350" height="350">
    [No canvas support]
</canvas>

This is the code that generates the chart: