How to use AJAX to update charts on your webpage
Summary: A guide for using AJAX to update your charts. AJAX updating can be quicker than refreshing the entire page and can utilise less bandwidth
To update your charts using AJAX requires you to understand that the page you're requesting via AJAX doesn't generate the chart. It only returns the data. Another HTML page (eg the one you're currently reading) takes that data and uses it to generate the chart. The sequence of events is:
- The requested HTML page loads in the browser.
- That page then makes an AJAX request to get new data
- The AJAX request returns the data as text
- The original page then parses that text into a usable format (ie an array) and produces the chart
-
Instead of the points 3 and 4 - you can use the new (April 2013)
AJAX functions such as
RGraph.AJAX.getCSV()
orRGraph.AJAX.getJSON()
. These return you appropriate data-types (such as an array or a JavaScript object) and not just strings
The AJAX functions
The RGraph AJAX functions that can be used to make the requests are part of the RGraph common library and you can use them like this. To help prevent giving strings to RGraph when you should be giving numbers or arrays, the new helper functions that change the response into the correct format are:
<script> // This example callback function simply prints the result of the AJAX call. function myCallback (result) { $p(result); } RGraph.AJAX({url: url, callback: myCallback}); RGraph.AJAX.getString({url: url, callback: myCallback}); RGraph.AJAX.getNumber({url: url, callback: myCallback}); RGraph.AJAX.getCSV({url: url, callback: myCallback}); RGraph.AJAX.getJSON({url: url, callback: myCallback}); // The RGraph.AJAX.post() function allows you to make POST requests to your server - sending data along with it. The // data argument should be an object with key/value pairs eg. {'name': 'Richard Hargreaves','age': 22} // The data is encoded for you using encodeURIComponent() RGraph.AJAX.post({url: url, data: data, callback: callback}); </script>
The server-side script
For this example the server side script is just a basic PHP script which generates a sequence of 10 random numbers.
<?php $data = array(); for ($i=0; $i<10; ++$i) { $data[] = mt_rand(0, 99); } echo implode(',', $data); ?>This will output a string of numbers like this:
5,45,23,56,86,48,45,48,31,21Remember that because it's being requested as an AJAX request it doesn't need to contain any HTML. The
RGraph.AJAX.getCSV()
function will take the CSV data and split it up into a usable array of
numbers. Keep in mind that it doesn't need
to be XML that you return. As shown here it can just be a comma separated
sequence of numbers. Indeed if it is XML it makes parsing
the result more complex.
The window.onload function
To initiate the creation of the chart the window.onload
function makes an AJAX call to the server side PHP script to get the
data (which is random in this case, but it could equally be something
significant to you).
<script> window.onload = function (e) { RGraph.AJAX.getCSV({url: '/getdata.html', callback: myCallback}); } </script>
The AJAX callback function
This is the function which is called when data is returned by the AJAX call.
Because the getCSV()
function was used the
function is passed an array consisting of the CSV data (which is numbers).
You can see this if you were to use the $p()
function (p for print) inside the callback.
<script> // This is the AJAX callback function. When the AJAX function receives the // data it calls this function. It then creates the chart. function myCallback (data) { // Start by resetting the canvas. Note that this also resets the anti-aliasing fix - but as the chart is being // recreated entirely each call - this is OK. RGraph.reset(document.getElementById('cvs')); // Create the chart var myChart = new RGraph.Line({ id: 'cvs', data: data, options: { yaxisScaleMax: 10, marginInner: 10, linewidth: 2, tickmarksStyle: 'endcircle', xaxisLabels: ['Hoolio','Richard','Jack','Kenny','Ivan','Pete','Rodrigo','Luis','Fred','John'], textSize: 14 } }).draw(); } </script>
Timed AJAX calls
If you wanted a continually updating chart similar to the one shown above,
you could put in a
setTimeout()
call that refreshes the data every 2 seconds.
window.onload = function (e)
{
RGraph.AJAX.getCSV({url: '/getdata.html', callback: myCallback});
setTimeout(window.onload, 2000); // 2000 milliseconds = 2 seconds
}
Remember: Don't forget to clear or reset the canvas before you draw on it again.
Making AJAX POST requests
There is now (May 2013) an RGraph.AJAX.post() function that allows you to make
POST
requests. This function allows you send data
along with the request which will be available to server-side scripts as any
other post data is. In PHP this means
you'll find it in the $_POST
variable. The data is
encoded for you so you don't need to worry about this.
You can also use jQuery to make AJAX POST requests (or any AJAX requests).