« Previous       Home page demos       Next »

An adjustable (black) Meter chart

[No canvas support]

This Meter chart has been aignificantly 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 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 pf RGraph is not animated.

Whilst this chart shows you an example of using the angleStart and angleEnd property you can use those 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 on how you orient the Meter.

The custom code that facilitates the ajusting just consists of an event listener added to the canvas tag, the getValue() function to get the new value based on the click andthen the grow() effect that moves the pointer to the new position.

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:
<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:
<script>
    meter = new RGraph.Meter({
        id: 'cvs',
        min: 0,
        max: 100,
        value: 75,
        options: {
            colorsBackground: 'black',
            anglesStart: RGraph.PI - 0.55,
            anglesEnd: RGraph.TWOPI + 0.5,
            centery: 300,
            textSize: 22,
            textColor: 'white',
            textValign: 'bottom',
            colorsGreenColor: '#0a0',
            segmentsRadiusStart: 175,
            border: 0,
            tickmarksSmallCount: 0,
            tickmarksLargeCount: 0,
            needleRadius: 250,
            needleColor: '#ddd',
            centerpinStroke: 'black',
            centerpinFill: '#ddd'
        }
    }).draw()

    meter.canvas.onclick = function (e)
    {
        var newvalue = meter.getValue(e);
        
        meter.value = newvalue;
        meter.grow();
    }
</script>