tests/series-highlight.html

   1 <!DOCTYPE html>
   2 <html>
   3   <head>
   4     <link rel="stylesheet" href="../dist/dygraph.css">
   5     <title>Series highlighting</title>
   6     <script type="text/javascript" src="../dist/dygraph.js"></script>
   7
   8     <style type='text/css'>
   9       .few .dygraph-legend > span.highlight { border: 1px solid grey; }
  10       .many .dygraph-legend > span { display: none; }
  11       .many .dygraph-legend > span.highlight { display: inline; }
  12     </style>
  13   </head>
  14   <body>
  15     <h2>Series highlighting demo</h2>
  16 <script type='text/javascript'>
  17
  18 var getData = function(numSeries, numRows, isStacked) {
  19   var data = [];
  20
  21   for (var j = 0; j < numRows; ++j) {
  22     data[j] = [j];
  23   }
  24   for (var i = 0; i < numSeries; ++i) {
  25     var val = 0;
  26     for (var j = 0; j < numRows; ++j) {
  27       if (isStacked) {
  28         val = Math.random();
  29       } else {
  30         val += Math.random() - 0.5;
  31       }
  32       data[j][i + 1] = val;
  33     }
  34   }
  35   return data;
  36 };
  37
  38 var makeGraph = function(className, numSeries, numRows, isStacked) {
  39   var div = document.createElement('div');
  40   div.className = className;
  41   div.style.display = 'inline-block';
  42   document.body.appendChild(div);
  43
  44   var labels = ['x'];
  45   for (var i = 0; i < numSeries; ++i) {
  46     var label = '' + i;
  47     label = 's' + '000'.substr(label.length) + label;
  48     labels[i + 1] = label;
  49   }
  50   var g = new Dygraph(
  51       div,
  52       getData(numSeries, numRows, isStacked),
  53       {
  54         width: 480,
  55         height: 320,
  56         labels: labels.slice(),
  57         stackedGraph: isStacked,
  58
  59         highlightCircleSize: 2,
  60         strokeWidth: 1,
  61         strokeBorderWidth: isStacked ? null : 1,
  62
  63         highlightSeriesOpts: {
  64           strokeWidth: 3,
  65           strokeBorderWidth: 1,
  66           highlightCircleSize: 5,
  67         },
  68       });
  69   g.setSelection(false, 's005');
  70   //console.log(g);
  71 };
  72
  73 makeGraph("few", 20, 50, false);
  74 makeGraph("few", 10, 20, true);
  75 makeGraph("many", 75, 50, false);
  76 makeGraph("many", 40, 50, true);
  77 </script>
  78 </body>
  79 </html>