gallery/highlighted-series.js

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