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