tests/series-highlight.html

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