# Asynchronous processing

Waiting for onload event...

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

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 OfficeExcel.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="OfficeExcel.common.js"></script>
    <script src="OfficeExcel.line.js"></script>

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

    <script>
        /**
        * Create the line chart
        */
        function CreateLineGraph ()
        {
            var line = new OfficeExcel.Line('myCanvas', [1,2,4,2,1,3,5,6,6,5,3,5]);
            line.Set('chart.title', 'Sales for Acme Inc.');
            line.Set('chart.labels', ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']);
            line.Set('chart.hmargin', 10);
            line.Set('chart.linewidth', 5);
            line.Set('chart.shadow', true);
            line.Set('chart.shadow.offsetx', 0);
            line.Set('chart.shadow.offsety', 0);
            line.Set('chart.shadow.blur', 15);
            line.Draw();
        }

        if (OfficeExcel.isOld()) {
            window.onload = CreateLineGraph;
        } else {
            OfficeExcel.Async(CreateLineGraph);
        }
    </script>

Things to remember

- All your 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 users connection speed may be a factor. Slower connections may mean, for example, that the onload event doesn't fire very quickly. If you're using the onload 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 suffice instead.
- Since the MSIE/ExCanvas combo requires you to use the window.onload event, asynchronous chart creation in this case will probably not be any help.
- Since a dev release of version 4, Google Chrome has had an issue when asynchronous processing is used, meaning that text isn't always displayed. The solution here is simply to not use asynchronous processing. As of 27th March 2010, Chrome 5 appears to be fine.

#### See also

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