3 <title>isZoomedIgnoresProgrammaticZoom Flag
</title>
5 <script type=
"text/javascript" src=
"../excanvas.js"></script>
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>
14 <h1 id=
"zoom">Determining Zoom
</h1>
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.
21 <p>Here's a simple example using
<code>drawCallback
</code> to display the various zoom states whenever the chart is zoomed:
</p>
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/>
30 <div class=
"codeoutput" style=
"float:left;">
31 <div id=
"zoomdiv"></div>
32 <script type=
"text/javascript">
36 document.getElementById(
"zoomdiv"),
38 // CSV or path to a CSV file.
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");
61 <div style=
"clear:both; width:600px; text-align:center; font-weight: bold; font-size: 125%;">HTML
</div>
67 document.getElementById(
"zoomdiv
"),
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",
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
");
90 <p>The
<a href=
"tests/zoom.html">Tests for zoom operations
</a> show a full example of this in action.
</p>
92 <h3>Programmatic Zoom
</h3>
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.
100 The
<a href=
"tests/is-zoomed-ignore-programmatic-zoom.html">is-zoomed-ignore-programmatic-zoom
</a> test shows this in operation.