tests/no-zoom-change.html

   1 <html>
   2     <head>
   3         <title>noZoomFlagChange Flag</title>
   4         <!--[if IE]>
   5         <script type="text/javascript" src="../excanvas.js"></script>
   6         <![endif]-->
   7         <script type="text/javascript" src="../strftime/strftime-min.js"></script>
   8         <script type="text/javascript" src="../rgbcolor/rgbcolor.js"></script>
   9         <script type="text/javascript" src="../dygraph-canvas.js"></script>
  10         <script type="text/javascript" src="../dygraph.js"></script>
  11         <script type="text/javascript" src="data.js"></script>
  12     </head>
  13     <body>
  14         <h1>noZoomFlagChange Operation</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>noZoomFlagChange</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="noZoomFlagChange" type="checkbox" checked=true />Do not change zoom flags (<code>noZoomFlagChange</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("noZoomFlagChange")
 117                 if (elem.checked) {
 118                     options.noZoomFlagChange = 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>