Creating charts asynchronously

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 -->
    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


Things to remember

See also

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