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. But you could also use a horizontal gradient to get a
smooth transition instead.
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
<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:
<canvas id="cvs" width="600" height="250" style="border-radius: 15px"> [No canvas support] </canvas>This is the code that generates the chart: