gallery/link-interaction.js

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