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="Y (3,5)" onclick="sizeGraph(1)">&nbsp;
  22       <input type="button" value="Y (0,4)" onclick="sizeGraph(2)">&nbsp;
  23       <input type="button" value="Y (2,4)" onclick="sizeGraph(3)">&nbsp;
  24       <input type="button" value="Y (0,2)" onclick="sizeGraph(4)">&nbsp;
  25       <input type="button" value="Y (1,0)" onclick="sizeGraph(5)">&nbsp;
  26       <input type="button" value="Unzoom" onclick="sizeGraph(0)">&nbsp;
  27       </p>
  28
  29
  30     <script type="text/javascript">
  31       g = new Dygraph(
  32             document.getElementById("div_g"),
  33             NoisyData, {
  34               zoomCallback : function(a,b,c,d) { showDimensions(a,b,c,d); }
  35             }
  36           );
  37
  38       // TODO(konigsberg): Implement a visualization that verifies that initial
  39       // displays also show correctly.
  40
  41       // Pull an initial value for logging.
  42       var minDate = g.xAxisRange()[0];
  43       var maxDate = g.xAxisRange()[1];
  44       var minValue = g.yAxisRange()[0];
  45       var maxValue = g.yAxisRange()[1];
  46
  47       showDimensions(minDate, maxDate, minValue, maxValue);
  48
  49       function showDimensions(minDate, maxDate, minValue, maxValue) {
  50         var elem = document.getElementById("dimensions");
  51         elem.innerHTML =
  52           "dateWindow : [" + minDate + " , "+ maxDate + "],<br>" +
  53           "valueRange : [" + minValue + " , "+ maxValue + "],";
  54       }
  55
  56       function sizeGraph(i) {
  57         switch(i) {
  58           case 0: g.doUnzoom_();
  59                   break;
  60           case 1: g.doZoomYValues_(5, 3);
  61                   break;
  62           case 2: g.doZoomYValues_(4, 0);
  63                   break;
  64           case 3: g.doZoomYValues_(4, 2);
  65                   break;
  66           case 4: g.doZoomYValues_(2, 0);
  67                   break;
  68           case 5: g.doZoomYValues_(1, 0);
  69                   break;
  70         }
  71       }
  72     </script>
  73
  74   </body>
  75 </html>