A customised Meter chart
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 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; 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 - 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, colorsStroke: 'white', segmentsRadiusStart: 150, needleRadius: 210, 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. adjustable: true, responsive: [ {maxWidth:null,parentCss: {'float':'right'}}, {maxWidth:700,parentCss: {'float':'none'}} ] } }).draw(); // // This function facilitates changing the colors to a // smooth gradient and vice-versa // function toggleGradient () { // 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. if (!meter.isGradient) { meter.set('colorsRanges', [[0,100,'Gradient({colors:["red","yellow"],x1:50,y1:0,x2:350,y2:0})']]); } else { meter.set('colorsRanges', defaultColors); } meter.isGradient = !meter.isGradient; // Reset this flag so that the colors are parsed again; meter.colorsParsed = false; RGraph.redraw() } </script>