An SVG Pie chart configured to look like a Meter

There's a dedicated canvas chart type that looks similar to this called the Activity meter. It can also be further configured to look even more like this. And because it's a dedicated chart type, to do so requires a lot less code. You can see demos in the download archive (which have the prefix activity- and svg-activity-).

Here's a set of Pie objects that have been configured so that they appear as circular progress meters.

This is done by adding one Pie object that has the real color and is configured with the real value on top of another which is used as the background and has a single value of 100 so it's a full Pie segment.

The labels are added by utilising the RGraph.SVG.text() API function. You can use this function to add your own text labels to your visualisations. To position the text the pie.centerx and pie.centery API variables are used.

One more thing that's used is the RGraph.SVG.GLOBALS variable. All objects get any values that are set on this object first before their own properties. This means that you can set common values as defaults and all subsequently created objects will use them.

This goes in the documents header:

<script src="RGraph.svg.common.core.js"></script>
<script src="RGraph.svg.pie.js"></script>

Put this where you want the chart to show up:

<div style="width: 350px; height: 350px; background-color: black; float: right; border-radius: 5px" id="chart-container"></div>

This is the code that generates the chart: