Spotlight on the AJAX functions
Summary: This is a continuation of a spotlight series that highlights the various methods of getting data into RGraph. This time it's the turn of the AJAX functions. The AJAX functions in RGraph make it easy to get data from server based sources, for example web services.
- Introduction
- What AJAX functions are available?
- The example code from the chart above
- Further reading
Introduction
Since 2005 AJAX has been a popular choice for web developers. It can be used to good effect to get data from your server - be it initially when the page has just loaded or after the page has loaded (eg to facilitate periodic updates).
An example of using it in the first use case - as the page loads is shown below.
You might want to do this to make it easier to integrate with legacy or pre-existing server-based scripting. Or it could be an easier way to handle migration if that's what you're doing.
The second case would be when you have a chart - perhaps a Line chart that you want to update with new data.
What you could do is simply refresh the page. This however might have other consequences that you'd rather not have to deal with.
Also if your page is weighty then bandwidth or page load speed might be a concern that you'd prefer not to have.
What AJAX functions are available?
There are a few functions that are available, with both canvas and SVG having their own set that is available to you.
The canvas AJAX functions
With canvas charts the functions are located in the
RGraph.common.core.js
file and since this file is necessarily
included you don't have to include anything extra to what you normally
include in your page.
The functions that are available to you are:
RGraph.AJAX(url, callback)
ORRGraph.AJAX({url: url, callback: callback})
RGraph.AJAX.post(url, data, callback)
ORRGraph.AJAX.post({url: url, data: data, callback: callback})
RGraph.AJAX.getNumber(url, callback)
ORRGraph.AJAX.getNumber({url: url, callback: callback})
RGraph.AJAX.getString(url, callback)
ORRGraph.AJAX.getString({url: url, callback: callback})
RGraph.AJAX.getJSON(url, callback)
ORRGraph.AJAX.getJSON({url: url, callback: callback})
RGraph.AJAX.getCSV(url, callback)
ORRGraph.AJAX.getCSV({url: url, callback: callback})
In each of these functions the url
parameter is the URL
that you
wish to call and the callback
parameter is a function
which is
called when the AJAX call completes. It's passed the output of the
request as an argument.
The extra data
argument to the RGraph.AJAX.post()
function is an
object that should consist of the POST data that you want to send to
the server (in the form of key/value pairs).
The SVG AJAX functions
The SVG AJAX functions on the other hand are located in their own file
in order to try and keep the file sizes down. The necessary file is
called RGraph.svg.common.ajax.js
.
The functions that are available to you are:
RGraph.SVG.AJAX(url, callback)
RGraph.SVG.AJAX.post(url, data, callback)
RGraph.SVG.AJAX.getNumber(url, callback)
RGraph.SVG.AJAX.getString(url, callback)
RGraph.SVG.AJAX.getJSON(url, callback)
RGraph.SVG.AJAX.getCSV(url, callback)
Like the canvas AJAX functions, in each of these functions the
url
parameter is the URL that you
wish to call and the callback
parameter is a function that is
called when the AJAX call completes. It's passed the output of the
request as an argument.
Like the canvas POST function, the extra data
argument to the
RGraph.SVG.AJAX.post()
function is an
object that should consist of the POST data that you want to send to
the server (in the form of key/value pairs).
The example code from the chart above
The chart above is created by initiating an AJAX request to the following URL:
And the code to make it is as follows - making use of the getString()
function. Remember that when using this function you'll probably need to
convert any numbers from strings (which is what they are initially) to
numbers.
<script>
// This initiates the AJAX call to fetch the sample.csv file and runs
// the function when it has completed.
RGraph.SVG.AJAX.getString('/sample.csv', function (data)
{
// Convert the data from the file into a usable format. Notice that
// the last bit (the forEach()
loop) converts all of the numbers from strings
// into real numbers. It's important to do this.
data = data.split(/\r?\n/);
data = data[0].split(/,/).slice(1);
data.forEach(function (v, k, arr)
{
arr[k] = parseInt(v);
});
// Create and display the chart
new RGraph.SVG.Line({
id: 'cc',
data: data,
options: {
title: 'A chart demonstrating the AJAX functions',
titleY: '-10',
xaxisLabels: ['Mon','Tue','Wed','Thu','Fri','Sat','Sun'],
yaxis: false,
backgroundGridVlines: false,
backgroundGridBorder: false,
textSize: 20,
marginTop: 50,
linewidth: 5
}
}).draw();
});
</script>
Further reading
Read the documentation for the SVG and canvas AJAX functions. There's a set for both the canvas and SVG chart types.