An adjustable Meter chart that looks like the Google charts Meter

Summary: An adjustable Meter chart customised to look like the Google charts Meter. It's been made to be dynamically adjustable so you can click on the chart to set the value.

[No canvas support]

Here's a customised Meter chart that looks a little bit like the Google Charts meter chart. The orange to yellow graduation here is done by using the colorsRanges property and specifying the individual colors manually.

Update: You can now (December 2019) toggle the colors of the chart between the solid graduations and a real gradient which shows a much smoother transition through the colors.

The normal Meter chart is a semi-circle, starting on the left and going 180 degrees around to the right. Here though the start and end points have been altered by using the anglesStart and anglesEnd properties.

If you use these properties though - remember that they're measured in radians and not degrees. 1 radian = (180 / Pi) degrees. There are some functions that the RGraph common core library provides for you when converting from one to the other:

// Usage: RGraph.toRadians(360) // 6.28
RGraph.toRadians = function (degrees)
{
    return degrees * (Math.PI / 180);
};

// Usage: RGraph.toDegrees(3.14) // 180
RGraph.toDegrees = function (radians)
{
    return radians * (180 / Math.PI);
};

The Meter is set to be dynamically adjustable too using the adjustable property


This goes in the documents header:
<script src="RGraph.common.core.js"></script>
<script src="RGraph.common.dynamic.js"></script>
<script src="RGraph.meter.js"></script>
Put this where you want the chart to show up:
<div style="float: right; width: 500px; text-align: center">
    <canvas id="cvs" width="500" height="250">[No canvas support]</canvas><br />
    <button onclick="toggleGradient()" style="font-size: 20pt">Toggle gradient</button>
</div>
This is the code that generates the chart: