Add per-series and synchronize.

[dygraphs.git] / gallery / link-interaction.js

diff --git a/gallery/link-interaction.js b/gallery/link-interaction.js
new file mode 100644 (file)
index 0000000..aa7f738
--- /dev/null
+++ b/gallery/link-interaction.js
@@ -0,0 +1,82 @@
+// Use this as a template for new Gallery entries.
+Gallery.register(
+  'link-interaction',
+  {
+    name: 'Link Interaction',
+    setup: function(parent) {
+      parent.innerHTML =
+          "<div id='div_g'></div>" +
+          "<b>Zoom:</b>" +
+          "<a href='#' onclick='zoom(3600)'>hour</a> " +
+          "<a href='#' onclick='zoom(86400)'>day</a> " +
+          "<a href='#' onclick='zoom(604800)'>week</a> " +
+          "<a href='#' onclick='zoom(30 * 86400)'>month</a> " +
+          "<a href='#' onclick='reset()'>full</a> " +
+          "<b>Pan:</b> " +
+          "<a href='#' onclick='pan(-1)'>left</a> " +
+          "<a href='#' onclick='pan(+1)'>right</a> ";
+    },
+    run: function() {
+      var r = [ ];
+      var base_time = Date.parse("2008/07/01");
+      var num = 24 * 0.25 * 365;
+      for (var i = 0; i < num; i++) {
+        r.push([ new Date(base_time + i * 3600 * 1000),
+                 i + 50 * (i % 60),        // line
+                 i * (num - i) * 4.0 / num  // parabola
+               ]);
+      }
+      var orig_range = [ r[0][0].valueOf(), r[r.length - 1][0].valueOf() ];
+      g = new Dygraph(
+            document.getElementById("div_g"),
+            r, {
+              rollPeriod: 7,
+              animatedZooms: true,
+              // errorBars: true,
+              width: 600,
+              height: 300,
+              labels: ["Date", "a", "b"]
+            }
+          );
+
+      var desired_range = null;
+      function approach_range() {
+        if (!desired_range) return;
+        // go halfway there
+        var range = g.xAxisRange();
+        if (Math.abs(desired_range[0] - range[0]) < 60 &&
+            Math.abs(desired_range[1] - range[1]) < 60) {
+          g.updateOptions({dateWindow: desired_range});
+          // (do not set another timeout.)
+        } else {
+          var new_range;
+          new_range = [0.5 * (desired_range[0] + range[0]),
+                       0.5 * (desired_range[1] + range[1])];
+          g.updateOptions({dateWindow: new_range});
+          animate();
+        }
+      }
+      function animate() {
+        setTimeout(approach_range, 50);
+      }
+
+      window.zoom = function(res) {
+        var w = g.xAxisRange();
+        desired_range = [ w[0], w[0] + res * 1000 ];
+        animate();
+      }
+
+      window.reset= function() {
+        desired_range = orig_range;
+        animate();
+      }
+
+      window.pan = function(dir) {
+        var w = g.xAxisRange();
+        var scale = w[1] - w[0];
+        var amount = scale * 0.25 * dir;
+        desired_range = [ w[0] + amount, w[1] + amount ];
+        animate();
+      }
+    }
+  });
\ No newline at end of file