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     <!--
   9     For production (minified) code, use:
  10     <script type="text/javascript" src="dygraph-combined.js"></script>
  11     -->
  12     <script type="text/javascript" src="../dygraph-dev.js"></script>
  13
  14     <script type="text/javascript" src="data.js"></script>
  15   </head>
  16   <body>
  17     <!-- Ensure that the documentation generator picks us up: {isZoomedIgnoreProgrammaticZoom:} -->
  18     <h1>isZoomedIgnoreProgrammaticZoom Option</h1>
  19     <p>
  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.
  24     </p>
  25     <p>
  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.
  31     </p>
  32     <p>
  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.
  36     </p>
  37     <p>
  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.
  41     </p>
  42     <p>
  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.
  45     </p>
  46     <p><input id="isZoomedIgnoreProgrammaticZoom" type="checkbox" checked=true />Do not change zoom flags (<code>isZoomedIgnoreProgrammaticZoom</code>)</p>
  47
  48     <div>
  49       <div style="float: left">
  50         <p>
  51           Max Y Axis:
  52           <input type="button" value="&uarr;" onclick="adjustTop(+1)" />
  53           <input type="button" value="&darr;" onclick="adjustTop(-1)" />
  54         </p>
  55         <p>
  56           Min Y Axis:
  57           <input type="button" value="&uarr;" onclick="adjustBottom(+1)" />
  58           <input type="button" value="&darr;" onclick="adjustBottom(-1)" />
  59         </p>
  60         <p>
  61           Min X Axis:
  62           <input type="button" value="&larr;" onclick="adjustFirst(-100000000)" />
  63           <input type="button" value="&rarr;" onclick="adjustFirst(+100000000)" />
  64         </p>
  65         <p>
  66           Max X Axis:
  67           <input type="button" value="&larr;" onclick="adjustLast(-100000000)" />
  68           <input type="button" value="&rarr;" onclick="adjustLast(+100000000)" />
  69         </p>
  70       </div>
  71       <div id="div_g" style="width: 600px; height: 300px; float: left"></div>
  72       <div style="float: left">
  73
  74       </div>
  75     </div>
  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>
  84     </div>
  85
  86     <script type="text/javascript">
  87       g = new Dygraph(
  88         document.getElementById("div_g"),
  89         NoisyData,
  90         {
  91           errorBars: true,
  92           zoomCallback : function(minDate, maxDate, yRange) {
  93             showDimensions(minDate, maxDate, yRange);
  94           },
  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] + "]"
 102           }
 103         }
 104       )
 105
 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]);
 112
 113       function showDimensions(minDate, maxDate, yRanges) {
 114         showXDimensions(minDate, maxDate);
 115         showYDimensions(yRanges);
 116       }
 117
 118       function getNoChange() {
 119         var options = {}
 120         var elem = document.getElementById("isZoomedIgnoreProgrammaticZoom")
 121         if (elem.checked) {
 122           options.isZoomedIgnoreProgrammaticZoom = true
 123         }
 124         return options
 125       }
 126
 127       function adjustTop(value) {
 128         options = getNoChange()
 129         maxValue += value
 130         options.valueRange = [minValue, maxValue]
 131         console.log(options)
 132         g.updateOptions(options)
 133       }
 134
 135       function adjustBottom(value) {
 136         options = getNoChange()
 137         minValue += value
 138         options.valueRange = [minValue, maxValue]
 139         console.log(options)
 140         g.updateOptions(options)
 141       }
 142
 143       function adjustFirst(value) {
 144         options = getNoChange()
 145         minDate += value
 146         options.dateWindow = [minDate, maxDate]
 147         console.log(options)
 148         g.updateOptions(options)
 149       }
 150
 151       function adjustLast(value) {
 152         options = getNoChange()
 153         maxDate += value
 154         options.dateWindow = [minDate, maxDate]
 155         g.updateOptions(options)
 156       }
 157
 158       function showXDimensions(first, second) {
 159         var elem = document.getElementById("xdimensions");
 160         elem.innerHTML = "dateWindow: [" + first + ", "+ second + "]";
 161       }
 162
 163       function showYDimensions(ranges) {
 164         var elem = document.getElementById("ydimensions");
 165         elem.innerHTML = "valueRange: [" + ranges + "]";
 166       }
 167
 168     </script>
 169   </body>
 170 </html>