tests/series-highlight.html

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