source: Dev/trunk/RGraph/docs/async.html @ 256

Last change on this file since 256 was 77, checked in by fpvanagthoven, 14 years ago

RGraph
File size: 10.4 KB
RevLine 
[77]1<?php ob_start('ob_gzhandler') ?>
2<!DOCTYPE html >
3<html>
4<head>
5    <meta http-equiv="X-UA-Compatible" content="chrome=1">
6    <!--
7        /**
8        * o------------------------------------------------------------------------------o
9        * | This file is part of the RGraph package - you can learn more at:             |
10        * |                                                                              |
11        * |                          http://www.rgraph.net                               |
12        * |                                                                              |
13        * | This package is licensed under the RGraph license. For all kinds of business |
14        * | purposes there is a small one-time licensing fee to pay and for non          |
15        * | commercial  purposes it is free to use. You can read the full license here:  |
16        * |                                                                              |
17        * |                      http://www.rgraph.net/LICENSE.txt                       |
18        * o------------------------------------------------------------------------------o
19        */
20    -->
21    <title>RGraph: Javascript charts and graph library - Asynchronous processing</title>
22   
23    <meta name="keywords" content="rgraph html5 canvas chart docs async asynchronous" />
24    <meta name="description" content="RGraph: Javascript charts and graph library - Documentation about asynchronous processing" />
25   
26    <meta property="og:title" content="RGraph: Javascript charts and graph library" />
27    <meta property="og:description" content="A chart library based on the HTML5 canvas tag" />
28    <meta property="og:image" content="http://www.rgraph.net/images/logo.png"/>
29
30    <link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" />
31    <link rel="icon" type="image/png" href="../images/favicon.png">
32
33    <script src="../libraries/RGraph.common.core.js"></script>
34    <script src="../libraries/RGraph.line.js"></script>
35    <!--[if IE 8]><script src="../excanvas/excanvas.original.js"></script><![endif]-->
36   
37    <script>
38        window.onload = function ()
39        {
40            var duration = (new Date().getTime() - timer.getTime()) / 1000;
41            document.getElementById("waiting").innerHTML = '<span style="color: green">Done! Extra time taken: ' + duration.toFixed(1) + ' seconds</span>';
42            alert('The window.onload event fired, extra time taken: ' + duration.toFixed(1) + ' seconds');
43        }
44
45        // Create a timer to show the difference
46        timer = new Date();
47    </script>
48
49
50    <script>
51      var _gaq = _gaq || [];
52      _gaq.push(['_setAccount', 'UA-54706-2']);
53      _gaq.push(['_trackPageview']);
54   
55      (function() {
56        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
57        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
58        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
59      })();
60    </script>
61</head>
62<body>
63
64   
65    <!-- Social networking buttons -->
66        <div id="social_icons" class="warning" style="border-radius: 10px; top: 1px; position: fixed">
67            <a title="Bookmark with delicious" href="http://delicious.com/save?jump=close&v=4&noui&jump=close&url=http://www.rgraph.net&notes=RGraph%20is%20a%20HTML5%20based%20javascript%20charts%20library%20supporting%20a%20wide%20range%20of%20different%20charts%20types&title=RGraph:Javascript%20charts%20and%20graphs%20library" target="_blank"><img src="../images/delicious.png" alt="Bookmark with delicious" width="22" height="22" border="0" align="absmiddle" /></a>
68            <a href="http://twitter.com/home/?status=RGraph%3A%20Javascript+charts+and+graph+library+http%3A%2F%2Fwww.rgraph.net+%23rgraph+%23html5+%23canvas+%23javascript+%23charts+@_rgraph" target="_blank"><img src="../images/twitter.png" id="twitter_icon" alt="tweet this site" width="22" height="22" border="0" align="absmiddle" /></a>
69        </div>
70
71        <script>
72            // Opera fix
73            if (navigator.userAgent.indexOf('Opera') == -1) {
74              document.getElementById("social_icons").style.position = 'fixed';
75            }
76        </script>
77    <!-- Social networking buttons -->
78
79    <div id="breadcrumb">
80        <a href="../index.html">RGraph: Javascript charts and graph library</a>
81        >
82        <a href="index.html">Documentation</a>
83        >
84        Asynchronous processing
85    </div>
86
87    <h1>RGraph: <span>Javascript charts and graph library</span> - Asynchronous processing</h1>
88
89    <script>
90        if (RGraph.isIE8()) {
91            document.write('<div style="background-color: #fee; border: 2px dashed red; padding: 5px"><b>Important</b><br /><br /> Internet Explorer 8 does not natively support the HTML5 canvas tag, so if you want to see the charts, you can either:<ul><li>Install <a href="http://code.google.com/chrome/chromeframe/">Google Chrome Frame</a></li><li>Use ExCanvas. This is provided in the RGraph Archive.</li><li>Use another browser entirely. Your choices are Firefox 3.5+, Chrome 2+, Safari 4+ or Opera 10.5+. </li></ul> <b>Note:</b> Internet Explorer 9 fully supports the canvas tag. Click <a href="http://support.rgraph.net/message/rgraph-in-internet-explorer-9.html" target="_blank">here</a> to see some screenshots.</div>');
92        }
93    </script>
94   
95    <p id="waiting" style="; font-weight: bold; font-size: 16pt"><span style="color: #aa0">Waiting for onload event...</span></p>
96
97    <p style="background-color: #eee; border: 1px dashed gray; padding: 5px; height: 50px;">
98        <span style="display: inline-block; margin-left: 10px; float: right">
99            <script>
100                document.write('<img src="http://ie.microsoft.com/testdrive/HTML5/DOMContentLoaded/whidbey.jpg?' + Math.random() + '" width="50" height="50" />&nbsp;');
101                document.write('<img src="http://ie.microsoft.com/testdrive/HTML5/DOMContentLoaded/window.jpg?' + Math.random() + '" width="50" height="50" />&nbsp;');
102                document.write('<img src="http://ie.microsoft.com/testdrive/HTML5/DOMContentLoaded/whidbey2.jpg?' + Math.random() + '" width="50" height="50" />');
103            </script>
104        </span>
105
106        These images are here to pad the page and slow down loading so that the window.onload event is slowed. This makes the
107        difference far more visible.
108    </p>
109
110    <canvas id="myCanvas" width="600" height="250" style="float: right">[No canvas support]</canvas>
111
112    <script>
113        /**
114        * Create the line chart
115        */
116        function CreateLineGraph ()
117        {
118            var line = new RGraph.Line('myCanvas', [1,2,4,2,1,3,5,6,6,5,3,5]);
119            line.Set('chart.title', 'Sales for Acme Inc.');
120            line.Set('chart.labels', ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']);
121            line.Set('chart.hmargin', 10);
122            line.Set('chart.linewidth', 5);
123            line.Set('chart.shadow', true);
124            line.Set('chart.shadow.offsetx', 0);
125            line.Set('chart.shadow.offsety', 0);
126            line.Set('chart.shadow.blur', 15);
127            line.Draw();
128        }
129   
130        RGraph.Async(CreateLineGraph);
131    </script>
132
133    <p>
134        Asynchronous processing can speed up the display of your charts, because the browser gets to your code, sets it
135        going and then continues on rendering the page. Particularly if you have a weighty page,
136        it can make quite a difference. The <i>RGraph.Async()</i> function itself is very simple, but because it can make
137        a significant difference to the speed of your page, it is documented here. There's an example of it to the right.
138        One thing to remember is to ensure your canvas tag is defined first before you set the function that creates
139        the chart going.
140    </p>
141   
142    <p>
143        Although asynchronous processing can speed up your pages, it can also give the appearance of slower pages due to partial
144        rendering, (ie your pages render a bit at a time). You therefore will need to experiment to get the best result for you.
145    </p>
146
147    <br clear="all" />
148
149    <pre class="code">
150&lt;script src="RGraph.common.js"&gt;&lt;/script&gt;
151&lt;script src="RGraph.line.js"&gt;&lt;/script&gt;
152
153&lt;canvas id="myCanvas" width="300" height="100"&gt;[No canvas support]&lt;/canvas&gt;
154
155&lt;script&gt;
156    /**
157    * Create the line chart
158    */
159    function CreateLineGraph ()
160    {
161        var line = new RGraph.Line('myCanvas', [1,2,4,2,1,3,5,6,6,5,3,5]);
162        line.Set('chart.title', 'Sales for Acme Inc.');
163        line.Set('chart.labels', ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']);
164        line.Set('chart.hmargin', 10);
165        line.Set('chart.linewidth', 5);
166        line.Set('chart.shadow', true);
167        line.Set('chart.shadow.offsetx', 0);
168        line.Set('chart.shadow.offsety', 0);
169        line.Set('chart.shadow.blur', 15);
170        line.Draw();
171    }
172
173    RGraph.Async(CreateLineGraph);
174&lt;/script&gt;
175</pre>
176
177    <p><b>Things to remember</b></p>
178   
179    <ul>
180        <li>All your libraries must be loaded first. In the pages &lt;head&gt; for example. If not, you won't be able to create your charts.</li>
181        <li>Your &lt;canvas&gt; 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.</li>
182        <li>
183            The users connection speed may be a factor. Slower connections may mean, for example, that the onload event doesn't fire very
184            quickly. If you're using the onload event to create your charts then asynchronous creation instead may give you more
185            apparent speed ups. Alternatively, careful placement of the &lt;canvas&gt; tag and the code that creates the chart may suffice
186            instead.
187        </li>
188        <li>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.</li>
189        <li>
190            Since a dev release of version 4, Google Chrome has had an issue when asynchronous processing is used, meaning that
191            text isn't always displayed. The solution here is simply to not use asynchronous processing. As of 27th March 2010,
192            Chrome 5 appears to be fine.
193        </li>
194    </ul>
195
196    <h4>See also</h4>
197   
198    You might also be interested in the alternative, <a href="domcontentloaded.html">DOMContentLoaded</a> event.
199
200</body>
201</html>
Note: See TracBrowser for help on using the repository browser.