tests/zoom.html

   1 <html>
   2   <head>
   3     <title>noise</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     <h3>Click the buttons to change the zoom</h3>
  15     <h4>Window coordinates (in dates and values):</h4>
  16     <div id = "dimensions"></div>
  17     <div id="div_g" style="width:600px; height:300px;"></div>
  18
  19     <p><b>Zoom operations:</b></p>
  20     <p>
  21       <input type="button" value="Zoom operation 1" onclick="sizeGraph(1)">&nbsp;
  22       <input type="button" value="Zoom operation 2" onclick="sizeGraph(2)">&nbsp;
  23       <input type="button" value="Zoom operation 3" onclick="sizeGraph(3)">&nbsp;
  24       <input type="button" value="Zoom operation 4" onclick="sizeGraph(4)">&nbsp;
  25       <input type="button" value="Unzoom" onclick="sizeGraph(5)">&nbsp;
  26       </p>
  27
  28
  29     <script type="text/javascript">
  30       g = new Dygraph(
  31             document.getElementById("div_g"),
  32             NoisyData, {
  33               zoomCallback : function(a,b,c,d) { showDimensions(a,b,c,d); }
  34             }
  35           );
  36
  37       // TODO(konigsberg): Implement a visualization that verifies that initial
  38       // displays also show correctly.
  39
  40       // Pull an initial value for logging.
  41       var minDate = g.xAxisRange()[0];
  42       var maxDate = g.xAxisRange()[1];
  43       var minValue = g.yAxisRange()[0];
  44       var maxValue = g.yAxisRange()[1];
  45
  46       showDimensions(minDate, maxDate, minValue, maxValue);
  47
  48       function showDimensions(minDate, maxDate, minValue, maxValue) {
  49         var elem = document.getElementById("dimensions");
  50         elem.innerHTML =
  51           "dateWindow : [" + minDate + " , "+ maxDate + "],<br>" +
  52           "valueRange : [" + minValue + " , "+ maxValue + "],";
  53       }
  54
  55       function sizeGraph(i) {
  56         switch(i) {
  57           case 1: g.doZoomYValues_(4, 2);
  58                   break;
  59           case 5: g.doUnzoom_();
  60                     break;
  61         }
  62       }
  63     </script>
  64
  65   </body>
  66 </html>