tests/series-highlight.html

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