tests/legend-values.html

   1 <!DOCTYPE html>
   2 <html>
   3   <head>
   4     <link rel="stylesheet" href="../dist/dygraph.css">
   5     <title>Label styles</title>
   6     <script type="text/javascript" src="../dist/dygraph.js"></script>
   7
   8     <script type="text/javascript" src="data.js"></script>
   9     <style type="text/css">
  10       .dygraph-legend {
  11         background-color: rgba(200, 200, 255, 0.75) !important;
  12         padding: 4px;
  13         border: 1px solid #000;
  14         border-radius: 10px;
  15         box-shadow: 4px 4px 4px #888;
  16         pointer-events: none;
  17         width: 100px;
  18       }
  19       pre {
  20         margin-top: 30px;
  21       }
  22     </style>
  23   </head>
  24   <body>
  25     <p>This page demonstrates different values for the <code><a href="http://dygraphs.com/options.html#legend">legend</a></code> option. Mouse over the charts to see the different behaviors.</p>
  26     <pre>legend: "follow":</pre>
  27     <div id="follow" style="width:600px; height:300px;"></div>
  28
  29     <pre>legend: "always":</pre>
  30     <div id="always" style="width:600px; height:300px;"></div>
  31
  32     <pre>legend: "never":</pre>
  33     <div id="never" style="width:600px; height:300px;"></div>
  34
  35     <pre>legend: "onmouseover" (the default):</pre>
  36     <div id="default" style="width:600px; height:300px;"></div>
  37
  38     <script type="text/javascript">
  39       function extend(obj1, obj2) {
  40         var obj = {};
  41         for (var k in obj1) {
  42           obj[k] = obj1[k];
  43         }
  44         for (var k in obj2) {
  45           obj[k] = obj2[k];
  46         }
  47         return obj;
  48       }
  49
  50       var baseOpts = {
  51         rollPeriod: 14,
  52         errorBars: true,
  53         labelsSeparateLines: true
  54       };
  55
  56       g_follow = new Dygraph(
  57             document.getElementById('follow'),
  58             NoisyData,
  59             extend(baseOpts, {legend: 'follow'}));
  60
  61       g_always = new Dygraph(
  62             document.getElementById('always'),
  63             NoisyData,
  64             extend(baseOpts, {legend: 'always'}));
  65
  66       g_never = new Dygraph(
  67             document.getElementById('never'),
  68             NoisyData,
  69             extend(baseOpts, {legend: 'never'}));
  70
  71       g_default = new Dygraph(
  72             document.getElementById('default'),
  73             NoisyData,
  74             baseOpts);
  75
  76     </script>
  77   </body>
  78 </html>