Creating charts asynchronously

• Things to remember
• See also

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's documented here. There's an example of it below. One thing to remember is to ensure your canvas tag is defined first before you call the function that creates the chart.

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.

<!-- Include the library files -->
<script src="RGraph.common.js"></script>
<script src="RGraph.line.js"></script>

<!-- Define the canvas tag -->
<canvas id="cvs" width="300" height="100">[No canvas support]</canvas>

<!-- Create the chart -->
<script>
    function createLineChart ()
    {
        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.',
                titleSize: 16,
                titleBold: true,
                xaxisLabels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
                marginInner: 10,
                linewidth: 5,
                shadowOffsetx: 0,
                shadowOffsety: 0,
                shadowBlur: 15,
                textSize: 14,
                xaxis: false,
                yaxis: false,
                backgroundGridVlines: false,
                backgroundGridBorder: false
            }
        }).draw();
    }

    RGraph.async(createLineChart);
</script>

Things to remember

• All of the libraries must be loaded first. In the pages head for example. If not, you won't be able to create your charts.
• Your canvas tag must be defined before setting the asynchronous code going. If not, then the canvas may be referenced before it exists, and thus your charts will not be created.
• The user's connection speed may be a factor. Slower connections may mean, for example, that the load event doesn't fire very quickly. If you're using the load event to create your charts then asynchronous creation instead may give you more apparent speed ups. Alternatively, careful placement of the canvas tag and the code that creates the chart may be sufficient instead.

See also

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