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

   1 <html>
   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">
  48         <p>
  49           Max Y Axis:
  50           <input type="button" value="&uarr;" onclick="adjustTop(+1)" />
  51           <input type="button" value="&darr;" onclick="adjustTop(-1)" />
  52         </p>
  53         <p>
  54           Min Y Axis:
  55           <input type="button" value="&uarr;" onclick="adjustBottom(+1)" />
  56           <input type="button" value="&darr;" onclick="adjustBottom(-1)" />
  57         </p>
  58         <p>
  59           Min X Axis:
  60           <input type="button" value="&larr;" onclick="adjustFirst(-100000000)" />
  61           <input type="button" value="&rarr;" onclick="adjustFirst(+100000000)" />
  62         </p>
  63         <p>
  64           Max X Axis:
  65           <input type="button" value="&larr;" onclick="adjustLast(-100000000)" />
  66           <input type="button" value="&rarr;" onclick="adjustLast(+100000000)" />
  67         </p>
  68       </div>
  69       <div id="div_g" style="width: 600px; height: 300px; float: left"></div>
  70       <div style="float: left">
  71
  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>
  83
  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       )
 103
 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]);
 110
 111       function showDimensions(minDate, maxDate, yRanges) {
 112         showXDimensions(minDate, maxDate);
 113         showYDimensions(yRanges);
 114       }
 115
 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       }
 124
 125       function adjustTop(value) {
 126         options = getNoChange()
 127         maxValue += value
 128         options.valueRange = [minValue, maxValue]
 129         console.log(options)
 130         g.updateOptions(options)
 131       }
 132
 133       function adjustBottom(value) {
 134         options = getNoChange()
 135         minValue += value
 136         options.valueRange = [minValue, maxValue]
 137         console.log(options)
 138         g.updateOptions(options)
 139       }
 140
 141       function adjustFirst(value) {
 142         options = getNoChange()
 143         minDate += value
 144         options.dateWindow = [minDate, maxDate]
 145         console.log(options)
 146         g.updateOptions(options)
 147       }
 148
 149       function adjustLast(value) {
 150         options = getNoChange()
 151         maxDate += value
 152         options.dateWindow = [minDate, maxDate]
 153         g.updateOptions(options)
 154       }
 155
 156       function showXDimensions(first, second) {
 157         var elem = document.getElementById("xdimensions");
 158         elem.innerHTML = "dateWindow: [" + first + ", "+ second + "]";
 159       }
 160
 161       function showYDimensions(ranges) {
 162         var elem = document.getElementById("ydimensions");
 163         elem.innerHTML = "valueRange: [" + ranges + "]";
 164       }
 165
 166     </script>
 167   </body>
 168 </html>