Spotlight on the AJAX functions

Written by Richard, on 24th July 2018

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 canvas AJAX functions
  • The SVG AJAX functions
• 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) OR RGraph.AJAX({url: url, callback: callback})
• RGraph.AJAX.post(url, data, callback) OR RGraph.AJAX.post({url: url, data: data, callback: callback})
• RGraph.AJAX.getNumber(url, callback) OR RGraph.AJAX.getNumber({url: url, callback: callback})
• RGraph.AJAX.getString(url, callback) OR RGraph.AJAX.getString({url: url, callback: callback})
• RGraph.AJAX.getJSON(url, callback) OR RGraph.AJAX.getJSON({url: url, callback: callback})
• RGraph.AJAX.getCSV(url, callback) OR RGraph.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:

• http://www.rgraph.net/sample.csv

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.

• The canvas AJAX functions
• The SVG AJAX functions