Merge branch 'master' of https://github.com/kberg/dygraphs
[dygraphs.git] / tests / crosshair.html
CommitLineData
54425b14 1<!DOCTYPE html>
22587203
DV
2<html>
3 <head>
10494b48 4 <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">
22587203
DV
5 <title>crosshairs</title>
6 <!--[if IE]>
a2b2c3a1 7 <script type="text/javascript" src="../excanvas.js"></script>
22587203 8 <![endif]-->
d37dca40
DV
9 <script type="text/javascript" src="../strftime/strftime-min.js"></script>
10 <script type="text/javascript" src="../rgbcolor/rgbcolor.js"></script>
22587203
DV
11 <script type="text/javascript" src="../dygraph-canvas.js"></script>
12 <script type="text/javascript" src="../dygraph.js"></script>
13 <script type="text/javascript" src="data.js"></script>
14 </head>
15 <body>
16 <p>Hover, click and zoom to test the callbacks:</p>
d16579a0 17 <div id="div_g" style="width:600px; height:300px; position:relative;">
22587203
DV
18 </div>
19
20 <script type="text/javascript">
21 var lines = [];
22 var xline;
23 g = new Dygraph(
d16579a0 24 document.getElementById("div_g"),
22587203
DV
25 NoisyData, {
26 rollPeriod: 7,
27 showRoller: true,
28 errorBars: true,
29
30 highlightCallback: function(e, x, pts) {
31 for (var i = 0; i < pts.length; i++) {
32 var y = pts[i].canvasy;
a4c6a67c 33 lines[i].style.display = "";
22587203
DV
34 lines[i].style.top = y + "px";
35 if (i == 0) xline.style.left = pts[i].canvasx + "px";
36 }
a4c6a67c
AV
37 xline.style.display = "";
38 },
22587203 39
a4c6a67c
AV
40 unhighlightCallback: function(e) {
41 for (var i = 0; i < 2; i++) {
42 lines[i].style.display = "none";
43 }
44 xline.style.display = "none";
d16579a0 45 }
22587203
DV
46 }
47 );
48
49 for (var i = 0; i < 2; i++) {
50 var line = document.createElement("div");
a4c6a67c 51 line.style.display = "none";
22587203
DV
52 line.style.width = "100%";
53 line.style.height = "1px";
54 line.style.backgroundColor = "black";
55 line.style.position = "absolute";
d16579a0 56 document.getElementById("div_g").appendChild(line);
22587203
DV
57 lines.push(line);
58 }
59
60 xline = document.createElement("div");
a4c6a67c 61 xline.style.display = "none";
22587203
DV
62 xline.style.width = "1px";
63 xline.style.height = "100%";
64 xline.style.top = "0px";
65 xline.style.backgroundColor = "black";
66 xline.style.position = "absolute";
d16579a0 67 document.getElementById("div_g").appendChild(xline);
22587203
DV
68 </script>
69 </body>
70</html>