An adjustable black Meter gauge
This Meter chart has been significantly customised which is why it
looks very different from the default Meter. The start
and end angles have
been adjusted as well as the radius of the black part in the center
having been increased. Before starting to draw, the
canvas is cleared to black. And the
Meter is adjustable by way of some custom code that utilises the
grow effect. This type of adjusting is custom - the default adjusting
feature in RGraph is not animated.
Whilst this chart shows you an example of using the
angleEnd property you can use
these properties to significantly change the look of the Meter chart and
have one that is sideways oriented and not vertically oriented. It depends on the
interface and aesthetics that you want for how you orient the Meter.
The custom code that facilitates the adjusting just consists of an event
listener added to the
canvas tag, the
getValue function to get
the new value based on the click and then the
grow effect that moves
the pointer to the new position.
<script src="RGraph.common.core.js"></script> <script src="RGraph.meter.js"></script>Put this where you want the chart to show up:
<canvas id="cvs" width="300" height="300" style="background-color: black; border-radius: 15px; box-shadow:3px 3px 3px gray; float: right">[No canvas support]</canvas>This is the code that generates the chart - it should be placed AFTER the