A nested Donut chart progress bar
Summary: A Donut chart that's configured to look like an activity Meter. There's a non-insignificant amount of code but none of it is difficult to understand.
This is an example of how you can use the RGraph charts to create your own
visualisations of your own design. This is actually the Pie chart using the
variant option (set to
donut) to create a set of
three nested progress bars. There's a
key in order to help identification of the three "progress bars". The initial
The donuts are actually drawn twice - once in order to get the darkened background to the Donut rings and then again to draw the full color rings.
Lastly the API
functions are used again to add circles at each end of the donut rings
that are using the same color as the ring itself. This gives the appearance
that the donut ring has a rounded end.
Each of the full color donut rings is animated using the
<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="450" height="450"> [No canvas support] </canvas>This is the code that generates the chart: