tests/link-interaction.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   </head>
  12   <body>
  13     <div id="div_g"></div>
  14     <b>Zoom:</b>
  15       <a href="#" onclick="zoom(3600)">hour</a>
  16       <a href="#" onclick="zoom(86400)">day</a>
  17       <a href="#" onclick="zoom(604800)">week</a>
  18       <a href="#" onclick="zoom(30 * 86400)">month</a>
  19       <a href="#" onclick="reset()">full</a>
  20     <b>Pan:</b>
  21       <a href="#" onclick="pan(-1)">left</a>
  22       <a href="#" onclick="pan(+1)">right</a>
  23
  24     <script type="text/javascript">
  25       var r = [ ];
  26       var base_time = Date.parse("2008/07/01");
  27       var num = 24 * 0.25 * 365;
  28       for (var i = 0; i < num; i++) {
  29         r.push([ new Date(base_time + i * 3600 * 1000),
  30                  i + 50 * (i % 60),        // line
  31                  i * (num - i) * 4.0 / num  // parabola
  32                ]);
  33       }
  34       var orig_range = [ r[0][0].valueOf(), r[r.length - 1][0].valueOf() ];
  35       g = new Dygraph(
  36             document.getElementById("div_g"),
  37             r, {
  38               rollPeriod: 7,
  39               // errorBars: true,
  40               width: 600,
  41               height: 300,
  42               labels: ["Date", "a", "b"]
  43             }
  44           );
  45
  46       var desired_range = null;
  47       function approach_range() {
  48         if (!desired_range) return;
  49         // go halfway there
  50         var range = g.xAxisRange();
  51         if (Math.abs(desired_range[0] - range[0]) < 60 &&
  52             Math.abs(desired_range[1] - range[1]) < 60) {
  53           g.updateOptions({dateWindow: desired_range});
  54           // (do not set another timeout.)
  55         } else {
  56           var new_range;
  57           new_range = [0.5 * (desired_range[0] + range[0]),
  58                        0.5 * (desired_range[1] + range[1])];
  59           g.updateOptions({dateWindow: new_range});
  60           animate();
  61         }
  62       }
  63       function animate() {
  64         setTimeout(approach_range, 50);
  65       }
  66
  67       function zoom(res) {
  68         var w = g.xAxisRange();
  69         desired_range = [ w[0], w[0] + res * 1000 ];
  70         animate();
  71       }
  72
  73       function reset() {
  74         desired_range = orig_range;
  75         animate();
  76       }
  77
  78       function pan(dir) {
  79         var w = g.xAxisRange();
  80         var scale = w[1] - w[0];
  81         var amount = scale * 0.25 * dir;
  82         desired_range = [ w[0] + amount, w[1] + amount ];
  83         animate();
  84       }
  85     </script>
  86   </body>
  87 </html>