# A customised Meter chart

[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 endpoints 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
{
return degrees * (Math.PI / 180);
};

// Usage: RGraph.toDegrees(3.14) // 180
{
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; text-align: center">
<canvas id="cvs" width="500" height="250">[No canvas support]</canvas><br />
</div>
```
This is the code that generates the chart - it should be placed AFTER the `canvas` tag(s):
```<script>
defaultColors = [
[0,10,'#f20'],
[10,20,'#f30'],
[20,30,'#f50'],
[30,40,'#f60'],
[40,50,'#f80'],
[50,60,'#fa0'],
[60,70,'#fc0'],
[70,80,'#fd0'],
[80,90,'#ff0'],
[90,100,'#ff0'],
];

// Create the Meter chart specifying the min/max/value
meter = new RGraph.Meter({
id: 'cvs',
min: 0,
max: 100,
value: 75,
options: {

marginLeft: 15,
marginRight: 15,
marginTop: 15,
marginBottom: 15,

// Hide the centerpin by setting its colors to transparent
centerpinStroke: 'rgba(0,0,0,0)',
centerpinFill: 'rgba(0,0,0,0)',

// These are the colors for the segments on the main chart
colorsRanges: defaultColors,

// Turn off labels
labelsCount: 0,

// By setting the start and end angles of the Meter you can change
// the extent of the Meter chart from the default semi-circle
anglesStart: RGraph.PI + 0.5,
anglesEnd: RGraph.TWOPI - 0.5,

linewidthSegments: 0,
textSize: 16,
border: 0,
tickmarksSmallCount: 0,
tickmarksLargeCount: 0,

// This option means that the chart will be dynamically adjustable.
// You could then use the adjust* events to do something with the
// new value of the chart.
responsive: [
{maxWidth:null,parentCss: {'float':'right'}},
{maxWidth:700,parentCss: {'float':'none'}}
]
}
}).draw();

//
// This function facilitates changing the colors to a
//
{
// The meter.isGradient variable doesn't have any special RGraph meaning - it's
// just a regular JavaScript variable that we're setting here that allows us to
// track what style of color the chart is using.