From e2a5e39886ea3bec49f24f937bb2625899710328 Mon Sep 17 00:00:00 2001
From: Robert Konigsberg <konigsberg@gmail.com>
Date: Sun, 15 Jan 2012 01:10:33 -0500
Subject: [PATCH] Add per-series and synchronize.
---
gallery/gallery.css | 6 +++-
gallery/gallery.html | 57 -------------------------------
gallery/index.html | 60 +++++++++++++++++++++++++++++++++
gallery/link-interaction.js | 82 +++++++++++++++++++++++++++++++++++++++++++++
gallery/per-series.js | 46 +++++++++++++++++++++++++
gallery/synchronize.js | 48 ++++++++++++++++++++++++++
6 files changed, 241 insertions(+), 58 deletions(-)
delete mode 100644 gallery/gallery.html
create mode 100644 gallery/index.html
create mode 100644 gallery/link-interaction.js
create mode 100644 gallery/per-series.js
create mode 100644 gallery/synchronize.js
diff --git a/gallery/gallery.css b/gallery/gallery.css
index 8321fc3..c0b5837 100644
--- a/gallery/gallery.css
+++ b/gallery/gallery.css
@@ -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
index ec3afb9..0000000
--- a/gallery/gallery.html
+++ /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
index 0000000..af021e5
--- /dev/null
+++ b/gallery/index.html
@@ -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
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
diff --git a/gallery/per-series.js b/gallery/per-series.js
new file mode 100644
index 0000000..82fd5c9
--- /dev/null
+++ b/gallery/per-series.js
@@ -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
index 0000000..8e1eb77
--- /dev/null
+++ b/gallery/synchronize.js
@@ -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;
+ }
+ }
+ )
+ );
+ }
+ }
+ });
--
2.7.4