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

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