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