This is a basic example of using AJAX to request the data from the server to fetch a number. The window.onload function initiates the AJAX request and then the callback function - drawGraph() - takes the response and creates the chart.
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> <button onclick="window.onload()">Refresh data</button>This is the code that generates the chart:
<script>
/**
* 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 ()
{
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: {
`textAccessible: true,
margin: 10,
gutterRight: 35
}
})
} else {
progress.value = num;
}
progress.grow();
}
</script>