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