From 014f84456d19fe647378bb08fbe671b8b6965808 Mon Sep 17 00:00:00 2001 From: Klaus Weidner Date: Thu, 1 Mar 2012 18:49:08 -0800 Subject: [PATCH] Add closest-series highlighting demo to gallery This is a port of tests/series-highlight.html. --- gallery/gallery.css | 4 +++ gallery/highlighted-series.js | 72 +++++++++++++++++++++++++++++++++++++++++++ gallery/index.html | 1 + 3 files changed, 77 insertions(+) create mode 100644 gallery/highlighted-series.js diff --git a/gallery/gallery.css b/gallery/gallery.css index 74bbbef..d1da4a3 100644 --- a/gallery/gallery.css +++ b/gallery/gallery.css @@ -157,3 +157,7 @@ a { #workarea #temperature-sf-ny #bordered { border: 1px solid red; } + +#workarea #highlighted-series .few .dygraph-legend > span.highlight { border: 1px solid grey; } +#workarea #highlighted-series .many .dygraph-legend > span { display: none; } +#workarea #highlighted-series .many .dygraph-legend > span.highlight { display: inline; } diff --git a/gallery/highlighted-series.js b/gallery/highlighted-series.js new file mode 100644 index 0000000..8cbe3c8 --- /dev/null +++ b/gallery/highlighted-series.js @@ -0,0 +1,72 @@ +Gallery.register( + 'highlighted-series', + { + name: 'Highlight Closest Series', + title: 'Interactive closest-series highlighting', + setup: function(parent) { + parent.innerHTML = "
"; + }, + run: function() { +var getData = function(numSeries, numRows, isStacked) { + var data = []; + + for (var j = 0; j < numRows; ++j) { + data[j] = [j]; + } + for (var i = 0; i < numSeries; ++i) { + var val = 0; + for (var j = 0; j < numRows; ++j) { + if (isStacked) { + val = Math.random(); + } else { + val += Math.random() - 0.5; + } + data[j][i + 1] = val; + } + } + return data; +}; + +var makeGraph = function(className, numSeries, numRows, isStacked) { + var demo = document.getElementById('demo'); + var div = document.createElement('div'); + div.className = className; + div.style.display = 'inline-block'; + div.style.margin = '4px'; + demo.appendChild(div); + + var labels = ['x']; + for (var i = 0; i < numSeries; ++i) { + var label = '' + i; + label = 's' + '000'.substr(label.length) + label; + labels[i + 1] = label; + } + var g = new Dygraph( + div, + getData(numSeries, numRows, isStacked), + { + width: 480, + height: 320, + labels: labels.slice(), + stackedGraph: isStacked, + + highlightCircleSize: 2, + strokeWidth: 1, + strokeBorderWidth: isStacked ? null : 1, + + highlightSeriesOpts: { + strokeWidth: 3, + strokeBorderWidth: 1, + highlightCircleSize: 5, + }, + }); + g.setSelection(false, 's005'); + //console.log(g); +}; + +makeGraph("few", 20, 50, false); +makeGraph("few", 10, 20, true); +makeGraph("many", 75, 50, false); +makeGraph("many", 40, 50, true); + } + }); diff --git a/gallery/index.html b/gallery/index.html index c593a77..ca10598 100644 --- a/gallery/index.html +++ b/gallery/index.html @@ -18,6 +18,7 @@ + -- 2.7.4