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.
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
RGraph.degrees2Radians() is used to do the necessary conversion
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
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.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: