Merge branch 'per-axis-grid' of https://github.com/sauter-hq/dygraphs into per-axis...
[dygraphs.git] / tests / callback.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">
5 <title>callbacks</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>
16 <style type="text/css">
17 #div_g {
18 position: absolute;
19 left: 200px;
20 top: 100px;
21 }
22 #status {
23 position: absolute;
24 top: 400px;
25 }
26 </style>
27 </head>
28 <body>
29 <p>Hover, click and zoom to test the callbacks:</p>
30 <div id="div_g" style="width:600px; height:300px;"></div>
31
32 <input type="button" value="Clear list" onclick="javascript:document.getElementById('status').innerHTML=''" />
33 <input type="checkbox" id="highlight" checked><label for="highlight"> Show 'highlight' events</label>
34 <input type="checkbox" id="unhighlight" checked><label for="unhighlight">Show 'unhighlight' events</label>
35 <input type="checkbox" id="showLabels" checked
36 onclick='g.updateOptions({showLabelsOnHighlight: this.checked});'>
37 <label for="showLabels"> Show Labels on highlight</label>
38 <div id="status" style="width:100%; height:200px;"></div>
39
40 <script type="text/javascript">
41 s = document.getElementById("status");
42 g = null;
43 pts_info = function(e, x, pts, row) {
44 var str = "(" + x + ") ";
45 for (var i = 0; i < pts.length; i++) {
46 var p = pts[i];
47 if (i) str += ", ";
48 str += p.name + ": " + p.yval;
49 }
50
51 var x = e.offsetX;
52 var y = e.offsetY;
53 var dataXY = g.toDataCoords(x, y);
54 str += ", (" + x + ", " + y + ")";
55 str += " -> (" + dataXY[0] + ", " + dataXY[1] + ")";
56 str += ", row #"+row;
57
58 return str;
59 };
60
61 g = new Dygraph(
62 document.getElementById("div_g"),
63 NoisyData, {
64 rollPeriod: 7,
65 showRoller: true,
66 errorBars: true,
67
68 highlightCallback: function(e, x, pts, row) {
69 if (document.getElementById('highlight').checked) {
70 s.innerHTML += "<b>Highlight</b> " + pts_info(e,x,pts,row) + "<br/>";
71 }
72 },
73
74 unhighlightCallback: function(e) {
75 if (document.getElementById('unhighlight').checked) {
76 s.innerHTML += "<b>Unhighlight</b><br/>";
77 }
78 },
79
80 clickCallback: function(e, x, pts) {
81 s.innerHTML += "<b>Click</b> " + pts_info(e,x,pts) + "<br/>";
82 },
83
84 pointClickCallback: function(e, p) {
85 s.innerHTML += "<b>Point Click</b> " + p.name + ": " + p.x + "<br/>";
86 },
87
88 zoomCallback: function(minX, maxX, yRanges) {
89 s.innerHTML += "<b>Zoom</b> [" + minX + ", " + maxX + ", [" + yRanges + "]]<br/>";
90 },
91
92 drawCallback: function(g) {
93 s.innerHTML += "<b>Draw</b> [" + g.xAxisRange() + "]<br/>";
94 }
95 }
96 );
97 </script>
98 </body>
99 </html>