tests/is-zoomed-ignore-programmatic-zoom.html

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