1 <?php ob_start('ob_gzhandler') ?>
5 <meta http-equiv="X-UA-Compatible" content="chrome=1">
8 * o------------------------------------------------------------------------------o
9 * | This file is part of the RGraph package - you can learn more at: |
11 * | http://www.rgraph.net |
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: |
17 * | http://www.rgraph.net/LICENSE.txt |
18 * o------------------------------------------------------------------------------o
21 <title>RGraph: HTML5 canvas graph library - Animating your graphs</title>
23 <meta name="keywords" content="rgraph html5 canvas graph docs animation" />
24 <meta name="description" content="RGraph: HTML5 canvas graph software - Documentation about animating your charts" />
26 <link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" />
27 <link rel="icon" type="image/png" href="../images/favicon.png">
29 <script src="../libraries/RGraph.common.core.js" ></script>
30 <script src="../libraries/RGraph.rose.js" ></script>
31 <script src="../libraries/RGraph.bar.js" ></script>
32 <script src="../libraries/RGraph.line.js" ></script>
33 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" ></script>
34 <!--[if IE 8]><script src="../excanvas/excanvas.compressed.js"></script><![endif]-->
38 * The total number of frames, delay and current frame number
44 window.onload = function ()
47 * Clear all of the canvases
49 RGraph.Clear(document.getElementById("myRose"));
54 var multiplier = curframe / numframe;
55 var rose = new RGraph.Rose('myRose', [45 * multiplier, 12 * multiplier,
56 16 * multiplier, 18 * multiplier,
57 44 * multiplier, 54 * multiplier,
58 23 * multiplier, 21 * multiplier,
59 56 * multiplier, 58 * multiplier,
60 33 * multiplier, 47 * multiplier] );
61 rose.Set('chart.labels', ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']);
62 rose.Set('chart.ymax', 60); // This stops the scale from changing frame to frame
63 rose.Set('chart.hmargin', 5);
64 rose.Set('chart.gutter', 30);
67 var grad = rose.context.createRadialGradient(rose.canvas.width / 2,
68 rose.canvas.height / 2,
70 rose.canvas.width / 2,
71 rose.canvas.height / 2,
74 grad.addColorStop(0, 'white');
75 grad.addColorStop(1, 'red');
77 rose.Set('chart.colors', [grad]);
78 rose.Set('chart.strokecolor', null);
82 * If the animation frame is less than number of the total number of frames, redraw the canvas
84 if (curframe < numframe) {
86 setTimeout(window.onload, delay);
93 <!-- Social networking buttons -->
94 <script src="../libraries/RGraph.common.core.js" ></script>
97 function HideTwitterDIV ()
99 document.getElementById("twitter_div").style.opacity = 0;
100 document.getElementById("twitter_div").style.display = 'none';
104 function ShowTwitterDIV (e)
106 var e = RGraph.FixEventObject(document.all ? event : e);
107 var div = document.getElementById("twitter_div");
108 var img = document.getElementById("twitter_icon");
110 div.style.display = 'block';
111 div.style.left = (RGraph.getCanvasXY(img)[0] + img.offsetWidth - div.offsetWidth + 110) + 'px';
112 div.style.top = (RGraph.getCanvasXY(img)[1] - 1) + 'px';
117 setTimeout('document.getElementById("twitter_div").style.opacity = 0.2;', 25);
118 setTimeout('document.getElementById("twitter_div").style.opacity = 0.4;', 50);
119 setTimeout('document.getElementById("twitter_div").style.opacity = 0.6;', 100);
120 setTimeout('document.getElementById("twitter_div").style.opacity = 0.8;', 125);
121 setTimeout('document.getElementById("twitter_div").style.opacity = 1.0;', 150);
129 * This code installs the event handler that hides the Twitter DIV
131 if (RGraph.isIE8()) {
132 window.attachEvent('onload', function () {document.body.attachEvent('onclick', HideTwitterDIV);});
134 window.addEventListener('click', HideTwitterDIV, false);
138 <!-- The twitter DIV -->
139 <div id="twitter_div" style="position: absolute;top: 0;left: 0;background-color: #eee;border: 2px dashed black;box-shadow: 0 0 15px #aaa;-moz-box-shadow: 0 0 15px #aaa;-webkit-box-shadow: 0 0 15px #aaa;padding: 3px;display: none;opacity: 0;z-index: 99;">
140 <a href="http://twitter.com/home/?status=RGraph%3A+HTML5+canvas+graph+library+based+on+the+HTML5+canvas+tag+http%3A%2F%2Fwww.rgraph.net+%23rgraph+%23html5+%23canvas" target="_blank" title="Share on Twitter" rel="nofollow" style="text-decoration: none">Tweet about RGraph</a><br>
141 <a href="http://twitter.com/_rgraph" style="text-decoration: none" rel="nofollow" target="_blank">Follow for HTML5 news</a>
144 <div id="social_icons" class="warning" style="top: 0; left: 5px; position: absolute">
147 if (navigator.userAgent.indexOf('Opera') == -1) {
148 document.getElementById("social_icons").style.position = 'fixed';
149 document.getElementById("twitter_div").style.position = 'fixed';
154 <b style="display: inline-block; position: relative; top: 1px">Bookmark and share:</b>
158 <a title="Bookmark with delicious" href="http://delicious.com/save?jump=close&v=4&noui&jump=close&url=http://www.rgraph.net¬es=RGraph%20is%20a%20HTML5%20based%20graph%20library%20supporting%20a%20wide%20range%20of%20different%20graph%20types:Bar,%20Bipolar,%20Donut,%20Funnel,%20Gantt,%20Horizontal%20Bar,%20LED,%20Line,%20Meter,%20Odometer,%20Pie,%20Progress%20Bar,%20Rose,%20RScatter,%20Scatter%20and%20Traditional%20Radar&title=RGraph:%20HTML5%20canvas%20graph%20library%20based%20on%20the%20HTML5%20canvas%20tag" target="_blank">
159 <img src="../images/delicious.png" alt="Bookmark with delicious" width="22" height="22" border="0" align="absmiddle" />
162 <a href="" target="_blank" onmouseover="if (document.getElementById('twitter_div').style.display == 'none') ShowTwitterDIV(event);" onclick="event.stopPropagation(); event.cancelBubble = true; return false">
163 <img src="../images/twitter.png" id="twitter_icon" alt="tweet this site" width="22" height="22" border="0" align="absmiddle" />
168 <a title="Post to Google Buzz!" href="" onclick="window.open('http://www.google.com/buzz/post?url=http://www.rgraph.net&imageurl=http://www.rgraph.net/images/logo.png', 'google_buzz_window', 'width=800,height=400,top=100,left=100'); return false">
169 <img src="../images/buzz.png" width="22" height="22" alt="Post to Google Buzz!" align="absmiddle" style="position: relative; top: -2px; border: 0" border="0"/>
173 <a title="Share RGraph on Facebook" href="" onclick="window.open('http://www.facebook.com/sharer.php?u=http://www.rgraph.net&t=RGraph:%20HTML5%20canvas%20graph%20library', 'facebook_window', 'width=500,height=300,top=100,left=100'); return false">
174 <img src="../images/facebook.png" width="22" height="22" alt="Post to Facebook" align="absmiddle" style="position: relative; top: -2px; border: 0" border="0"/>
177 <a href="mailto:share@friendfeed.com" title="Share on FriendFeed">
178 <img src="../images/friendfeed.png" width="22" height="22" alt="Share on FriendFeed" border="0" align="absmiddle" />
181 <a href="http://www.stumbleupon.com/submit?url=http://www.rgraph.net" target="_blank" title="Share on StumbleUpon" >
182 <img src="../images/stumble.png" alt="Stumble! this site" width="22" height="22" border="0" align="absmiddle" />
187 <!-- /Social networking buttons -->
189 <div id="breadcrumb">
190 <a href="../index.html">RGraph: HTML5 canvas graph library</a>
192 <a href="index.html">Documentation</a>
194 Animating your graphs
197 <h1>RGraph: HTML5 canvas graph library - Animating your graphs</h1>
200 if (RGraph.isIE8()) {
201 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 graphs, 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://groups.google.com/group/rgraph/browse_thread/thread/c5651ff8c56b8f3c#" target="_blank">here</a> to see some screenshots.</div>');
205 <div style="float: right">
206 <canvas id="myRose" width="300" height="300">[No canvas support]</canvas>
210 Animating your graphs is a relatively easy affair, whilst not being supported natively as it would only serve to
211 over-complicate the RGraph libraries. The way to do it is to use
212 the function <i>RGraph.Clear(canvas)</i>, passing it your canvas object that is returned by
213 <i>document.getElementById()</i>. By default this will cover the canvas in white. You can change this by
214 passing it the color you want it to use as the second (optional) argument. You could even use a gradient if
215 you wanted. Then you can simply redraw the entire graph.
219 One thing you should note, is that you may have to specify the scale manually, to prevent it from changing
220 from frame to frame. This can be done by using the <i>chart.ymax</i> property.
224 You can review the source of this page if you need further help. Two global variables are set - the number of frames
225 and the current frame number (which starts at one). The graphs are then drawn with appropriate data
226 (ie the data multiplied by the frame number over the total number of frames). If the frame number is less than
227 the total number of frames, the frame number is incremented and the function (window.onload) is called again
231 <h4>Animation using jQuery</h4>
234 <div style="width: 600px; height: 250px; display: inline; display: inline-block; float: right">
235 <canvas id="myLine" width="600" height="250" style="position: relative">[No canvas support]</canvas>
237 <button style="width: 600px; float: right" id="butAnimate" onclick="Animate(); this.disabled = true; setTimeout(function () {document.getElementById('butAnimate').disabled = false;}, 2000);">Animate!</button>
244 * This is the jQuery animation bit
248 $('#myLine').animate({
254 }, 1000, null, function () {animate = true; ShowGraph();});
259 // This clears the canvas
260 document.getElementById("myLine").width = 600;
262 if (document.getElementById("myLine").__object__ && document.getElementById("myLine").__object__.type == 'line') {
263 var bar = new RGraph.Bar('myLine', [4,2,3]);
264 bar.Set('chart.labels', ['Fred','Charles','Carl']);
265 bar.Set('chart.title', 'jQuery animation example');
266 bar.Set('chart.labels.above', true);
267 bar.Set('chart.labels.above.size', 16);
268 bar.Set('chart.units.post', 'pt');
272 line = new RGraph.Line('myLine', [4,5,3,4,6,8,4,9,5,2]);
273 line.Set('chart.hmargin', 5);
274 line.Set('chart.labels', ['Gavin','Hoolio','June','Kev','Lou','Jane','Rich','Tom','John','Pat']);
275 line.Set('chart.tickmarks', 'endcircle');
276 line.Set('chart.title', 'jQuery animation example');
281 $('#myLine').animate({
295 You can if you prefer use an external library for animation, like jQuery.
299 The graph to the right is animated using
300 jQuery. In the example the width is maintained by placing the canvas within a DIV which has the width/height CSS
305 In this instance, the <a href="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" target="_blank">
306 Google hosted jQuery</a> is used.