1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>isZoomed method</title>
<link rel="stylesheet" type="text/css" href="../dist/dygraph.css" />
<link rel="stylesheet" type="text/css" href="../common/vextlnk.css" />
<script type="text/javascript" src="../dist/dygraph.js"></script>
<script type="text/javascript" src="data.js"></script>
</head>
<body>
<h1 id="zoom">Determining Zoom</h1>
<p>
It is possible to detect whether a chart has been zoomed in either axis by the use of the <code>isZoomed</code> function.
If called with no argument, it will report whether <em>either</em> axis has been zoomed.
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.
</p>
<p>Here's a simple example using <code>drawCallback</code> to display the various zoom states whenever the chart is zoomed:</p>
<div style="width:600px; text-align:center; font-weight: bold; font-size: 125%;">OUTPUT</div>
<div style="width: 750px">
<div style="float: right">
<p>Zoomed: <span id="zoomed">False</span></p>
<p>Zoomed X: <span id="zoomedX">False</span></p>
<p>Zoomed Y: <span id="zoomedY">False</span></p>
</div>
<div class="codeoutput" style="float:left;">
<div id="zoomdiv"></div>
<script type="text/javascript"><!--//--><![CDATA[//><!--
Dygraph.onDOMready(function onDOMready() {
var g = new Dygraph(
// containing div
document.getElementById("zoomdiv"),
// CSV or path to a CSV file.
"Date,Value\n" +
"2011-01-07,75\n" +
"2011-01-08,70\n" +
"2011-01-09,90\n" +
"2011-01-10,30\n" +
"2011-01-11,40\n" +
"2011-01-12,60\n" +
"2011-01-13,70\n" +
"2011-01-14,40\n",
{
drawCallback: function(me, initial) {
document.getElementById("zoomed").innerHTML = "" + me.isZoomed();
document.getElementById("zoomedX").innerHTML = "" + me.isZoomed("x");
document.getElementById("zoomedY").innerHTML = "" + me.isZoomed("y");
}
}
);
});
//--><!]]></script>
</div>
</div>
<p>
<div style="clear:both; width:600px; text-align:center; font-weight: bold; font-size: 125%;">HTML</div>
<pre>
new Dygraph(
// containing div
document.getElementById("zoomdiv"),
// CSV or path to a CSV file.
"Date,Temperature\n" +
"2011-01-07,75\n" +
"2011-01-08,70\n" +
"2011-01-09,90\n" +
"2011-01-10,30\n" +
"2011-01-11,40\n" +
"2011-01-12,60\n" +
"2011-01-13,70\n" +
"2011-01-14,40\n",
{
drawCallback: function(me, initial) {
document.getElementById("zoomed").innerHTML = "" + me.isZoomed();
document.getElementById("zoomedX").innerHTML = "" + me.isZoomed("x");
document.getElementById("zoomedY").innerHTML = "" + me.isZoomed("y");
}
}
);
</pre>
</p>
<p>The <a href="zoom.html">Tests for zoom operations</a> show a full example of this in action.</p>
</body>
</html>
|
