RGraph/docs/animation.html

   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: HTML5 canvas graph library - Animating your graphs</title>
  22
  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" />
  25
  26     <link rel="stylesheet" href="../css/website.css" type="text/css" media="screen" />
  27     <link rel="icon" type="image/png" href="../images/favicon.png">
  28
  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]-->
  35
  36     <script>
  37         /**
  38         * The total number of frames, delay and current frame number
  39         */
  40         delay    = 35;
  41         curframe = 1;
  42         numframe = 20;
  43
  44         window.onload = function ()
  45         {
  46             /**
  47             * Clear all of the canvases
  48             */
  49             RGraph.Clear(document.getElementById("myRose"));
  50
  51             /**
  52             * Draw the bar chart
  53             */
  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);
  65
  66             // Gradient
  67             var grad = rose.context.createRadialGradient(rose.canvas.width / 2,
  68                                                          rose.canvas.height / 2,
  69                                                          0,
  70                                                          rose.canvas.width / 2,
  71                                                          rose.canvas.height / 2,
  72                                                          150);
  73
  74             grad.addColorStop(0, 'white');
  75             grad.addColorStop(1, 'red');
  76
  77             rose.Set('chart.colors', [grad]);
  78             rose.Set('chart.strokecolor', null);
  79             rose.Draw();
  80
  81             /**
  82             * If the animation frame is less than number of the total number of frames, redraw the canvas
  83             */
  84             if (curframe < numframe) {
  85                 curframe++;
  86                 setTimeout(window.onload, delay);
  87             }
  88         }
  89     </script>
  90 </head>
  91 <body>
  92
  93     <!-- Social networking buttons -->
  94     <script src="../libraries/RGraph.common.core.js" ></script>
  95
  96     <script>
  97         function HideTwitterDIV ()
  98         {
  99             document.getElementById("twitter_div").style.opacity = 0;
 100             document.getElementById("twitter_div").style.display = 'none';
 101         }
 102
 103
 104         function ShowTwitterDIV (e)
 105         {
 106             var e   = RGraph.FixEventObject(document.all ? event : e);
 107             var div = document.getElementById("twitter_div");
 108             var img = document.getElementById("twitter_icon");
 109
 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';
 113
 114             /**
 115             * Fade it in
 116             */
 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);
 122
 123             e.stopPropagation();
 124
 125             return false;
 126         }
 127
 128         /**
 129         * This code installs the event handler that hides the Twitter DIV
 130         */
 131         if (RGraph.isIE8()) {
 132              window.attachEvent('onload', function () {document.body.attachEvent('onclick', HideTwitterDIV);});
 133         } else {
 134             window.addEventListener('click', HideTwitterDIV, false);
 135         }
 136     </script>
 137
 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&nbsp;about&nbsp;RGraph</a><br>
 141         <a href="http://twitter.com/_rgraph" style="text-decoration: none" rel="nofollow" target="_blank">Follow for HTML5 news</a>
 142     </div>
 143
 144     <div id="social_icons" class="warning" style="top: 0; left: 5px; position: absolute">
 145         <script>
 146             // Opera fix
 147             if (navigator.userAgent.indexOf('Opera') == -1) {
 148               document.getElementById("social_icons").style.position = 'fixed';
 149               document.getElementById("twitter_div").style.position = 'fixed';
 150
 151             }
 152         </script>
 153
 154         <b style="display: inline-block; position: relative; top: 1px">Bookmark and share:</b>
 155
 156
 157             <div id="social">
 158                 <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%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" />
 160                 </a>
 161
 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" />
 164                 </a>
 165
 166
 167 <!--
 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"/>
 170                 </a>
 171
 172
 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"/>
 175                 </a>
 176
 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" />
 179                 </a>
 180
 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" />
 183                 </a>
 184 -->
 185             </div>
 186     </div>
 187     <!-- /Social networking buttons -->
 188
 189     <div id="breadcrumb">
 190         <a href="../index.html">RGraph: HTML5 canvas graph library</a>
 191         >
 192         <a href="index.html">Documentation</a>
 193         >
 194         Animating your graphs
 195     </div>
 196
 197     <h1>RGraph: HTML5 canvas graph library - Animating your graphs</h1>
 198
 199     <script>
 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>');
 202         }
 203     </script>
 204
 205     <div style="float: right">
 206         <canvas id="myRose" width="300" height="300">[No canvas support]</canvas>
 207     </div>
 208
 209     <p>
 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.
 216     </p>
 217
 218     <p>
 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.
 221     </p>
 222
 223     <p>
 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
 228         after a small delay.
 229     </p>
 230
 231     <h4>Animation using jQuery</h4>
 232
 233
 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>
 236     </div>
 237     <button style="width: 600px; float: right" id="butAnimate" onclick="Animate(); this.disabled = true; setTimeout(function () {document.getElementById('butAnimate').disabled = false;}, 2000);">Animate!</button>
 238
 239     <script>
 240         animate = false;
 241         ShowGraph();
 242
 243         /**
 244         * This is the jQuery animation bit
 245         */
 246         function Animate()
 247         {
 248             $('#myLine').animate({
 249                 opacity: 0,
 250                 width: 0,
 251                 height: 0,
 252                 left: '+=300px',
 253                 top: '+=125px'
 254             }, 1000, null, function () {animate = true; ShowGraph();});
 255         }
 256
 257         function ShowGraph()
 258         {
 259             // This clears the canvas
 260             document.getElementById("myLine").width = 600;
 261
 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');
 269                 bar.Draw();
 270
 271             } else {
 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');
 277                 line.Draw();
 278             }
 279
 280             if (animate) {
 281                 $('#myLine').animate({
 282                     opacity: 1,
 283                     width: '600px',
 284                     height: '250px',
 285                     left: '-=300px',
 286                     top: '-=125px'
 287                 }, 1000);
 288
 289                 animate = true;
 290             }
 291         }
 292     </script>
 293
 294     <p>
 295         You can if you prefer use an external library for animation, like jQuery.
 296     </p>
 297
 298     <p>
 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
 301         attributes set.
 302     </p>
 303
 304     <p>
 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.
 307     </p>
 308
 309
 310     <br clear="all" />
 311     <br />
 312 </body>
 313 </html>