gallery/highlighted-series.js

   1 /*global Gallery,Dygraph,data */
   2 Gallery.register(
   3   'highlighted-series',
   4   {
   5     name: 'Highlight Closest Series',
   6     title: 'Interactive closest-series highlighting',
   7     setup: function(parent) {
   8       parent.innerHTML = "<div id='demo'></div>";
   9     },
  10     run: function() {
  11 var getData = function(numSeries, numRows, isStacked) {
  12   var data = [];
  13
  14   for (var j = 0; j < numRows; ++j) {
  15     data[j] = [j];
  16   }
  17   for (var i = 0; i < numSeries; ++i) {
  18     var val = 0;
  19     for (var j = 0; j < numRows; ++j) {
  20       if (isStacked) {
  21         val = Math.random();
  22       } else {
  23         val += Math.random() - 0.5;
  24       }
  25       data[j][i + 1] = val;
  26     }
  27   }
  28   return data;
  29 };
  30
  31 var makeGraph = function(className, numSeries, numRows, isStacked) {
  32   var demo = document.getElementById('demo');
  33   var div = document.createElement('div');
  34   div.className = className;
  35   div.style.display = 'inline-block';
  36   div.style.margin = '4px';
  37   demo.appendChild(div);
  38
  39   var labels = ['x'];
  40   for (var i = 0; i < numSeries; ++i) {
  41     var label = '' + i;
  42     label = 's' + '000'.substr(label.length) + label;
  43     labels[i + 1] = label;
  44   }
  45   var g = new Dygraph(
  46       div,
  47       getData(numSeries, numRows, isStacked),
  48       {
  49         width: 480,
  50         height: 320,
  51         labels: labels.slice(),
  52         stackedGraph: isStacked,
  53
  54         highlightCircleSize: 2,
  55         strokeWidth: 1,
  56         strokeBorderWidth: isStacked ? null : 1,
  57
  58         highlightSeriesOpts: {
  59           strokeWidth: 3,
  60           strokeBorderWidth: 1,
  61           highlightCircleSize: 5
  62         }
  63       });
  64   var onclick = function(ev) {
  65     if (g.isSeriesLocked()) {
  66       g.clearSelection();
  67     } else {
  68       g.setSelection(g.getSelection(), g.getHighlightSeries(), true);
  69     }
  70   };
  71   g.updateOptions({clickCallback: onclick}, true);
  72   g.setSelection(false, 's005');
  73   //console.log(g);
  74 };
  75
  76 makeGraph("few", 20, 50, false);
  77 makeGraph("few", 10, 20, true);
  78 makeGraph("many", 75, 50, false);
  79 makeGraph("many", 40, 50, true);
  80     }
  81   });