From 770ba5201f5c60b2bb36602ff9d359f641e33125 Mon Sep 17 00:00:00 2001 From: Yves Fischer Date: Sun, 23 Oct 2011 21:14:40 +0200 Subject: Charting with flask, rgraph and custom "timeseries database" --- schall/static/RGraph/docs/async.html | 209 +++++++++++++++++++++++++++++++++++ 1 file changed, 209 insertions(+) create mode 100644 schall/static/RGraph/docs/async.html (limited to 'schall/static/RGraph/docs/async.html') diff --git a/schall/static/RGraph/docs/async.html b/schall/static/RGraph/docs/async.html new file mode 100644 index 0000000..82490e4 --- /dev/null +++ b/schall/static/RGraph/docs/async.html @@ -0,0 +1,209 @@ + + + + + + RGraph: HTML5 Javascript charts library - Asynchronous processing + + + + + + + + + + + + + + + + + + + + + + + + + + + +

+ +

+ +

+ + + +

+ + +

+ + + + +

RGraph: HTML5 Javascript charts library - 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 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('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();
+    }
+
+    RGraph.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. +

+ +

RGraph: HTML5 Javascript charts library - Asynchronous processing

See also