tests/css-positioning.html

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