A basic example of a chart created using dynamic updates and AJAX

This is a basic example of dynamic updates using AJAX to request the data from the server. There are more examples here:

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>    
    
    // Prefill the data array
    for (i=0,data=[];i<60; ++i) data[i] = null;

    /**
    * Ths window.onload function initiates the AJAX request. The AJAX page is: http://www.rgraph.net/getdata.html
    * If you view this in your browser you'll see that all it does is output a sequence of numbers.
    */
    window.onload = function ()
    {
        var line = new RGraph.Line({
            id: 'cvs',
            data: data,
            options: {
                labels: ['60s','55s','50s','45s','40s','35s','30s','25s','20s','15s','10s','5s','0s'],
                numxticks: 12,
                backgroundGridAutofitNumvlines: 12,
                ymax: 100,
                gutterLeft: 35,
                textAccessible: true
            }
        }).draw();


        /**
        * This is the AJAX callback function. It adds the number retrieved via
        * AJAX to the data array
        */
        function draw ()
        {
            // Set the data on the object
            line.original_data[0].push(RGraph.random(0, 100));
            line.original_data[0].shift();

            // Clear the canvas
            RGraph.clear(line.canvas);
            line.draw();

            setTimeout(draw, 1000);
        }
    
    
        
        setTimeout(draw, 1000);
    };
</script>