A Line chart with a scrolling background image

[No canvas support]

This goes in the documents header:
<script src="RGraph.common.core.js"></script>
<script src="RGraph.line.js"></script>
Put this where you want the chart to show up:
<div id="container" style="overflow: hidden; position: relative; width: 600px; height: 250px;">
    <canvas id="cvs_chart" width="600" height="250" style="position: absolute; top: 0; left: 0; z-index: 1">[No canvas support]</canvas>
</div>

<style>
    button {
        font-size: 18pt;
        margin: 5px;
        padding: 5px;
    }
</style>

<button onclick="img.src = '../images/line-scrolling-background-image1.jpg'">Background one</button>
<button onclick="img.src = '../images/line-scrolling-background-image2.jpg'">Background two</button>
This is the code that generates the chart:
<script>
    imgX  = 0;     // Initial start position
    delta = -0.5;  // Number of pixels to move by
    delay = 50;    // Milliseconds between frames

    img = new Image();
        img.src            = '../images/line-scrolling-background-image1.jpg';
        img.style.position = 'absolute';
        img.style.top      = '-50px';
        img.style.left     = 0;
        img.style.zIndex   = 0;
        img.style.opacity  = 0.5;
    document.getElementById('container').appendChild(img);



    line = new RGraph.Line({
        id: 'cvs_chart',
        data: [5,4,1,6,8,5,3],
        options: {
            marginLeft: 50,
            marginRight: 50,
            linewidth: 5,
            tickmarksStyle: null,
            backgroundGrid: false,
            shadow: false,
            colors: ['#000'],
            xaxisLabels: ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday']
        }
    }).trace();            

    function drawImage ()
    {
        if (imgX <= 0 - img.width + line.canvas.width || imgX >= 1) {
            delta *= -1;
        }

        img.style.left = imgX + 'px';
        imgX += delta;

        setTimeout(drawImage, delay);
    }
    
    
    setTimeout(drawImage, delay);
</script>