A progress-bar Pie/Donut chart

Summary: A progress bar Pie/Donut chart. Formerly this necessitated a significant amount of custom coding, however now it has been converted into a custom class so the code has been greatly reduced.

[No canvas support]

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. Previously (before version 5.23) this chart required custom coding to achieve it using the background grid from a Rose chart and the rings from a Pie chart. However now it has been converted into a custom object so it can be created using code that's a lot simpler. It's still necessary to include both the Rose and Pie chart libraries.

You can see the code that creates the chart below and how easy it is to implement.

As mentioned above, the chart 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 breeze).

If you want to add animation then the grow() effect looks nice though because there's multiple Pie charts on the canvas and they'll all be animating at the same time you might find that a CSS based effect is smoother if you have many rings/values.


This goes in the documents header:
<script src="RGraph.common.core.js"></script>
<script src="RGraph.common.dynamic.js"></script>
<script src="RGraph.common.tooltips.js"></script>
<script src="RGraph.rose.js"></script>
<script src="RGraph.pie.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: