A progress-bar Pie/Donut chart
Summary: A progress bar Pie/Donut chart. It takes a fair amount of configuration but all the code to do it is shown below.
Here's an interesting variation on a Pie chart/Progress bar. It's one way to show multiple progress values that might make more sense when they're circular.
All the code is below and it might make sense to put it all in a function in a library file so that you can call it multiple times as necessary.
As well as the Pie chart the code also uses the Rose chart in order to draw the background grid - not something that the Pie chart has or does.
Basically after the Rose chart has drawn the grid the Pie charts are then drawn on
top of it and a custom label is drawn by using the API function
RGraph.text() (which is a function that makes adding text to the canvas a
If you wanted to add animation then the
roundrobin() effect looks nice
though because there's 12 Pie charts in total and they'll all be animating at once
you might find that a CSS based effect is smoother.
This goes in the documents header:
<script src="RGraph.common.core.js"></script> <script src="RGraph.rose.js"></script>Put this where you want the chart to show up:
<canvas id="cvs" width="600" height="600"> [No canvas support] </canvas>This is the code that generates the chart: