tests/iframe.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
   8     <style type="text/css">
   9       .chart {
  10         position: absolute;
  11         left: 10px;
  12         width: 500px;
  13         height: 250px;
  14         border: 1px solid black;
  15       }
  16       #chart1 {
  17         top: 10px;
  18       }
  19       #chart2 {
  20         top: 270px;
  21       }
  22       #iframe {
  23         border: 1px solid black;
  24         position: absolute;
  25         left: 520px;
  26       }
  27       p {
  28         position: absolute;
  29         top: 550px;
  30       }
  31     </style>
  32   </head>
  33   <body>
  34     <div class="chart" id="chart1"></div>
  35     <div class="chart" id="chart2"></div>
  36     <iframe id="iframe" width=400 height=520 src="http://en.wikipedia.org/">iframe here</iframe>
  37
  38     <p>Click on various places in the chart, then drag the mouse over the iframe
  39     and release it. When you mouse back over the charts, strange things shouldn't
  40     happen.</p>
  41
  42     <script type="text/javascript">
  43       var data = function() {
  44         var zp = function(x) { if (x < 10) return "0"+x; else return x; };
  45         var r = "date,parabola,line,another line,sine wave\n";
  46         for (var i=1; i<=31; i++) {
  47         r += "200610" + zp(i);
  48         r += "," + 10*(i*(31-i));
  49         r += "," + 10*(8*i);
  50         r += "," + 10*(250 - 8*i);
  51         r += "," + 10*(125 + 125 * Math.sin(0.3*i));
  52         r += "\n";
  53         }
  54         return r;
  55       };
  56
  57       g1 = new Dygraph(
  58               document.getElementById("chart1"), data,
  59               { }
  60           );
  61       g2 = new Dygraph(
  62               document.getElementById("chart2"), data,
  63               {
  64                 showRangeSelector: true
  65               }
  66           );
  67     </script>
  68 </body>
  69 </html>