Another dynamically updating Line chart (using two canvas tags)

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.

[No canvas support] [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 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,
            shadow: null,
            backgroundGrid: false,
            colors: ['red'],
            axes: false,
            xaxis: false,
            yaxis: false,
            xaxisLabels: labels
        }
    }).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>