A segmented Donut chart

Summary: A segmented (done by using the dedicated class in the Pie chart library) 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 was formerly achieved by a non-insignificant amount of custom code. Now though, it's created by using the RGraph.SegmentedMeter custom class that's a part of the Pie chart library file.

This library handles all of the drawing for you and you can either use the draw() method to simply draw the meter or to get an animation you can also use the roundRobin() effect.

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.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: