tests/link-interaction.html

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