A dynamically updating Line chart showing values for the last 10 minutes (1 per second)

Note Because Chrome slows down timers when it's in the background - this chart can occasionally miss out X values when the browser is in the background or is minimised. So for that reason - if you're running this, or another timer based updating chart, then you're advised to use a browser other than Chrome (or if in Chrome keep it in the foregound).

[No canvas support]
Current seconds:
0

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="800" height="250">
    [No canvas support]
</canvas>
This is the code that generates the chart:
<script>
    function format (value)
    {
        value = String(value);

        if (value.length === 1) {
            value = '0' + value;
        }
        
        return value;
    }

    lastnumber  = 50;
    chart       = null;
    data        = [];
    labels      = [];

    // Make the array of empty values
    for (var i=0; i<600; i+=1) {
        data[i] = [];
        labels[i] = '';
    }

    // Make and draw the chart
    var line = new RGraph.Line({
        id: 'cvs',
        data: [],
        options: {
            yaxisScaleMax: 100,
            backgroundGridVlinesCount: 10,
            backgroundGridVlines: false,
            backgroundGridBorder: false,
            xaxisTickmarksCount: 10,
            tickmarksStyle: null,
            xaxisLabels: labels,
            axes: false,
            textSize: 16,
            marginLeft: 50,
            textColor: '#aaa'
        }
    }).draw();


    // The draw() function gets called repeatedly every second
    function draw()
    {
        var d = new Date();
        var seconds = d.getSeconds();


        // Reset the canvas
        RGraph.reset(document.getElementById('cvs'));


    
        // Add the label
        if (parseInt(seconds) < 0.1) {
            labels.unshift(format(d.getHours()  ) + ':' + format(d.getMinutes()));
            labels.pop();
        } else {
            $cl(seconds);
            labels.unshift('');
            labels.pop();
        }

        // Add a new value to the chart data
        var random  = RGraph.random(-5,5);
    
        // Create the random value
        lastnumber = lastnumber + random;
        lastnumber = Math.max(0, lastnumber);
        lastnumber = Math.min(100, lastnumber);
        data[0] = lastnumber
        data.unshift(null);
        data.pop();
        line.original_data[0] = data;
        
        line.draw();

        // Update the counter
        document.getElementById('numvalues').innerHTML = d.getSeconds();
    
        // Call this function again in one seconds time
        // 
        // TODO Could change things so that the function runs 4 times a second (though only updates the chart once per second)
        //      Might be a little more accurate. It would be a significant change though
        setTimeout(draw, 1000);
    }
    
    draw();
</script>