# An Odometer chart using a background image

This goes in the documents header:

    <script src="RGraph.common.core.js"></script>
    <script src="RGraph.drawing.image.js"></script>
    <script src="RGraph.bar.js"></script>

Put this where you want the chart to show up:

    <canvas id="cvs" width="300" height="300">
        [No canvas support]
    </canvas>

This is the code that generates the chart:

    <script>
        window.onload = function ()
        {
            var img = new RGraph.Drawing.Image({
                id: 'cvs',
                x: -4,
                y: 0,
                src: '../images/odometer-background.png'
            }).draw()

            var odo = new RGraph.Odometer({
                id: 'cvs',
                min: 0,
                max: 360,
                value: 56,
                options: {
                    greenColor: 'rgba(0,0,0,0)',
                    yellowColor: 'rgba(0,0,0,0)',
                    redColor: 'rgba(0,0,0,0)',
                    backgroundColor: 'rgba(0,0,0,0)',
                    backgroundBorder: 'rgba(0,0,0,0)',
                    backgroundLinesColor: 'rgba(0,0,0,0)',
                    tickmarks: false,
                    tickmarksBigColor: 'rgba(0,0,0,0)',
                    textColor: 'rgba(0,0,0,0)',
                    needleColor: '#ddd',
                    needleTail: false,
                    needleHead: false,
                    needleThickness: 5
                }
            }).draw();
        };
    </script>

« Back