3 <meta http-equiv=
"X-UA-Compatible" content=
"IE=EmulateIE7; IE=EmulateIE9">
4 <title>isZoomedIgnoreProgrammaticZoom Flag
</title>
6 <script type=
"text/javascript" src=
"../excanvas.js"></script>
9 For production (minified) code, use:
10 <script type=
"text/javascript" src=
"dygraph-combined.js"></script>
12 <script type=
"text/javascript" src=
"../dygraph-dev.js"></script>
14 <script type=
"text/javascript" src=
"data.js"></script>
17 <!-- Ensure that the documentation generator picks us up: {isZoomedIgnoreProgrammaticZoom:} --
>
18 <h1>isZoomedIgnoreProgrammaticZoom Option
</h1>
20 By default, when the
<code>dateWindow
</code> or
<code>updateOptions
</code>
21 of a chart is changed programmatically by a call to
<code>updateOptions
</code>
22 the zoomed flags (
<code>isZoomed
</code>) are changed. This is the same
23 as manually zooming in using the mouse.
26 Sometimes it may be desirable to change the display of the chart by
27 manipulating the
<code>dateWindow
</code> and
<code>valueRange
</code>
28 options but without changing the zoomed flags, for example where manual
29 zooming is still required but where it is also desired that the zoomed
30 flags drive display elements, but only for manual zooming.
33 In this case
<code>isZoomedIgnoreProgrammaticZoom
</code> may be specified along with
34 either the
<code>dateWindow
</code> or
<code>valueRange
</code> values to
35 <code>updateOptions
</code> and the zoomed flags will remain unaffected.
38 The chart below may be manipulated to change the
<code>updateOptions
</code>
39 using the Max and Min Y axis buttons and the
<code>dateWindow
</code>
40 by using the Max and Min X axis buttons.
43 Toggle the check box below to determine the difference in operation of the zoom flags
44 when the date and value windows of the chart are changed using the arrows underneath.
46 <p><input id=
"isZoomedIgnoreProgrammaticZoom" type=
"checkbox" checked=true
/>Do not change zoom flags (
<code>isZoomedIgnoreProgrammaticZoom
</code>)
</p>
49 <div style=
"float: left">
52 <input type=
"button" value=
"↑" onclick=
"adjustTop(+1)" />
53 <input type=
"button" value=
"↓" onclick=
"adjustTop(-1)" />
57 <input type=
"button" value=
"↑" onclick=
"adjustBottom(+1)" />
58 <input type=
"button" value=
"↓" onclick=
"adjustBottom(-1)" />
62 <input type=
"button" value=
"←" onclick=
"adjustFirst(-100000000)" />
63 <input type=
"button" value=
"→" onclick=
"adjustFirst(+100000000)" />
67 <input type=
"button" value=
"←" onclick=
"adjustLast(-100000000)" />
68 <input type=
"button" value=
"→" onclick=
"adjustLast(+100000000)" />
71 <div id=
"div_g" style=
"width: 600px; height: 300px; float: left"></div>
72 <div style=
"float: left">
76 <div style=
"display: inline-block">
77 <h4> Zoomed Flags
</h4>
78 <p>Zoomed:
<span id=
"zoomed">False
</span></p>
79 <p>Zoomed X:
<span id=
"zoomedX">False
</span></p>
80 <p>Zoomed Y:
<span id=
"zoomedY">False
</span></p>
81 <h4>Window coordinates (in dates and values):
</h4>
82 <div id=
"xdimensions"></div>
83 <div id=
"ydimensions"></div>
86 <script type=
"text/javascript">
88 document.getElementById(
"div_g"),
92 zoomCallback : function(minDate, maxDate, yRange) {
93 showDimensions(minDate, maxDate, yRange);
95 drawCallback: function(me, initial) {
96 document.getElementById(
"zoomed").innerHTML =
"" + me.isZoomed();
97 document.getElementById(
"zoomedX").innerHTML =
"" + me.isZoomed(
"x");
98 document.getElementById(
"zoomedY").innerHTML =
"" + me.isZoomed(
"y");
99 var x_range = me.xAxisRange()
100 var elem = document.getElementById(
"xdimensions")
101 elem.innerHTML =
"dateWindow : [" + x_range[
0] +
", "+ x_range[
1] +
"]"
106 // Pull an initial value for logging.
107 var minDate = g.xAxisRange()[
0];
108 var maxDate = g.xAxisRange()[
1];
109 var minValue = g.yAxisRange()[
0];
110 var maxValue = g.yAxisRange()[
1];
111 showDimensions(minDate, maxDate, [minValue, maxValue]);
113 function showDimensions(minDate, maxDate, yRanges) {
114 showXDimensions(minDate, maxDate);
115 showYDimensions(yRanges);
118 function getNoChange() {
120 var elem = document.getElementById(
"isZoomedIgnoreProgrammaticZoom")
122 options.isZoomedIgnoreProgrammaticZoom = true
127 function adjustTop(value) {
128 options = getNoChange()
130 options.valueRange = [minValue, maxValue]
132 g.updateOptions(options)
135 function adjustBottom(value) {
136 options = getNoChange()
138 options.valueRange = [minValue, maxValue]
140 g.updateOptions(options)
143 function adjustFirst(value) {
144 options = getNoChange()
146 options.dateWindow = [minDate, maxDate]
148 g.updateOptions(options)
151 function adjustLast(value) {
152 options = getNoChange()
154 options.dateWindow = [minDate, maxDate]
155 g.updateOptions(options)
158 function showXDimensions(first, second) {
159 var elem = document.getElementById(
"xdimensions");
160 elem.innerHTML =
"dateWindow: [" + first +
", "+ second +
"]";
163 function showYDimensions(ranges) {
164 var elem = document.getElementById(
"ydimensions");
165 elem.innerHTML =
"valueRange: [" + ranges +
"]";