From e2a5e39886ea3bec49f24f937bb2625899710328 Mon Sep 17 00:00:00 2001 From: Robert Konigsberg 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 @@ - - - - - Dygraphs Gallery - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

Gallery

-
-
- - - 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 @@ + + + + + Dygraphs Gallery + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +

Gallery

+
+
+ + + 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 = + "
" + + "Zoom:" + + "hour " + + "day " + + "week " + + "month " + + "full " + + "Pan: " + + "left " + + "right "; + }, + 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 = "
"; + }, + 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 = + "

Zooming and panning on any of the charts will zoom and pan all the" + + "others.

" + + "

" + + "" + + "" + + "" + + "" + + "
"; + }, + 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