3 <link rel=
"stylesheet" href=
"../dist/dygraph.css">
4 <title>isZoomed method
</title>
5 <script type=
"text/javascript" src=
"../dist/dygraph.js"></script>
7 <script type=
"text/javascript" src=
"data.js"></script>
10 <h1 id=
"zoom">Determining Zoom
</h1>
12 It is possible to detect whether a chart has been zoomed in either axis by the use of the
<code>isZoomed
</code> function.
13 If called with no argument, it will report whether
<em>either
</em> axis has been zoomed.
14 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.
17 <p>Here's a simple example using
<code>drawCallback
</code> to display the various zoom states whenever the chart is zoomed:
</p>
19 <div style=
"width:600px; text-align:center; font-weight: bold; font-size: 125%;">OUTPUT
</div>
20 <div style=
"width: 750px">
21 <div style=
"float: right">
22 <p>Zoomed:
<span id=
"zoomed">False
</span><p/>
23 <p>Zoomed X:
<span id=
"zoomedX">False
</span><p/>
24 <p>Zoomed Y:
<span id=
"zoomedY">False
</span><p/>
26 <div class=
"codeoutput" style=
"float:left;">
27 <div id=
"zoomdiv"></div>
28 <script type=
"text/javascript">
32 document.getElementById(
"zoomdiv"),
34 // CSV or path to a CSV file.
45 drawCallback: function(me, initial) {
46 document.getElementById(
"zoomed").innerHTML =
"" + me.isZoomed();
47 document.getElementById(
"zoomedX").innerHTML =
"" + me.isZoomed(
"x");
48 document.getElementById(
"zoomedY").innerHTML =
"" + me.isZoomed(
"y");
57 <div style=
"clear:both; width:600px; text-align:center; font-weight: bold; font-size: 125%;">HTML
</div>
63 document.getElementById(
"zoomdiv
"),
65 // CSV or path to a CSV file.
66 "Date,Temperature
\n" +
67 "2011-
01-
07,
75\n" +
68 "2011-
01-
08,
70\n" +
69 "2011-
01-
09,
90\n" +
70 "2011-
01-
10,
30\n" +
71 "2011-
01-
11,
40\n" +
72 "2011-
01-
12,
60\n" +
73 "2011-
01-
13,
70\n" +
74 "2011-
01-
14,
40\n",
76 drawCallback: function(me, initial) {
77 document.getElementById(
"zoomed
").innerHTML =
"" + me.isZoomed();
78 document.getElementById(
"zoomedX
").innerHTML =
"" + me.isZoomed(
"x
");
79 document.getElementById(
"zoomedY
").innerHTML =
"" + me.isZoomed(
"y
");
86 <p>The
<a href=
"zoom.html">Tests for zoom operations
</a> show a full example of this in action.
</p>