Fixed attribute name typo in legend follow (#792)
[dygraphs.git] / tests / is-zoomed-ignore-programmatic-zoom.html
1 <html>
2 <head>
3 <link rel="stylesheet" href="../css/dygraph.css">
4 <title>isZoomedIgnoreProgrammaticZoom Flag</title>
5 <!--
6 For production (minified) code, use:
7 <script type="text/javascript" src="dygraph-combined.js"></script>
8 -->
9 <script type="text/javascript" src="../dist/dygraph.js"></script>
10
11 <script type="text/javascript" src="data.js"></script>
12 </head>
13 <body>
14 <!-- Ensure that the documentation generator picks us up: {isZoomedIgnoreProgrammaticZoom:} -->
15 <h1>isZoomedIgnoreProgrammaticZoom Option</h1>
16 <p>
17 By default, when the <code>dateWindow</code> or <code>updateOptions</code>
18 of a chart is changed programmatically by a call to <code>updateOptions</code>
19 the zoomed flags (<code>isZoomed</code>) are changed. This is the same
20 as manually zooming in using the mouse.
21 </p>
22 <p>
23 Sometimes it may be desirable to change the display of the chart by
24 manipulating the <code>dateWindow</code> and <code>valueRange</code>
25 options but without changing the zoomed flags, for example where manual
26 zooming is still required but where it is also desired that the zoomed
27 flags drive display elements, but only for manual zooming.
28 </p>
29 <p>
30 In this case <code>isZoomedIgnoreProgrammaticZoom</code> may be specified along with
31 either the <code>dateWindow</code> or <code>valueRange</code> values to
32 <code>updateOptions</code> and the zoomed flags will remain unaffected.
33 </p>
34 <p>
35 The chart below may be manipulated to change the <code>updateOptions</code>
36 using the Max and Min Y axis buttons and the <code>dateWindow</code>
37 by using the Max and Min X axis buttons.
38 </p>
39 <p>
40 Toggle the check box below to determine the difference in operation of the zoom flags
41 when the date and value windows of the chart are changed using the arrows underneath.
42 </p>
43 <p><input id="isZoomedIgnoreProgrammaticZoom" type="checkbox" checked=true />Do not change zoom flags (<code>isZoomedIgnoreProgrammaticZoom</code>)</p>
44
45 <div>
46 <div style="float: left">
47 <p>
48 Max Y Axis:
49 <input type="button" value="&uarr;" onclick="adjustTop(+1)" />
50 <input type="button" value="&darr;" onclick="adjustTop(-1)" />
51 </p>
52 <p>
53 Min Y Axis:
54 <input type="button" value="&uarr;" onclick="adjustBottom(+1)" />
55 <input type="button" value="&darr;" onclick="adjustBottom(-1)" />
56 </p>
57 <p>
58 Min X Axis:
59 <input type="button" value="&larr;" onclick="adjustFirst(-100000000)" />
60 <input type="button" value="&rarr;" onclick="adjustFirst(+100000000)" />
61 </p>
62 <p>
63 Max X Axis:
64 <input type="button" value="&larr;" onclick="adjustLast(-100000000)" />
65 <input type="button" value="&rarr;" onclick="adjustLast(+100000000)" />
66 </p>
67 </div>
68 <div id="div_g" style="width: 600px; height: 300px; float: left"></div>
69 <div style="float: left">
70
71 </div>
72 </div>
73 <div style="display: inline-block">
74 <h4> Zoomed Flags</h4>
75 <p>Zoomed: <span id="zoomed">False</span></p>
76 <p>Zoomed X: <span id="zoomedX">False</span></p>
77 <p>Zoomed Y: <span id="zoomedY">False</span></p>
78 <h4>Window coordinates (in dates and values):</h4>
79 <div id="xdimensions"></div>
80 <div id="ydimensions"></div>
81 </div>
82
83 <script type="text/javascript">
84 g = new Dygraph(
85 document.getElementById("div_g"),
86 NoisyData,
87 {
88 errorBars: true,
89 zoomCallback : function(minDate, maxDate, yRange) {
90 showDimensions(minDate, maxDate, yRange);
91 },
92 drawCallback: function(me, initial) {
93 document.getElementById("zoomed").innerHTML = "" + me.isZoomed();
94 document.getElementById("zoomedX").innerHTML = "" + me.isZoomed("x");
95 document.getElementById("zoomedY").innerHTML = "" + me.isZoomed("y");
96 var x_range = me.xAxisRange()
97 var elem = document.getElementById("xdimensions")
98 elem.innerHTML = "dateWindow : [" + x_range[0] + ", "+ x_range[1] + "]"
99 }
100 }
101 )
102
103 // Pull an initial value for logging.
104 var minDate = g.xAxisRange()[0];
105 var maxDate = g.xAxisRange()[1];
106 var minValue = g.yAxisRange()[0];
107 var maxValue = g.yAxisRange()[1];
108 showDimensions(minDate, maxDate, [minValue, maxValue]);
109
110 function showDimensions(minDate, maxDate, yRanges) {
111 showXDimensions(minDate, maxDate);
112 showYDimensions(yRanges);
113 }
114
115 function getNoChange() {
116 var options = {}
117 var elem = document.getElementById("isZoomedIgnoreProgrammaticZoom")
118 if (elem.checked) {
119 options.isZoomedIgnoreProgrammaticZoom = true
120 }
121 return options
122 }
123
124 function adjustTop(value) {
125 options = getNoChange()
126 maxValue += value
127 options.valueRange = [minValue, maxValue]
128 console.log(options)
129 g.updateOptions(options)
130 }
131
132 function adjustBottom(value) {
133 options = getNoChange()
134 minValue += value
135 options.valueRange = [minValue, maxValue]
136 console.log(options)
137 g.updateOptions(options)
138 }
139
140 function adjustFirst(value) {
141 options = getNoChange()
142 minDate += value
143 options.dateWindow = [minDate, maxDate]
144 console.log(options)
145 g.updateOptions(options)
146 }
147
148 function adjustLast(value) {
149 options = getNoChange()
150 maxDate += value
151 options.dateWindow = [minDate, maxDate]
152 g.updateOptions(options)
153 }
154
155 function showXDimensions(first, second) {
156 var elem = document.getElementById("xdimensions");
157 elem.innerHTML = "dateWindow: [" + first + ", "+ second + "]";
158 }
159
160 function showYDimensions(ranges) {
161 var elem = document.getElementById("ydimensions");
162 elem.innerHTML = "valueRange: [" + ranges + "]";
163 }
164
165 </script>
166 </body>
167 </html>