A radial progress-bar chart
Summary: A progress bar Activity meter. Formerly this necessitated a significant amount of custom coding, however now it has been converted into a stand-alone chart type so the code has been greatly reduced.
Formerly this interesting style of chart was a variant of the Pie chart that was created by using a custom class that resided in the Pie chart library. It also made use of the Rose chart in order to draw a circular background grid.
Now however it has been promoted to a full chart type - the Activity meter - so the code necessary is much smaller. By default the Activity meter class creates a much different looking chart but with some configuration you can achieve the style as it's shown here.
You can see the code that creates the chart below and how easy it is to implement.
You can use this style of chart in order to show one or more values that make more sense when they're arranged in a circle than in a horizontal or vertical arrangement.
If you want to add animation then the
grow() effect looks nice.
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.activity.js"></script>Put this where you want the chart to show up:
<canvas id="cvs" width="400" height="400"> [No canvas support] </canvas>This is the code that generates the chart: