tests/iframe.html

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