Add per-series and synchronize.
authorRobert Konigsberg <konigsberg@gmail.com>
Sun, 15 Jan 2012 06:10:33 +0000 (01:10 -0500)
committerRobert Konigsberg <konigsberg@gmail.com>
Sun, 15 Jan 2012 06:10:33 +0000 (01:10 -0500)
gallery/gallery.css
gallery/gallery.html [deleted file]
gallery/index.html [new file with mode: 0644]
gallery/link-interaction.js [new file with mode: 0644]
gallery/per-series.js [new file with mode: 0644]
gallery/synchronize.js [new file with mode: 0644]

index 8321fc3..c0b5837 100644 (file)
@@ -3,6 +3,10 @@ body {
   font-size: 90%;
 }
 
+aside {
+  font-size: 90%;
+}
+
 #toc {
   vertical-align: top;
   width: 200px;
@@ -79,4 +83,4 @@ body {
   padding: 5px;
   border-style: solid;
   border-color: black;
-}
\ No newline at end of file
+}
diff --git a/gallery/gallery.html b/gallery/gallery.html
deleted file mode 100644 (file)
index ec3afb9..0000000
+++ /dev/null
@@ -1,57 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">
-    <title>Dygraphs Gallery</title>
-    <!--[if IE]>
-    <script type="text/javascript" src="../excanvas.js"></script>
-    <![endif]-->
-
-    <script src="../dygraph-dev.js"></script>
-    <script src="gallery.js"></script>
-    <script src="data.js"></script>
-    <script src='http://www.google.com/jsapi'></script> <!-- required in some cases -->
-
-    <!-- gallery entries. Can these be auto-loaded? -->
-    <script src="annotation.js"></script>
-    <script src="drawing.js"></script>
-    <script src="dynamic-update.js"></script>
-    <script src="highlighted-region.js"></script>
-    <script src="independent-series.js"></script>
-    <script src="plotter.js"></script>
-
-    <!-- These might not remain in the gallery -->
-    <script src="dygraph-simple.js"></script>
-    <script src="demo.js"></script>
-    <script src="border.js"></script>
-    <script src="callback.js"></script>
-    <script src="avoidMinZero.js"></script>
-    <script src="color-cycle.js"></script>
-    <script src="color-visibility.js"></script>
-    <script src="two-axes.js"></script>
-    <script src="number-format.js"></script>
-    <script src="no-range.js"></script>
-    <script src="negative.js"></script>
-    <script src="annotation-gviz.js"></script>
-    <script src="annotation-native.js"></script>
-
-    <link rel="stylesheet" type="text/css" href="gallery.css" />
-  </head>
-  <body>
-    <table>
-      <tr>
-        <td><h2>Gallery</h2></td>
-        <td></td>
-        <td id="title"></td>
-      </tr>
-      <tr>
-        <td id="toc"></td>
-        <td style="width:0.5em;"></td>
-        <td id="rhs">
-          <div id="workarea"></div>
-        </td>
-      </tr>
-    </table>
-  <script type="text/javascript">Gallery.start()</script>
-  </body>
-</html>
diff --git a/gallery/index.html b/gallery/index.html
new file mode 100644 (file)
index 0000000..af021e5
--- /dev/null
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">
+    <title>Dygraphs Gallery</title>
+    <!--[if IE]>
+    <script type="text/javascript" src="../excanvas.js"></script>
+    <![endif]-->
+
+    <script src="../dygraph-dev.js"></script>
+    <script src="gallery.js"></script>
+    <script src="data.js"></script>
+    <script src='http://www.google.com/jsapi'></script> <!-- required in some cases -->
+
+    <!-- gallery entries. Can these be auto-loaded? -->
+    <script src="annotation.js"></script>
+    <script src="drawing.js"></script>
+    <script src="dynamic-update.js"></script>
+    <script src="highlighted-region.js"></script>
+    <script src="independent-series.js"></script>
+    <script src="plotter.js"></script>
+    <script src="link-interaction.js"></script>
+    <script src="per-series.js"></script>
+    <script src="synchronize.js"></script>
+
+    <!-- These might not remain in the gallery -->
+    <script src="dygraph-simple.js"></script>
+    <script src="demo.js"></script>
+    <script src="border.js"></script>
+    <script src="callback.js"></script>
+    <script src="avoidMinZero.js"></script>
+    <script src="color-cycle.js"></script>
+    <script src="color-visibility.js"></script>
+    <script src="two-axes.js"></script>
+    <script src="number-format.js"></script>
+    <script src="no-range.js"></script>
+    <script src="negative.js"></script>
+    <script src="annotation-gviz.js"></script>
+    <script src="annotation-native.js"></script>
+
+    <link rel="stylesheet" type="text/css" href="gallery.css" />
+  </head>
+  <body>
+    <table>
+      <tr>
+        <td><h2>Gallery</h2></td>
+        <td></td>
+        <td id="title"></td>
+      </tr>
+      <tr>
+        <td id="toc"></td>
+        <td style="width:0.5em;"></td>
+        <td id="rhs">
+          <div id="workarea"></div>
+        </td>
+      </tr>
+    </table>
+  <script type="text/javascript">Gallery.start()</script>
+  </body>
+</html>
diff --git a/gallery/link-interaction.js b/gallery/link-interaction.js
new file mode 100644 (file)
index 0000000..aa7f738
--- /dev/null
@@ -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
diff --git a/gallery/per-series.js b/gallery/per-series.js
new file mode 100644 (file)
index 0000000..82fd5c9
--- /dev/null
@@ -0,0 +1,46 @@
+// Use this as a template for new Gallery entries.
+Gallery.register(
+  'per-series',
+  {
+    name: 'Per-series properties',
+    title: 'Chart with per-series properties',
+    setup: function(parent) {
+      parent.innerHTML = "<div id='demodiv'>";
+    },
+    run: function() {
+      g = new Dygraph(
+              document.getElementById("demodiv"),
+              function() {
+                var zp = function(x) { if (x < 10) return "0"+x; else return x; };
+                var r = "date,parabola,line,another line,sine wave\n";
+                for (var i=1; i<=31; i++) {
+                r += "200610" + zp(i);
+                r += "," + 10*(i*(31-i));
+                r += "," + 10*(8*i);
+                r += "," + 10*(250 - 8*i);
+                r += "," + 10*(125 + 125 * Math.sin(0.3*i));
+                r += "\n";
+                }
+                return r;
+              },
+              {
+                strokeWidth: 2,
+                'parabola': {
+                  strokeWidth: 0.0,
+                  drawPoints: true,
+                  pointSize: 4,
+                  highlightCircleSize: 6
+                },
+                'line': {
+                  strokeWidth: 1.0,
+                  drawPoints: true,
+                  pointSize: 1.5
+                },
+                'sine wave': {
+                  strokeWidth: 3,
+                  highlightCircleSize: 10
+                }
+              }
+          );
+    }
+  });
diff --git a/gallery/synchronize.js b/gallery/synchronize.js
new file mode 100644 (file)
index 0000000..8e1eb77
--- /dev/null
@@ -0,0 +1,48 @@
+// Use this as a template for new Gallery entries.
+Gallery.register(
+  'synchronize',
+  {
+    name: 'Synchronization',
+    title: 'Multiple graphs in sync',
+    setup: function(parent) {
+      parent.innerHTML =
+        "<p>Zooming and panning on any of the charts will zoom and pan all the" +
+        "others.</p>" +
+        "<p><aside>(zoom: Click and drag, pan: shift-click and drag, unzoom: double-click)</aside></p>" +
+        "<table><tr>" +
+        "<td><div id='div1' style='width:500px; height:300px;'></div></td>" +
+        "<td><div id='div3' style='width:500px; height:300px;'></div></td></tr>" +
+        "<tr><td><div id='div2' style='width:500px; height:300px;'></div></td>" +
+        "<td><div id='div4' style='width:500px; height:300px;'></div></td></table>";
+    },
+    run: function() {
+      gs = [];
+      var blockRedraw = false;
+      var initialized = false;
+      for (var i = 1; i <= 4; i++) {
+        gs.push(
+          new Dygraph(
+            document.getElementById("div" + i),
+            NoisyData, {
+              rollPeriod: 7,
+              errorBars: true,
+              drawCallback: function(me, initial) {
+                if (blockRedraw || initial) return;
+                blockRedraw = true;
+                var range = me.xAxisRange();
+                var yrange = me.yAxisRange();
+                for (var j = 0; j < 4; j++) {
+                  if (gs[j] == me) continue;
+                  gs[j].updateOptions( {
+                    dateWindow: range,
+                    valueRange: yrange
+                  } );
+                }
+                blockRedraw = false;
+              }
+            }
+          )
+        );
+      }
+    }
+  });