RGraph/docs/zoom.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 - Zooming your graphs</title>
  22
  23     <meta name="keywords" content="rgraph html5 canvas graph docs zoom" />
  24     <meta name="description" content="RGraph: HTML5 canvas graph software - Documentation about zooming 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.common.annotate.js" ></script>
  31     <script src="../libraries/RGraph.common.context.js" ></script>
  32     <script src="../libraries/RGraph.common.zoom.js" ></script>
  33     <script src="../libraries/RGraph.bar.js" ></script>
  34     <script src="../libraries/RGraph.line.js" ></script>
  35     <!--[if IE 8]><script src="../excanvas/excanvas.compressed.js"></script><![endif]-->
  36
  37     <style>
  38         .RGraph_zoom_window {
  39             border: 2px solid #ccc ! important;
  40             box-shadow: 0 0 15px #aaa ! important;;
  41             -moz-box-shadow: 0 0 15px #aaa ! important;
  42             -webkit-box-shadow: 0 0 15px #aaa ! important;
  43         }
  44     </style>
  45 </head>
  46
  47 <body>
  48
  49     <!-- Social networking buttons -->
  50     <script src="../libraries/RGraph.common.core.js" ></script>
  51
  52     <script>
  53         function HideTwitterDIV ()
  54         {
  55             document.getElementById("twitter_div").style.opacity = 0;
  56             document.getElementById("twitter_div").style.display = 'none';
  57         }
  58
  59
  60         function ShowTwitterDIV (e)
  61         {
  62             var e   = RGraph.FixEventObject(document.all ? event : e);
  63             var div = document.getElementById("twitter_div");
  64             var img = document.getElementById("twitter_icon");
  65
  66             div.style.display = 'block';
  67             div.style.left    = (RGraph.getCanvasXY(img)[0] + img.offsetWidth - div.offsetWidth + 110) + 'px';
  68             div.style.top     = (RGraph.getCanvasXY(img)[1] - 1) + 'px';
  69
  70             /**
  71             * Fade it in
  72             */
  73             setTimeout('document.getElementById("twitter_div").style.opacity = 0.2;', 25);
  74             setTimeout('document.getElementById("twitter_div").style.opacity = 0.4;', 50);
  75             setTimeout('document.getElementById("twitter_div").style.opacity = 0.6;', 100);
  76             setTimeout('document.getElementById("twitter_div").style.opacity = 0.8;', 125);
  77             setTimeout('document.getElementById("twitter_div").style.opacity = 1.0;', 150);
  78
  79             e.stopPropagation();
  80
  81             return false;
  82         }
  83
  84         /**
  85         * This code installs the event handler that hides the Twitter DIV
  86         */
  87         if (RGraph.isIE8()) {
  88              window.attachEvent('onload', function () {document.body.attachEvent('onclick', HideTwitterDIV);});
  89         } else {
  90             window.addEventListener('click', HideTwitterDIV, false);
  91         }
  92     </script>
  93
  94     <!-- The twitter DIV -->
  95     <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;">
  96         <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>
  97         <a href="http://twitter.com/_rgraph" style="text-decoration: none" rel="nofollow" target="_blank">Follow for HTML5 news</a>
  98     </div>
  99
 100     <div id="social_icons" class="warning" style="top: 0; left: 5px; position: absolute">
 101         <script>
 102             // Opera fix
 103             if (navigator.userAgent.indexOf('Opera') == -1) {
 104               document.getElementById("social_icons").style.position = 'fixed';
 105               document.getElementById("twitter_div").style.position = 'fixed';
 106
 107             }
 108         </script>
 109
 110         <b style="display: inline-block; position: relative; top: 1px">Bookmark and share:</b>
 111
 112
 113             <div id="social">
 114                 <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">
 115                     <img src="../images/delicious.png" alt="Bookmark with delicious" width="22" height="22" border="0" align="absmiddle" />
 116                 </a>
 117
 118                 <a href="" target="_blank" onmouseover="if (document.getElementById('twitter_div').style.display == 'none') ShowTwitterDIV(event);" onclick="event.stopPropagation(); event.cancelBubble = true; return false">
 119                     <img src="../images/twitter.png" id="twitter_icon" alt="tweet this site" width="22" height="22" border="0" align="absmiddle" />
 120                 </a>
 121
 122
 123 <!--
 124                 <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">
 125                     <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"/>
 126                 </a>
 127
 128
 129                 <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">
 130                     <img src="../images/facebook.png" width="22" height="22" alt="Post to Facebook" align="absmiddle" style="position: relative; top: -2px; border: 0" border="0"/>
 131                 </a>
 132
 133                 <a href="mailto:share@friendfeed.com" title="Share on FriendFeed">
 134                     <img src="../images/friendfeed.png" width="22" height="22" alt="Share on FriendFeed" border="0" align="absmiddle" />
 135                 </a>
 136
 137                 <a href="http://www.stumbleupon.com/submit?url=http://www.rgraph.net" target="_blank" title="Share on StumbleUpon" >
 138                     <img src="../images/stumble.png" alt="Stumble! this site" width="22" height="22" border="0" align="absmiddle" />
 139                 </a>
 140 -->
 141             </div>
 142     </div>
 143     <!-- /Social networking buttons -->
 144
 145     <div id="breadcrumb">
 146         <a href="../index.html">RGraph: HTML5 canvas graph library</a>
 147         >
 148         <a href="index.html">Documentation</a>
 149         >
 150         Zooming your graphs
 151     </div>
 152
 153     <h1>RGraph: HTML5 canvas graph library - Zooming your graphs</h1>
 154
 155     <script>
 156         if (RGraph.isIE8()) {
 157             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>');
 158         }
 159     </script>
 160
 161
 162     <ul>
 163         <li><a href="#canvas">Canvas mode</a></li>
 164         <li><a href="#thumbnail">Thumbnail mode</a></li>
 165         <li><a href="#area">Area mode</a></li>
 166     </ul>
 167
 168
 169     <a name="canvas"></a>
 170     <h2>Canvas mode</h2>
 171
 172     <table border="0" width="100%">
 173         <tr>
 174             <td>
 175                 <p>
 176                     As of November 2009 RGraph has had the ability to provide a zoom facility. It's designed to be used in
 177                     conjunction with a context menu as in the example to the right.
 178                 </p>
 179
 180                 <p>
 181                     You can control the zoom using these properties:
 182                 </p>
 183
 184                 <ul>
 185                     <li>chart.zoom.mode<i>Default: canvas</i></li>
 186                     <li>chart.zoom.factor<i>Default: 1.5</i></li>
 187                     <li>chart.zoom.fade.in <i>Default: true</i></li>
 188                     <li>chart.zoom.fade.out <i>Default: true</i></li>
 189                     <li>chart.zoom.hdir <i>Default: right</i></li>
 190                     <li>chart.zoom.vdir <i>Default: down</i></li>
 191                     <li>chart.zoom.delay <i>Default: 50</i></li>
 192                     <li>chart.zoom.frames <i>Default: 10</i></li>
 193                     <li>chart.zoom.shadow <i>Default: true</i></li>
 194                     <li>chart.zoom.mode <i>Default: canvas</i></li>
 195                     <li>chart.zoom.thumbnail.width <i>Default: 75</i></li>
 196                     <li>chart.zoom.thumbnail.height <i>Default: 75</i></li>
 197                     <li>chart.zoom.background <i>Default: true</i></li>
 198                 </ul>
 199             </td>
 200
 201             <td style="text-align: center">
 202                 <canvas width="600" height="250" id="myc">[No canvas support]</canvas>
 203             </td>
 204         </tr>
 205
 206         <tr>
 207             <td colspan="2">
 208                 The possible values of <i>chart.zoom.hdir</i> are: <i>left</i>, <i>center</i>, <i>right</i>.
 209                 The possible values of <i>chart.zoom.vdir</i> are: <i>up</i>, <i>center</i>, <i>down</i>. <i>chart.zoom.delay</i>
 210                 is the delay in between frames (in milliseconds) and <i>chart.zoom.frames</i> is the number of frames in the zoom. <i>chart.zoom.shadow</i>
 211                 is whether the zoomed canvas has a shadow or not. The possible values of <i>chart.zoom.mode</i> are <i>canvas</i> (default)
 212                 and <i>thumbnail</i>.
 213             </td>
 214         </tr>
 215     </table>
 216
 217     <script>
 218         window.onload = function ()
 219         {
 220             var graph = new RGraph.Bar('myc', [[4,6],[6, 8],[8,6],[7,5],[9,4],[4,7],[3,5],[8,6],[7,6],[4,7],[5,4],[5,6],[6,4]]);
 221             graph.Set('chart.colors', ['#f66', '#66f']);
 222             graph.Set('chart.strokecolor', 'rgba(0,0,0,0)');
 223             graph.Set('chart.labels', ['Fry','Hav','Jim','Moo','Io','Olga','Tim','Gaz','Jake','Pippa','Lou','Fred','John']);
 224
 225             if (!RGraph.isIE8()) {
 226                 graph.Set('chart.contextmenu', [
 227                                                 ['Clear annotations', function () {RGraph.Clear(graph.canvas); graph.Draw();}],
 228                                                 ['Zoom in', RGraph.Zoom]
 229                                                ]);
 230                 graph.Set('chart.annotatable', true);
 231                 graph.Set('chart.zoom.hdir', 'left');
 232                 graph.Set('chart.zoom.factor', 1.5);
 233                 graph.Set('chart.zoom.vdir', 'center');
 234                 graph.Set('chart.zoom.frames', 50); // Number of frames
 235                 graph.Set('chart.zoom.delay', 5);  // Delay between each frame
 236                 graph.Set('chart.zoom.shadow', 'rgba(0,0,0,0.7)');  // Show a shadow on the zoomed graph
 237                 graph.Set('chart.zoom.background', true);
 238             }
 239
 240             graph.Set('chart.title', 'Chart with zoom (context, annotatable)');
 241             graph.Set('chart.shadow', true);
 242             graph.Set('chart.shadow.color', '#999');
 243             graph.Draw();
 244
 245             var myLine = new RGraph.Line('myc2', [40,48,45,64,34,22,23,56,56,54,84,44], [4,5,6,7,20,21,1,9,9,8,5,4]);
 246             myLine.Set('chart.labels', ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']);
 247             myLine.Set('chart.hmargin', 10);
 248             myLine.Set('chart.linewidth', 3);
 249             myLine.Set('chart.title', 'A sample line chart');
 250             myLine.Set('chart.colors', ['red', 'black']);
 251             myLine.Set('chart.shadow', true);
 252
 253             if (!RGraph.isIE8()) {
 254                 myLine.Set('chart.contextmenu', [['Zoom entire graph', RGraph.Zoom]]);
 255                 myLine.Set('chart.zoom.delay', 15);
 256                 myLine.Set('chart.zoom.factor', 1.5);
 257                 myLine.Set('chart.zoom.mode', 'thumbnail');
 258                 myLine.Set('chart.zoom.vdir', 'center');
 259                 myLine.Set('chart.zoom.thumbnail.width', 100);
 260                 myLine.Set('chart.zoom.thumbnail.height', 100);
 261             }
 262             myLine.Draw();
 263
 264             myLine2 = new RGraph.Line('myc3', [15,30,62,26,46,86,48,51,51,35,32, 35]);
 265             myLine2.Set('chart.background.grid.width', 0.5);
 266             myLine2.Set('chart.shadow.offsetx', 1);
 267             myLine2.Set('chart.shadow.offsety', 1);
 268             myLine2.Set('chart.shadow.blur', 2);
 269             myLine2.Set('chart.shadow', true);
 270             myLine2.Set('chart.zoom.mode', 'area');
 271             myLine2.Set('chart.hmargin', 10);
 272             myLine2.Set('chart.linewidth', 2);
 273             myLine2.Set('chart.title', 'A graph with zoom in area mode');
 274             myLine2.Set('chart.tickmarks', 'endcircle');
 275             myLine2.Set('chart.labels', ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']);
 276             myLine2.Draw();
 277         }
 278     </script>
 279
 280     <br clear="all" />
 281
 282     <pre class="code">
 283 &lt;script&gt;
 284     var graph = new RGraph.Line('myc', [4,6,8,7,9,4,3,8,7,4,5,5,5]);
 285     graph.Set('chart.labels', ['Fry','Hav','Jim','Moo','Io','Olga','Tim','Gaz','Jake','Pippa','Lou','Fred','John']);
 286     graph.Set('chart.contextmenu', [
 287                                     ['Clear annotations', function () {RGraph.Clear(graph.canvas); graph.Draw();}],
 288                                     ['Zoom in', RGraph.Zoom]
 289                                    ]);
 290     graph.Set('chart.title', 'Chart with zoom (context, annotatable)');
 291     graph.Set('chart.shadow', true);
 292     graph.Set('chart.annotatable', true);
 293     graph.Draw();
 294 &lt;/script&gt;
 295 </pre>
 296
 297
 298     <a name="thumbnail"></a>
 299     <h2>Thumbnail mode</h2>
 300
 301     <canvas id="myc2" width="600" height="250" style="float: left">[No canvas support]</canvas>
 302
 303     <p>
 304         The zoom has an alternative thumbnail mode, which displays a small thumbnail zoom instead of zooming the entire canvas.
 305         The graph to the left shows an example of this.
 306     </p>
 307
 308     <p>
 309         It uses some of the same properties as the regular zoom, eg <i>chart.fade.in</i>, <i>chart.fade.out</i>, <i>chart.zoom.shadow</i>
 310     </p>
 311
 312     <br clear="all" />
 313
 314     <pre class="code">
 315 &lt;script&gt;
 316     var myLine = new RGraph.Line('myc2', [40,48,45,64,34,22,23,56,56,54,84,44], [4,5,6,7,20,21,1,9,9,8,5,4]);
 317     myLine.Set('chart.labels', ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']);
 318     myLine.Set('chart.hmargin', 10);
 319     myLine.Set('chart.linewidth', 3);
 320     myLine.Set('chart.title', 'A sample line chart');
 321     myLine.Set('chart.zoom.mode', 'thumbnail');
 322     myLine.Set('chart.zoom.vdir', 'center');
 323     myLine.Set('chart.zoom.thumbnail.width', 100);
 324     myLine.Set('chart.zoom.thumbnail.height', 100);
 325     myLine.Set('chart.colors', ['red', 'black']);
 326     myLine.Set('chart.shadow', true);
 327     myLine.Set('chart.contextmenu', [['Zoom entire graph', RGraph.Zoom]]);
 328 &lt;/script&gt;
 329 </pre>
 330
 331     <p>
 332         <b>Making the zoom circular</b><br /><br />
 333         <img src="../images/border-radius.png" width="171" height="159" alt="A circular zoom window" style="float: right; border: 1px gray solid" />
 334         It is possible to make the zoom in area mode circular by utilising the <i>border-radius</i> CSS property. Currently support for
 335         this is limited to FireFox 4b7+, so it's not part of the main RGraph software. The CSS ncessary to achieve this is
 336         thus:
 337     </p>
 338
 339     <pre class="code" style="width: 700px" />
 340 &lt;style&gt;
 341     .RGraph_zoom_window {
 342         border-radius: 50px ! important;
 343     }
 344 &lt;/style&gt;
 345 </pre>
 346
 347     This a graph demonstrating this technique <a href="zoom_thumbnail.html">here</a>. Note that browser support for this technique is limited.
 348
 349     <br clear="all" />
 350
 351
 352     <a name="area"></a>
 353     <h2>Area mode</h2>
 354
 355     <canvas id="myc3" width="600" height="250" style="float: right">[No canvas support]</canvas>
 356
 357     <p>
 358         Another type of zoom available is <i>area</i>. This is somewhat similar to thumbnail, but allows you to draw a rectangle around
 359         the specific area that you want to zoom.
 360     </p>
 361
 362     <p>
 363         Again, this uses some common zoom properties, such as <i>chart.zoom.factor</i>.
 364     </p>
 365
 366     <p>
 367         Once visible, you can drag the zoomed area around with the left mouse button (a left drag), and drag the zoomed canvas around
 368         within the zoom by using the right mouse button (a right-drag). And a double click will expand the zoomed area to cover the
 369         whole canvas.
 370     </p>
 371
 372     <br clear="all" />
 373
 374     <pre class="code">
 375 &lt;script&gt;
 376     var myLine = new RGraph.Line('myc3', [15,30,62,26,46,86,48,51,51,35,32, 35]);
 377     myLine.Set('chart.zoom.mode', 'area');
 378     myLine.Set('chart.hmargin', 10);
 379     myLine.Set('chart.linewidth', 1);
 380     myLine.Set('chart.title', 'A graph with zoom in area mode');
 381     myLine.Set('chart.tickmarks', 'endcircle');
 382     myLine.Set('chart.labels', ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']);
 383     myLine.Draw();
 384 &lt;script&gt;
 385 </pre>
 386
 387 </body>
 388 </html>