source: Dev/trunk/RGraph/docs/zoom.html @ 77

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

RGraph
File size: 15.1 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 - Zooming your charts</title>
22   
23    <meta name="keywords" content="rgraph html5 canvas chart docs zoom" />
24    <meta name="description" content="RGraph: Javascript charts and graph library - Documentation about zooming your charts" />
25   
26    <meta property="og:title" content="RGraph: Javascript charts and graph library" />
27    <meta property="og:description" content="A charts library based on the HTML5 canvas tag" />
28    <meta property="og:image" content="http://www.rgraph.net/images/logo.jpg"/>
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.common.annotate.js" ></script>
35    <script src="../libraries/RGraph.common.context.js" ></script>
36    <script src="../libraries/RGraph.common.zoom.js" ></script>
37    <script src="../libraries/RGraph.bar.js" ></script>
38    <script src="../libraries/RGraph.line.js" ></script>
39    <!--[if IE 8]><script src="../excanvas/excanvas.original.js"></script><![endif]-->
40   
41    <style>
42        .RGraph_zoom_window {
43            border: 2px solid #ccc ! important;
44            box-shadow: 0 0 15px #aaa ! important;;
45            -moz-box-shadow: 0 0 15px #aaa ! important;
46            -webkit-box-shadow: 0 0 15px #aaa ! important;
47        }
48    </style>
49
50    <script>
51      var _gaq = _gaq || [];
52      _gaq.push(['_setAccount', 'UA-54706-2']);
53      _gaq.push(['_trackPageview']);
54   
55      (function() {
56        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
57        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
58        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
59      })();
60    </script>
61
62</head>
63
64<body>
65
66   
67    <!-- Social networking buttons -->
68        <div id="social_icons" class="warning" style="border-radius: 10px; top: 1px; position: fixed">
69            <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>
70            <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>
71        </div>
72
73        <script>
74            // Opera fix
75            if (navigator.userAgent.indexOf('Opera') == -1) {
76              document.getElementById("social_icons").style.position = 'fixed';
77            }
78        </script>
79    <!-- Social networking buttons -->
80
81    <div id="breadcrumb">
82        <a href="../index.html">RGraph: Javascript charts and graph library</a>
83        >
84        <a href="index.html">Documentation</a>
85        >
86        Zooming your charts
87    </div>
88
89    <h1>RGraph: <span>Javascript charts and graph library</span> - Zooming your charts</h1>
90
91    <script>
92        if (RGraph.isIE8()) {
93            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>');
94        }
95    </script>
96
97
98    <ul>
99        <li><a href="#canvas">Canvas mode</a></li>
100        <li><a href="#thumbnail">Thumbnail mode</a></li>
101        <li><a href="#area">Area mode</a></li>
102    </ul>
103
104
105    <a name="canvas"></a>
106    <h2>Canvas mode</h2>
107
108    <table border="0" width="100%">
109        <tr>
110            <td>
111                <p>
112                    As of November 2009 RGraph has had the ability to provide a zoom facility. It's designed to be used in
113                    conjunction with a context menu as in the example to the right.
114                </p>
115
116                <p>
117                    You can control the zoom using these properties:
118                </p>
119               
120                <ul>
121                    <li>chart.zoom.mode<i>Default: canvas</i></li>
122                    <li>chart.zoom.factor<i>Default: 1.5</i></li>
123                    <li>chart.zoom.fade.in <i>Default: true</i></li>
124                    <li>chart.zoom.fade.out <i>Default: true</i></li>
125                    <li>chart.zoom.hdir <i>Default: right</i></li>
126                    <li>chart.zoom.vdir <i>Default: down</i></li>
127                    <li>chart.zoom.delay <i>Default: 50</i></li>
128                    <li>chart.zoom.frames <i>Default: 10</i></li>
129                    <li>chart.zoom.shadow <i>Default: true</i></li>
130                    <li>chart.zoom.mode <i>Default: canvas</i></li>
131                    <li>chart.zoom.thumbnail.width <i>Default: 75</i></li>
132                    <li>chart.zoom.thumbnail.height <i>Default: 75</i></li>
133                    <li>chart.zoom.background <i>Default: true</i></li>
134                </ul>
135            </td>
136
137            <td style="text-align: center">
138                <canvas width="600" height="250" id="myc">[No canvas support]</canvas>
139            </td>
140        </tr>
141       
142        <tr>
143            <td colspan="2">
144                The possible values of <i>chart.zoom.hdir</i> are: <i>left</i>, <i>center</i>, <i>right</i>.
145                The possible values of <i>chart.zoom.vdir</i> are: <i>up</i>, <i>center</i>, <i>down</i>. <i>chart.zoom.delay</i>
146                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>
147                is whether the zoomed canvas has a shadow or not. The possible values of <i>chart.zoom.mode</i> are <i>canvas</i> (default)
148                and <i>thumbnail</i>.
149            </td>
150        </tr>
151    </table>
152
153    <script>
154        window.onload = function ()
155        {
156            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]]);
157            graph.Set('chart.colors', ['#f66', '#66f']);
158            graph.Set('chart.strokecolor', 'rgba(0,0,0,0)');
159            graph.Set('chart.labels', ['Fry','Hav','Jim','Moo','Io','Olga','Tim','Gaz','Jake','Pippa','Lou','Fred','John']);
160           
161            if (!RGraph.isIE8()) {
162                graph.Set('chart.contextmenu', [
163                                                ['Clear annotations', function () {RGraph.Clear(graph.canvas); graph.Draw();}],
164                                                ['Zoom in', RGraph.Zoom]
165                                               ]);
166                graph.Set('chart.annotatable', true);
167                graph.Set('chart.zoom.hdir', 'left');
168                graph.Set('chart.zoom.factor', 1.5);
169                graph.Set('chart.zoom.vdir', 'center');
170                graph.Set('chart.zoom.frames', 50); // Number of frames
171                graph.Set('chart.zoom.delay', 5);  // Delay between each frame
172                graph.Set('chart.zoom.shadow', 'rgba(0,0,0,0.7)');  // Show a shadow on the zoomed chart
173                graph.Set('chart.zoom.background', true);
174            }
175
176            graph.Set('chart.title', 'Chart with zoom (context, annotatable)');
177            graph.Set('chart.shadow', true);
178            graph.Set('chart.shadow.color', '#999');
179            graph.Draw();
180
181            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]);
182            myLine.Set('chart.labels', ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']);
183            myLine.Set('chart.hmargin', 10);
184            myLine.Set('chart.linewidth', 3);
185            myLine.Set('chart.title', 'A sample line chart');
186            myLine.Set('chart.colors', ['red', 'black']);
187            myLine.Set('chart.shadow', true);
188           
189            if (!RGraph.isIE8()) {
190                myLine.Set('chart.contextmenu', [['Zoom entire chart', RGraph.Zoom]]);
191                myLine.Set('chart.zoom.delay', 15);
192                myLine.Set('chart.zoom.factor', 1.5);
193                myLine.Set('chart.zoom.mode', 'thumbnail');
194                myLine.Set('chart.zoom.vdir', 'center');
195                myLine.Set('chart.zoom.thumbnail.width', 100);
196                myLine.Set('chart.zoom.thumbnail.height', 100);
197            }
198            myLine.Draw();
199           
200            myLine2 = new RGraph.Line('myc3', [15,30,62,26,46,86,48,51,51,35,32, 35]);
201            myLine2.Set('chart.background.grid.width', 0.5);
202            myLine2.Set('chart.shadow.offsetx', 1);
203            myLine2.Set('chart.shadow.offsety', 1);
204            myLine2.Set('chart.shadow.blur', 2);
205            myLine2.Set('chart.shadow', true);
206            myLine2.Set('chart.zoom.mode', 'area');
207            myLine2.Set('chart.hmargin', 10);
208            myLine2.Set('chart.linewidth', 2);
209            myLine2.Set('chart.title', 'A chart with zoom in area mode');
210            myLine2.Set('chart.tickmarks', 'endcircle');
211            myLine2.Set('chart.labels', ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']);
212            myLine2.Draw();
213        }
214    </script>
215
216    <br clear="all" />
217
218    <pre class="code">
219&lt;script&gt;
220    var graph = new RGraph.Line('myc', [4,6,8,7,9,4,3,8,7,4,5,5,5]);
221    graph.Set('chart.labels', ['Fry','Hav','Jim','Moo','Io','Olga','Tim','Gaz','Jake','Pippa','Lou','Fred','John']);
222    graph.Set('chart.contextmenu', [
223                                    ['Clear annotations', function () {RGraph.Clear(graph.canvas); graph.Draw();}],
224                                    ['Zoom in', RGraph.Zoom]
225                                   ]);
226    graph.Set('chart.title', 'Chart with zoom (context, annotatable)');
227    graph.Set('chart.shadow', true);
228    graph.Set('chart.annotatable', true);
229    graph.Draw();
230&lt;/script&gt;
231</pre>
232
233
234    <a name="thumbnail"></a>
235    <h2>Thumbnail mode</h2>
236   
237    <canvas id="myc2" width="600" height="250" style="float: left">[No canvas support]</canvas>
238
239    <p>
240        The zoom has an alternative thumbnail mode, which displays a small thumbnail zoom instead of zooming the entire canvas.
241        The chart to the left shows an example of this.
242    </p>
243
244    <p>
245        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>
246    </p>
247
248    <br clear="all" />
249
250    <pre class="code">
251&lt;script&gt;
252    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]);
253    myLine.Set('chart.labels', ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']);
254    myLine.Set('chart.hmargin', 10);
255    myLine.Set('chart.linewidth', 3);
256    myLine.Set('chart.title', 'A sample line chart');
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    myLine.Set('chart.colors', ['red', 'black']);
262    myLine.Set('chart.shadow', true);
263    myLine.Set('chart.contextmenu', [['Zoom entire chart', RGraph.Zoom]]);
264&lt;/script&gt;
265</pre>
266
267    <p>
268        <b>Making the zoom circular</b><br /><br />
269        <img src="../images/border-radius.png" width="171" height="159" alt="A circular zoom window" style="float: right; border: 1px gray solid" />
270        It is possible to make the zoom in area mode circular by utilising the <i>border-radius</i> CSS property. Currently support for
271        this is limited to FireFox 4b7+ and MSIE9, so it's not part of the main RGraph software. The CSS ncessary to achieve this is
272        thus:
273    </p>
274   
275    <pre class="code" style="width: 700px" />
276&lt;style&gt;
277    .RGraph_zoom_window {
278        border-radius: 50px ! important;
279    }
280&lt;/style&gt;
281</pre>
282   
283    This a chart demonstrating this technique <a href="zoom_thumbnail.html">here</a>. Note that browser support for this technique is limited.
284   
285    <br clear="all" />
286
287
288    <a name="area"></a>
289    <h2>Area mode</h2>
290   
291    <canvas id="myc3" width="600" height="250" style="float: right">[No canvas support]</canvas>   
292   
293    <p>
294        Another type of zoom available is <i>area</i>. This is somewhat similar to thumbnail, but allows you to draw a rectangle around
295        the specific area that you want to zoom.
296    </p>
297   
298    <p>
299        Again, this uses some common zoom properties, such as <i>chart.zoom.factor</i>.
300    </p>
301   
302    <p>
303        Once visible, you can drag the zoomed area around with the left mouse button (a left drag), and drag the zoomed canvas around
304        within the zoom by using the right mouse button (a right-drag). And a double click will expand the zoomed area to cover the
305        whole canvas.
306    </p>
307
308    <br clear="all" />
309
310    <pre class="code">
311&lt;script&gt;
312    var myLine = new RGraph.Line('myc3', [15,30,62,26,46,86,48,51,51,35,32, 35]);
313    myLine.Set('chart.zoom.mode', 'area');
314    myLine.Set('chart.hmargin', 10);
315    myLine.Set('chart.linewidth', 1);
316    myLine.Set('chart.title', 'A chart with zoom in area mode');
317    myLine.Set('chart.tickmarks', 'endcircle');
318    myLine.Set('chart.labels', ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']);
319    myLine.Draw();
320&lt;script&gt;
321</pre>
322
323</body>
324</html>
Note: See TracBrowser for help on using the repository browser.