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]
</canvas>
This is the code that generates the chart:
<script>
    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',// DO NOT ADD / AT THE START OF THE PATH
            backgroundImageStretch: true,
            backgroundImageOffsetx: 0,
            backgroundImageOffsety: 0,
            scaleDecimals: 1,
            needleColor: 'rgba(0,0,0,0)',
            needleImageUrl: '../images/meter-image-sd-needle.png', // DO NOT ADD / AT THE START OF THE PATH
            needleImageOffsetx: -94,
            needleImageOffsety: -40,
            colorsRanges: [],
            tickmarksLargeCount: 0,
            tickmarksSmallCount: 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
        }
    }).draw();
        
        //meter.canvas.onclick = function (e)
        //{
        //    var value = meter.getValue(e);
        //
        //    if (typeof value === 'number') {
        //        meter.value = value;
        //        meter.grow();
        //    }
        //}
    };
</script>