Creating your charts asynchronously

  Read comments...

Summary
Information about creating your charts using asynchronous HTTP calls. The RGraph Async() method is a simple wrapper around setTimeout(). More efficient methods (eg WebWorkers) may now exist however setTimeout() is simple and effective.

Waiting for onload event...

This image is here to pad the page and slow down loading so that the window.onload event is slowed. This makes the difference far more visible.

[No canvas support]

Asynchronous processing can speed up the display of your charts, because the browser gets to your code, sets it going and then continues on rendering the page. Particularly if you have a weighty page, it can make quite a difference. The RGraph.Async() function itself is very simple, but because it can make a significant difference to the speed of your page, it is documented here. There's an example of it to the right. One thing to remember is to ensure your canvas tag is defined first before you set the function that creates the chart going.

Although asynchronous processing can speed up your pages, it can also give the appearance of slower pages due to partial rendering, (ie your pages render a bit at a time). You therefore will need to experiment to get the best result for you.


<script src="RGraph.common.js"></script>
<script src="RGraph.line.js"></script>

<canvas id="myCanvas" width="300" height="100">[No canvas support]</canvas>

<script>
    /**
    * Create the line chart
    */
    function CreateLineGraph ()
    {
        var line = new RGraph.Line({
            id: 'cvs',
            data: [1,2,4,2,1,3,5,6,6,5,3,5],
            options: {
                title: 'Sales for Acme Inc.',
                labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
                hmargin: 10,
                linewidth: 5,
                shadowOffsetx: 0,
                shadowOffsety: 0,
                shadowBlur: 15,
                textAccessible: true,
                textSize: 14
            }
        }).draw();
    }

    if (RGraph.ISOLD) {
        window.onload = CreateLineGraph;
    } else {
        RGraph.async(CreateLineGraph);
    }
</script>

Things to remember

See also

You might also be interested in the alternative, DOMContentLoaded event.
Share RGraph
X

Comments