tests/link-interaction.html

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