tests/iframe.html

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