A Line chart with a scrolling background image

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'">Background1</button>
<button onclick="img.src = '../images/line-scrolling-background-image2.jpg'">Background2</button>

This is the code that generates the chart:

<script>
    imgX  = 0;   // Initial start position
    delta = -0.5;  // Amount of pixels to move by
    delay = 500; // Milliseconds in-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   = -1;
        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: {
            gutterLeft: 50,
            gutterRight: 50,
            linewidth: 5,
            tickmarks: null,
            backgroundGrid: false,
            shadow: false,
            colors: ['#000'],
            labels: ['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>

« Back