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 makeClickCallback = function(graph) {
  31   var isLocked = false;
  32   return function(ev) {
  33     if (isLocked) {
  34       graph.clearSelection();
  35       isLocked = false;
  36     } else {
  37       graph.setSelection(graph.getSelection(), graph.getHighlightSeries(), true);
  38       isLocked = true;
  39     }
  40   };
  41 };
  42
  43 var makeGraph = function(className, numSeries, numRows, isStacked) {
  44   var demo = document.getElementById('demo');
  45   var div = document.createElement('div');
  46   div.className = className;
  47   div.style.display = 'inline-block';
  48   div.style.margin = '4px';
  49   demo.appendChild(div);
  50
  51   var labels = ['x'];
  52   for (var i = 0; i < numSeries; ++i) {
  53     var label = '' + i;
  54     label = 's' + '000'.substr(label.length) + label;
  55     labels[i + 1] = label;
  56   }
  57   var g = new Dygraph(
  58       div,
  59       getData(numSeries, numRows, isStacked),
  60       {
  61         width: 480,
  62         height: 320,
  63         labels: labels.slice(),
  64         stackedGraph: isStacked,
  65
  66         highlightCircleSize: 2,
  67         strokeWidth: 1,
  68         strokeBorderWidth: isStacked ? null : 1,
  69
  70         highlightSeriesOpts: {
  71           strokeWidth: 3,
  72           strokeBorderWidth: 1,
  73           highlightCircleSize: 5,
  74         },
  75       });
  76   g.updateOptions({clickCallback: makeClickCallback(g)}, true);
  77   g.setSelection(false, 's005');
  78   //console.log(g);
  79 };
  80
  81 makeGraph("few", 20, 50, false);
  82 makeGraph("few", 10, 20, true);
  83 makeGraph("many", 75, 50, false);
  84 makeGraph("many", 40, 50, true);
  85     }
  86   });