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