An adjustable black Meter chart
Summary: A black Meter chart which has some custom code that has been added to make it adjustable, but using animation instead of the built-in adjusting feature.
This Meter chart has been significantly customised which is why it
looks very different to 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 drawing the canvas is cleared to a black color. 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.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="500" style="background-color: black; border-radius: 15px; box-shadow:3px 3px 3px gray"> [No canvas support] </canvas>This is the code that generates the chart: