Set this for drawCallback
[dygraphs.git] / 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>