This chart uses two canvas tags - one for the background and axes and another for the scrolling Line. This saves on the cost of drawing each frame - but by how much and whether it's noticeable is dependent on many factors.
<script src="RGraph.common.core.js"></script> <script src="RGraph.line.js"></script>Put this where you want the chart to show up:
<div style="position: relative; width: 600px; height: 250px"> <canvas id="cvs1" width="600" height="250" style="position: absolute; top: 0; left: 0" data-l="false">[No canvas support]</canvas> <canvas id="cvs2" width="600" height="250" style="position: absolute; top: 0; left: 0" data-l="false">[No canvas support]</canvas> </div>This is the code that generates the chart:
<script> // Define the variables that we're going to use // Refresh rate (in milliseconds - 1000 per second) // // *** This is not actually used on this page because *** // *** setTimeout() is not used - requestAnimationFrame() *** // *** is used instead which handles the timing for you *** var delay = 40; // Number of points that are shown on the chart var points = 1200; // Make an array of null values for (var i=0,data=[]; i<points; ++i) { data[i] = null; } // A shortcut reference to the global RGraph object var RG = RGraph; // A shortcut reference to the global Math object var ma = Math; // Maximum Y value on the chart var max = 100; // minimum Y value on the chart var min = 0; // Halfway between the minimum and maximum var num = (( (max - min) / 2) + min); // Generate the labels that are spread across the X axis. var labels = ['20s', '18s','16s','14s','12s','10s','8s','6s','4s','2s','0s']; // The increase/decrease of each iteration var delta = 2; /** * Draw the chart. On subsequent draws this chart is updated with new data and * redrawn. This is faster than creating a whole new object and drawing that. */ var objbg = new RGraph.Line({ id: 'cvs1', data: [], options: { yaxisScaleMax: max, tickmarksStyle: null, marginLeft: 35, linewidth: 1, shadow: null, backgroundGridVlines: false, backgroundGridBorder: false, backgroundGridColor: '#eee', xaxisTickmarksCount: 5, axesColor: '#666', textColor: '#666', colors: ['red'], axes: false, xaxis: false, yaxisLabels: false } }).draw(); /** * Draw the chart. On subsequent draws this chart is updated with new data and * redrawn. This is faster than creating a whole new object and drawing that. */ var obj = new RGraph.Line({ id: 'cvs2', data: data, options: { yaxisScaleMax: max, marginLeft: 35, tickmarksStyle: null, linewidth: 1, backgroundGrid: false, colors: ['red'], axes: false, xaxis: false, yaxis: false, xaxisLabels: labels, shadow: true, shadowOffsetx:2, shadowOffsety:2, shadowColor: '#666' } }).draw(); /** * This is the main draw() function that is called multiple times per * second to update the chart with new data. It: * * 1. Clears the canvas so that it's ready to be drawn on again * 2. Removes a piece of data from the front of the Line chart internal data * variable * 3. Adds a new piece of data on to the end of the same array * 4. Draws the chart again */ function draw() { // Clear (NOT reset) the canvas RG.clear(obj.canvas); // Generate a random number between -5 and 5 and add it to the num // variable. Adding a small change instead of generating a whole new // number results in a gentler change. num += RG.random(-1 * delta, delta); // Limit the num variable to the minimum - maximum num = ma.max(min, num); num = ma.min(max, num); // Remove a number from the front of the data array obj.original_data[0].shift(); // Add the new number on to the end of the data array obj.original_data[0].push(num); // Draw the chart obj.draw(); // Call this function again after the delay (using requestAnimationFrame() // NOT setTimeout() ). The updateCanvas() function is a compatibility wrapper around // requestAnimationFrame() RG.Effects.updateCanvas(draw); } draw(); </script>