source: Dev/trunk/RGraph/docs/animation.html @ 195

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

RGraph
File size: 12.4 KB
Line 
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 - Animating your charts</title>
22   
23    <meta name="keywords" content="rgraph html5 canvas chart docs animation" />
24    <meta name="description" content="RGraph: Javascript charts and graph library - Documentation about animating your charts" />
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.rose.js" ></script>
35    <script src="../libraries/RGraph.bar.js" ></script>
36    <script src="../libraries/RGraph.line.js" ></script>
37    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" ></script>
38    <!--[if IE 8]><script src="../excanvas/excanvas.original.js"></script><![endif]-->
39   
40    <script>
41        /**
42        * The total number of frames, delay and current frame number
43        */
44        delay    = 35;
45        curframe = 1;
46        numframe = 20;
47
48        window.onload = function ()
49        {
50            /**
51            * Clear all of the canvases
52            */
53            RGraph.Clear(document.getElementById("myRose"));
54
55            /**
56            * Draw the bar chart
57            */
58            var multiplier = curframe / numframe;
59            var rose = new RGraph.Rose('myRose', [45 * multiplier, 12 * multiplier,
60                                           16 * multiplier, 18 * multiplier,
61                                           44 * multiplier, 54 * multiplier,
62                                           23 * multiplier, 21 * multiplier,
63                                           56 * multiplier, 58 * multiplier,
64                                           33 * multiplier, 47 * multiplier] );
65            rose.Set('chart.labels', ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']);
66            rose.Set('chart.ymax', 60); // This stops the scale from changing frame to frame
67            rose.Set('chart.hmargin', 5);
68            rose.Set('chart.gutter.left', 30);
69            rose.Set('chart.gutter.right', 30);
70            rose.Set('chart.gutter.top', 30);
71            rose.Set('chart.gutter.bottom', 30);
72           
73            // Gradient
74            var grad = rose.context.createRadialGradient(rose.canvas.width / 2,
75                                                         rose.canvas.height / 2,
76                                                         0,
77                                                         rose.canvas.width / 2,
78                                                         rose.canvas.height / 2,
79                                                         150);
80
81            grad.addColorStop(0, 'white');
82            grad.addColorStop(1, 'red');
83
84            rose.Set('chart.colors', [grad]);
85            rose.Set('chart.strokecolor', null);
86            rose.Draw();
87
88            /**
89            * If the animation frame is less than number of the total number of frames, redraw the canvas
90            */
91            if (curframe < numframe) {
92                curframe++;
93                setTimeout(window.onload, delay);
94            }
95        }
96    </script>
97
98
99    <script>
100      var _gaq = _gaq || [];
101      _gaq.push(['_setAccount', 'UA-54706-2']);
102      _gaq.push(['_trackPageview']);
103   
104      (function() {
105        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
106        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
107        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
108      })();
109    </script>
110</head>
111<body>
112
113   
114    <!-- Social networking buttons -->
115        <div id="social_icons" class="warning" style="border-radius: 10px; top: 1px; position: fixed">
116            <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>
117            <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>
118        </div>
119
120        <script>
121            // Opera fix
122            if (navigator.userAgent.indexOf('Opera') == -1) {
123              document.getElementById("social_icons").style.position = 'fixed';
124            }
125        </script>
126    <!-- Social networking buttons -->
127
128    <div id="breadcrumb">
129        <a href="../index.html">RGraph: Javascript charts and graph library</a>
130        >
131        <a href="index.html">Documentation</a>
132        >
133        Animating your charts
134    </div>
135
136    <h1>RGraph: <span>Javascript charts and graph library</span> - Animating your charts</h1>
137
138    <script>
139        if (RGraph.isIE8()) {
140            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>');
141        }
142    </script>
143
144    <div style="float: right">
145        <canvas id="myRose" width="300" height="300">[No canvas support]</canvas>
146    </div>
147
148    <p>
149        Animating your charts is a relatively easy affair, whilst not being supported natively as it would only serve to
150        over-complicate the RGraph libraries. The way to do it is to use
151        the function <i>RGraph.Clear(canvas)</i>, passing it your canvas object that is returned by
152        <i>document.getElementById()</i>. By default this will revert the canvas back to transparency. You can change this by
153        passing it the color you want it to use as the second (optional) argument. You could even use a gradient if
154        you wanted. Then you can simply redraw the entire chart.
155    </p>
156   
157    <p>
158        One thing you should note, is that you may have to specify the scale manually, to prevent it from changing
159        from frame to frame. This can be done by using the <i>chart.ymax</i> property.
160    </p>
161   
162    <p>
163        You can review the source of this page if you need further help. Two global variables are set - the number of frames
164        and the current frame number (which starts at one). The charts are then drawn with appropriate data
165        (ie the data multiplied by the frame number over the total number of frames). If the frame number is less than
166        the total number of frames, the frame number is incremented and the function (window.onload) is called again
167        after a small delay.
168    </p>
169   
170    <h4>Animation using jQuery</h4>
171
172
173    <div style="width: 600px; height: 250px; display: inline; display: inline-block; float: right">
174        <canvas id="myLine" width="600" height="250" style="position: relative">[No canvas support]</canvas>
175    </div>
176    <button style="width: 600px; float: right" id="butAnimate" onclick="Animate(); this.disabled = true; setTimeout(function () {document.getElementById('butAnimate').disabled = false;}, 2000);">Animate!</button>
177
178    <script>
179        animate = false;
180        ShowGraph();
181
182        /**
183        * This is the jQuery animation bit
184        */
185        function Animate()
186        {
187            $('#myLine').animate({
188                opacity: 0,
189                width: 0,
190                height: 0,
191                left: '+=300px',
192                top: '+=125px'
193            }, 1000, null, function () {animate = true; ShowGraph();});
194        }
195       
196        function ShowGraph()
197        {
198            // This clears the canvas           
199            document.getElementById("myLine").width = 600;
200           
201            if (document.getElementById("myLine").__object__ && document.getElementById("myLine").__object__.type == 'line') {
202                var bar = new RGraph.Bar('myLine', [4,2,3]);
203                bar.Set('chart.labels', ['Fred','Charles','Carl']);
204                bar.Set('chart.title', 'jQuery animation example');
205                bar.Set('chart.labels.above', true);
206                bar.Set('chart.labels.above.size', 16);
207                bar.Set('chart.units.post', 'pt');
208                bar.Draw();
209           
210            } else {   
211                line = new RGraph.Line('myLine', [4,5,3,4,6,8,4,9,5,2]);
212                line.Set('chart.hmargin', 5);
213                line.Set('chart.labels', ['Gavin','Hoolio','June','Kev','Lou','Jane','Rich','Tom','John','Pat']);
214                line.Set('chart.tickmarks', 'endcircle');
215                line.Set('chart.title', 'jQuery animation example');
216                line.Draw();
217            }
218
219            if (animate) {
220                $('#myLine').animate({
221                    opacity: 1,
222                    width: '600px',
223                    height: '250px',
224                    left: '-=300px',
225                    top: '-=125px'
226                }, 1000);
227               
228                animate = true;
229            }
230        }
231    </script>
232
233    <p>
234        You can if you prefer use an external library for animation, like jQuery.
235    </p>
236   
237    <p>
238        The chart to the right is animated using
239        jQuery. In the example the width is maintained by placing the canvas within a DIV which has the width/height CSS
240        attributes set.
241    </p>
242   
243    <p>
244        In this instance, the <a href="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" target="_blank">
245        Google hosted jQuery</a> is used.
246    </p>
247   
248   
249    <br clear="all" />
250   
251    <h4>CSS animation versus &lt;canvas&gt; animation</h4>
252   
253    <p>
254        As you can see from the above examples, or if you build your own animations, CSS animation (which jQuery does) can be much smoother.
255        This is because CSS animation (ie changing the CSS attributes) does not have the side effect of clearing the canvas, and so
256        does not incur a redraw.
257    </p>
258   
259    <h4>An Animated Pie chart</h4>
260   
261    <p>
262        <a href="animation_segments.html"><b>This example</b></a> is of the Pie chart, with animated segment separation. Animated
263        segment separation is now (April 2011) available as an alternative tooltip highlight mode:
264       
265        <pre class="code">myObj.Set('chart.highlight.style', 'explode');</pre>
266    </p>
267   
268</body>
269</html>
Note: See TracBrowser for help on using the repository browser.