An SVG Pie chart configured to look like a Meter
Summary: A set of concentric SVG Pie charts that have been configured to look like a Meter that could represent your figures.
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.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.
<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: