An image based Meter chart with background and needle images

This Meter uses CSS width/height units on the canvas tag to scale the whole Meter down (the image is 640x640 but the canvas is sized by CSS to 400x400).

[No canvas support]

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="640" height="640" style="width: 400px; height: 400px">
    [No canvas support]
This is the code that generates the chart:
    window.onload = function ()
        var meter = new RGraph.Meter({
            id: 'cvs',
            min: 0,
            max: 9,
            value: 8.5,
            options: {
                centerx: 321,
                centery: 298,
                backgroundColor: 'rgba(0,0,0,0)',
                backgroundImageUrl: '/images/meter-image-sd.png',
                backgroundImageStretch: true,
                backgroundImageOffsetx: 0,
                backgroundImageOffsety: 0,
                scaleDecimals: 1,
                needleColor: 'rgba(0,0,0,0)',
                needleImageUrl: '/images/meter-image-sd-needle.png',
                needleImageOffsetx: -94,
                needleImageOffsety: -40,
                colorsRanges: [],
                tickmarksBigNum: 0,
                tickmarksSmallNum: 0,
                border: false,
                labels: false,
                textSize: 36,
                centerpinStroke: 'rgba(0,0,0,0)',
                centerpinFill: 'rgba(0,0,0,0)',
                anglesStart: 2.69,
                anglesEnd: 7.38
        //meter.canvas.onclick = function (e)
        //    var value = meter.getValue(e);
        //    if (typeof value === 'number') {
        //        meter.value = value;
        //        meter.grow();
        //    }

Share on Facebook Share on Twitter