cleanup
[dygraphs.git] / tests / crosshair.html
CommitLineData
f18fd545
DV
1<!DOCTYPE html>
2<html>
3 <head>
4 <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">
5 <title>crosshairs</title>
6 <!--[if IE]>
7 <script type="text/javascript" src="../excanvas.js"></script>
8 <![endif]-->
9 <!--
10 For production (minified) code, use:
11 <script type="text/javascript" src="dygraph-combined.js"></script>
12 -->
13 <script type="text/javascript" src="../dygraph-dev.js"></script>
14
15 <script type="text/javascript" src="data.js"></script>
2eac5b0e
DV
16 <style type="text/css">
17 .line {
18 visibility: hidden;
19 background-color: black;
20 position: absolute;
21 pointer-events: none; /* let mouse events fall through to the chart */
22 }
23 .yline {
24 width: 100%;
25 height: 1px;
26 }
27 .xline {
28 height: 100%;
29 width: 1px;
30 }
31 </style>
f18fd545
DV
32 </head>
33 <body>
34 <p>Hover, click and zoom to test the callbacks:</p>
35 <div id="div_g" style="width:600px; height:300px; position:relative;">
36 </div>
37
38 <script type="text/javascript">
39 var lines = [];
40 var xline;
41 g = new Dygraph(
42 document.getElementById("div_g"),
43 NoisyData, {
44 rollPeriod: 7,
45 showRoller: true,
46 errorBars: true,
47
48 highlightCallback: function(e, x, pts) {
49 for (var i = 0; i < pts.length; i++) {
50 var y = pts[i].canvasy;
2eac5b0e 51 lines[i].style.visibility = "visible";
f18fd545
DV
52 lines[i].style.top = y + "px";
53 if (i == 0) xline.style.left = pts[i].canvasx + "px";
54 }
2eac5b0e 55 xline.style.visibility = "visible";
f18fd545
DV
56 },
57
58 unhighlightCallback: function(e) {
59 for (var i = 0; i < 2; i++) {
2eac5b0e 60 lines[i].style.visibility = "hidden";
f18fd545 61 }
2eac5b0e 62 xline.style.visibility = "hidden";
f18fd545
DV
63 }
64 }
65 );
66
67 for (var i = 0; i < 2; i++) {
68 var line = document.createElement("div");
2eac5b0e 69 line.className = "line yline";
f18fd545
DV
70 document.getElementById("div_g").appendChild(line);
71 lines.push(line);
72 }
73
74 xline = document.createElement("div");
2eac5b0e 75 xline.className = "line xline";
f18fd545 76 xline.style.top = "0px";
f18fd545
DV
77 document.getElementById("div_g").appendChild(xline);
78 </script>
79 </body>
80</html>