Commit | Line | Data |
---|---|---|
e5152598 NN |
1 | <html> |
2 | <head> | |
3 | <title>isZoomedIgnoresProgrammaticZoom Flag</title> | |
4 | <!--[if IE]> | |
5 | <script type="text/javascript" src="../excanvas.js"></script> | |
6 | <![endif]--> | |
7 | <script type="text/javascript" src="../strftime/strftime-min.js"></script> | |
8 | <script type="text/javascript" src="../rgbcolor/rgbcolor.js"></script> | |
9 | <script type="text/javascript" src="../dygraph-canvas.js"></script> | |
10 | <script type="text/javascript" src="../dygraph.js"></script> | |
11 | <script type="text/javascript" src="data.js"></script> | |
12 | </head> | |
13 | <body> | |
14 | <h1 id="zoom">Determining Zoom</h1> | |
15 | <p> | |
16 | It is possible to detect whether a chart has been zoomed in either axis by the use of the <code>isZoomed</code> function. | |
17 | If called with no argument, it will report whether <em>either</em> axis has been zoomed. | |
18 | Alternatively it can be called with an argument of either <code>'x'</code> or <code>'y'</code> and it will report the status of just that axis. | |
19 | </p> | |
20 | ||
21 | <p>Here's a simple example using <code>drawCallback</code> to display the various zoom states whenever the chart is zoomed:</p> | |
22 | ||
23 | <div style="width:600px; text-align:center; font-weight: bold; font-size: 125%;">OUTPUT</div> | |
24 | <div style="width: 750px"> | |
25 | <div style="float: right"> | |
26 | <p>Zoomed: <span id="zoomed">False</span><p/> | |
27 | <p>Zoomed X: <span id="zoomedX">False</span><p/> | |
28 | <p>Zoomed Y: <span id="zoomedY">False</span><p/> | |
29 | </div> | |
30 | <div class="codeoutput" style="float:left;"> | |
31 | <div id="zoomdiv"></div> | |
32 | <script type="text/javascript"> | |
33 | new Dygraph( | |
34 | ||
35 | // containing div | |
36 | document.getElementById("zoomdiv"), | |
37 | ||
38 | // CSV or path to a CSV file. | |
39 | "Date,Value\n" + | |
40 | "2011-01-07,75\n" + | |
41 | "2011-01-08,70\n" + | |
42 | "2011-01-09,90\n" + | |
43 | "2011-01-10,30\n" + | |
44 | "2011-01-11,40\n" + | |
45 | "2011-01-12,60\n" + | |
46 | "2011-01-13,70\n" + | |
47 | "2011-01-14,40\n", | |
48 | { | |
49 | drawCallback: function(me, initial) { | |
50 | document.getElementById("zoomed").innerHTML = "" + me.isZoomed(); | |
51 | document.getElementById("zoomedX").innerHTML = "" + me.isZoomed("x"); | |
52 | document.getElementById("zoomedY").innerHTML = "" + me.isZoomed("y"); | |
53 | } | |
54 | } | |
55 | ); | |
56 | </script> | |
57 | </div> | |
58 | </div> | |
59 | ||
60 | <p> | |
61 | <div style="clear:both; width:600px; text-align:center; font-weight: bold; font-size: 125%;">HTML</div> | |
62 | ||
63 | <pre> | |
64 | new Dygraph( | |
65 | ||
66 | // containing div | |
67 | document.getElementById("zoomdiv"), | |
68 | ||
69 | // CSV or path to a CSV file. | |
70 | "Date,Temperature\n" + | |
71 | "2011-01-07,75\n" + | |
72 | "2011-01-08,70\n" + | |
73 | "2011-01-09,90\n" + | |
74 | "2011-01-10,30\n" + | |
75 | "2011-01-11,40\n" + | |
76 | "2011-01-12,60\n" + | |
77 | "2011-01-13,70\n" + | |
78 | "2011-01-14,40\n", | |
79 | { | |
80 | drawCallback: function(me, initial) { | |
81 | document.getElementById("zoomed").innerHTML = "" + me.isZoomed(); | |
82 | document.getElementById("zoomedX").innerHTML = "" + me.isZoomed("x"); | |
83 | document.getElementById("zoomedY").innerHTML = "" + me.isZoomed("y"); | |
84 | } | |
85 | } | |
86 | ); | |
87 | </pre> | |
88 | </p> | |
89 | ||
90 | <p>The <a href="tests/zoom.html">Tests for zoom operations</a> show a full example of this in action.</p> | |
91 | ||
92 | <h3>Programmatic Zoom</h3> | |
93 | <p> | |
94 | When a chart is programmatically zoomed by updating either the <code>dateWindow</code> | |
95 | or <code>valueRange</code> option, by default the zoomed flags are also updated correspondingly. | |
96 | It is possible to prevent this by specifying the <code>isZoomedIgnoreProgrammaticZoom</code> in the same | |
97 | call to the <code>updateOptions</code> method. | |
98 | </p> | |
99 | <p> | |
100 | The <a href="tests/is-zoomed-ignore-programmatic-zoom.html">is-zoomed-ignore-programmatic-zoom</a> test shows this in operation. | |
101 | </p> | |
102 | </body> | |
103 | </html> |