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 - Zooming your graphs</title>
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" />
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.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]-->
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;
49 <!-- Social networking buttons -->
50 <script src="../libraries/RGraph.common.core.js" ></script>
53 function HideTwitterDIV ()
55 document.getElementById("twitter_div").style.opacity = 0;
56 document.getElementById("twitter_div").style.display = 'none';
60 function ShowTwitterDIV (e)
62 var e = RGraph.FixEventObject(document.all ? event : e);
63 var div = document.getElementById("twitter_div");
64 var img = document.getElementById("twitter_icon");
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';
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);
85 * This code installs the event handler that hides the Twitter DIV
88 window.attachEvent('onload', function () {document.body.attachEvent('onclick', HideTwitterDIV);});
90 window.addEventListener('click', HideTwitterDIV, false);
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 about RGraph</a><br>
97 <a href="http://twitter.com/_rgraph" style="text-decoration: none" rel="nofollow" target="_blank">Follow for HTML5 news</a>
100 <div id="social_icons" class="warning" style="top: 0; left: 5px; position: absolute">
103 if (navigator.userAgent.indexOf('Opera') == -1) {
104 document.getElementById("social_icons").style.position = 'fixed';
105 document.getElementById("twitter_div").style.position = 'fixed';
110 <b style="display: inline-block; position: relative; top: 1px">Bookmark and share:</b>
114 <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">
115 <img src="../images/delicious.png" alt="Bookmark with delicious" width="22" height="22" border="0" align="absmiddle" />
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" />
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"/>
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"/>
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" />
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" />
143 <!-- /Social networking buttons -->
145 <div id="breadcrumb">
146 <a href="../index.html">RGraph: HTML5 canvas graph library</a>
148 <a href="index.html">Documentation</a>
153 <h1>RGraph: HTML5 canvas graph library - Zooming your graphs</h1>
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>');
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>
169 <a name="canvas"></a>
172 <table border="0" width="100%">
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.
181 You can control the zoom using these properties:
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>
201 <td style="text-align: center">
202 <canvas width="600" height="250" id="myc">[No canvas support]</canvas>
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>.
218 window.onload = function ()
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']);
225 if (!RGraph.isIE8()) {
226 graph.Set('chart.contextmenu', [
227 ['Clear annotations', function () {RGraph.Clear(graph.canvas); graph.Draw();}],
228 ['Zoom in', RGraph.Zoom]
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);
240 graph.Set('chart.title', 'Chart with zoom (context, annotatable)');
241 graph.Set('chart.shadow', true);
242 graph.Set('chart.shadow.color', '#999');
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);
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);
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']);
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]
290 graph.Set('chart.title', 'Chart with zoom (context, annotatable)');
291 graph.Set('chart.shadow', true);
292 graph.Set('chart.annotatable', true);
298 <a name="thumbnail"></a>
299 <h2>Thumbnail mode</h2>
301 <canvas id="myc2" width="600" height="250" style="float: left">[No canvas support]</canvas>
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.
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>
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]]);
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
339 <pre class="code" style="width: 700px" />
341 .RGraph_zoom_window {
342 border-radius: 50px ! important;
347 This a graph demonstrating this technique <a href="zoom_thumbnail.html">here</a>. Note that browser support for this technique is limited.
355 <canvas id="myc3" width="600" height="250" style="float: right">[No canvas support]</canvas>
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.
363 Again, this uses some common zoom properties, such as <i>chart.zoom.factor</i>.
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
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']);