tests/css-positioning.html

   1 <!DOCTYPE html>
   2 <html>
   3   <head>
   4     <link rel="stylesheet" href="../css/dygraph.css">
   5     <title>demo</title>
   6     <script type="text/javascript" src="../dist/dygraph.js"></script>
   7     <style>
   8       /* Changing 'body' -> 'html, body' triggers a bug */
   9       body {
  10         margin-left: 100px;
  11       }
  12
  13       .container {
  14         text-align: center;
  15       }
  16     </style>
  17   </head>
  18   <body>
  19     <p>Mouseovers should work as expected (dots should align with mouse)</p>
  20     <div id="demodiv"></div>
  21
  22     <script type="text/javascript">
  23       function Data() {
  24         var zp = function(x) { if (x < 10) return "0"+x; else return x; };
  25         var r = "date,parabola,line,another line,sine wave\n";
  26         for (var i=1; i<=31; i++) {
  27         r += "200610" + zp(i);
  28         r += "," + 10*(i*(31-i));
  29         r += "," + 10*(8*i);
  30         r += "," + 10*(250 - 8*i);
  31         r += "," + 10*(125 + 125 * Math.sin(0.3*i));
  32         r += "\n";
  33         }
  34         return r;
  35       }
  36
  37       g = new Dygraph(
  38               document.getElementById("demodiv"),
  39               Data,
  40               {
  41                 labelsKMB: true,
  42                 legend: 'always'
  43               }
  44           );
  45     </script>
  46
  47     <br/>
  48     <div class="container">
  49       <div id="chart2"></div>
  50     </div>
  51
  52     <script type="text/javascript">
  53       g = new Dygraph(
  54               document.getElementById("chart2"),
  55               Data,
  56               {
  57                 labelsKMB: true,
  58                 legend: 'always'
  59               }
  60           );
  61     </script>
  62 </body>
  63 </html>