<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>