# A Meter-esque SVG Pie chart

There's a dedicated 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 `svg-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="float: right">
        <div style="width: 350px; height: 350px; background-color: black; border-radius: 5px" id="chart-container"></div>
    </div>

This is the code that generates the chart - it should be placed AFTER the `div` tag: