Merge pull request #260 from klausw-g/resize-fix-2

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

diff --git a/gallery/link-interaction.js b/gallery/link-interaction.js
index aa7f738..e1d6faa 100644 (file)
--- a/gallery/link-interaction.js
+++ b/gallery/link-interaction.js
@@ -1,20 +1,19 @@
-// 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> ";
+      parent.innerHTML = [
+          "<div id='div_g'></div>",
+          "<b>Zoom:</b>",
+          "<a href='#' id='hour'>hour</a> ",
+          "<a href='#' id='day'>day</a> ",
+          "<a href='#' id='week'>week</a> ",
+          "<a href='#' id='month'>month</a> ",
+          "<a href='#' id='full'>full</a> ",
+          "<b>Pan:</b> ",
+          "<a href='#' id='left'>left</a> ",
+          "<a href='#' id='right'>right</a> "].join("\n");
     },
     run: function() {
       var r = [ ];
@@ -60,23 +59,31 @@ Gallery.register(
         setTimeout(approach_range, 50);
       }
 
-      window.zoom = function(res) {
+      var zoom = function(res) {
         var w = g.xAxisRange();
         desired_range = [ w[0], w[0] + res * 1000 ];
         animate();
       }
 
-      window.reset= function() {
+      var reset = function() {
         desired_range = orig_range;
         animate();
       }
 
-      window.pan = function(dir) {
+      var 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();
       }
+
+      document.getElementById('hour').onclick = function() { zoom(3600); };
+      document.getElementById('day').onclick = function() { zoom(86400); };
+      document.getElementById('week').onclick = function() { zoom(604800); };
+      document.getElementById('month').onclick = function() { zoom(30 * 86400); };
+      document.getElementById('full').onclick = function() { reset(); };
+      document.getElementById('left').onclick = function() { pan(-1); };
+      document.getElementById('right').onclick = function() { pan(+1); };
     }
-  });
\ No newline at end of file
+  });