Share RGraph on Facebook Share RGraph on Twitter

A progress-bar Pie/Donut chart

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

All the code is below and it might make sense to it all in a function in a library file so that you can call is 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.text2() (which is a function that makes adding text to the canvas a breeze).

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]
This is the code that generates the chart: