Another dynamically updating Line chart

[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:
<canvas id="cvs" width="600" height="250">
    [No canvas support]
</canvas>
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;
    
    // The number of points shown on the chart
    var points = 1200;
    
    // Make a data 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 increment/decrement 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 obj = new RGraph.Line({
        id: 'cvs',
        data: data,
        options: {
            marginLeft: 35,
            yaxisScaleMax: max,
            tickmarksStyle: null,
            linewidth: 1,
            shadow: null,
            backgroundGridVlines: false,
            backgroundGridBorder: false,
            backgroundGridColor: '#eee',
            color: 'black',
            xaxisTickmarksCount: 5,
            axesColor: '#666',
            textColor: '#666',
            textSize: 14,
            colors: ['red'],
            xaxisLabels: labels,
            xaxis: false
        }
    }).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 rear of the Line chart internal data
    *    variable
    * 3. Adds a new piece of data 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() ). This function is a compatibility wrapper around
        // requestAnimationFrame(). 
        RG.Effects.updateCanvas(draw);
    }

    draw();
</script>