A basic example of AJAX (getting a number)

This is a basic example of using AJAX to request the data from the server and fetching a number. It initiates the AJAX request and then the callback function - drawGraph() - takes the response and creates the chart.

[No canvas support]

Note: In October 2013 a new CSV reader was added to RGraph. It makes reading CSV files much easier. You can read about the new CSV reader here.

This goes in the documents header:
<script src="RGraph.common.core.js"></script>
<script src="RGraph.common.effects.js"></script>
<script src="RGraph.vprogress.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>
    /**
    * Initiate 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.
    */
    RGraph.AJAX.getNumber('/getdata.html', function (num)
    {
        drawGraph(num);
    });



    /**
    * This is the AJAX callback function. It splits up the response, converts it
    * to numbers and then creates the chart.
    */
    function drawGraph (num)
    {
        // The num variable is the output of the AJAX request
        var data = num;

        // Draw the progress bar
        // A global on purpose
        if (typeof progress === 'undefined') {
            progress = new RGraph.VProgress({
                id: 'cvs',
                min: 0,
                max: 100,
                value: num,
                options: {
                    margin: 10,
                    marginRight: 35
                }
            })
            
        } else {
        
            progress.value = num;
        }

        progress.grow();
    }
</script>