The AJAX functions

Written by Richard Heyes, RGraph author, on 24th July 2018

• Introduction
• What AJAX functions are available?
• Example code
• 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 (for example, to facilitate periodic updates).

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.

An example use-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?

The canvas AJAX functions that are available are documented on the canvas AJAX documentation page and the SVG AJAX functions are documented on the SVG AJAX documentation page . They're very similar in their working though.

Example code

The following URL is used by several of the demos to produce charts

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

And the code to make a chart 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 AJAX functions. There's a set for both the canvas and SVG chart types.

• The canvas AJAX functions
• The SVG AJAX functions