Add closest-series highlighting demo to gallery

This is a port of tests/series-highlight.html.

diff --git a/gallery/gallery.css b/gallery/gallery.css
index 74bbbef..d1da4a3 100644 (file)
--- 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 (file)
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 = "<div id='demo'></div>";
+    },
+    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 (file)
--- a/gallery/index.html
+++ b/gallery/index.html
@@ -18,6 +18,7 @@
     <script src="annotations.js"></script>
     <script src="drawing.js"></script>
     <script src="dynamic-update.js"></script>
+    <script src="highlighted-series.js"></script>
     <script src="highlighted-region.js"></script>
     <script src="independent-series.js"></script>
     <script src="plotter.js"></script>