Commit | Line | Data |
---|---|---|
c1f22b5a RK |
1 | Gallery.register( |
2 | 'callbacks', | |
3 | { | |
4 | name: "Callbacks", | |
5 | title: "Hover, click and zoom to test the callbacks.", | |
6 | setup: function(parent) { | |
7 | parent.innerHTML = | |
8 | "<div id='div_g' style='width:600px; height:300px;'></div>" + | |
9 | "<input type='button' value='Clear list' onclick='clearStatus()' />" + | |
10 | "<input type='checkbox' id='highlight' checked><label for='highlight'> Show 'highlight' events</label>" + | |
11 | "<input type='checkbox' id='unhighlight' checked><label for='unhighlight'>Show 'unhighlight' events</label>" + | |
12 | "<input type='checkbox' id='showLabels' checked onclick='g.updateOptions({showLabelsOnHighlight: this.checked});'>" + | |
13 | "<label for='showLabels'> Show Labels on highlight</label>" + | |
14 | "<div id='status' style='width:100%; height:200px;'></div>"; | |
15 | }, | |
16 | run: function() { | |
17 | window.clearStatus = function() { | |
18 | document.getElementById('status').innerHTML=''; | |
19 | } | |
20 | s = document.getElementById("status"); | |
21 | window.g = null; | |
22 | pts_info = function(e, x, pts, row) { | |
23 | var str = "(" + x + ") "; | |
24 | for (var i = 0; i < pts.length; i++) { | |
25 | var p = pts[i]; | |
26 | if (i) str += ", "; | |
27 | str += p.name + ": " + p.yval; | |
28 | } | |
29 | ||
30 | var x = e.offsetX; | |
31 | var y = e.offsetY; | |
32 | var dataXY = window.g.toDataCoords(x, y); | |
33 | str += ", (" + x + ", " + y + ")"; | |
34 | str += " -> (" + dataXY[0] + ", " + dataXY[1] + ")"; | |
35 | str += ", row #"+row; | |
36 | ||
37 | return str; | |
38 | }; | |
39 | ||
40 | window.g = new Dygraph( | |
41 | document.getElementById("div_g"), | |
42 | NoisyData, { | |
43 | rollPeriod: 7, | |
44 | showRoller: true, | |
45 | errorBars: true, | |
46 | ||
47 | highlightCallback: function(e, x, pts, row) { | |
48 | if (document.getElementById('highlight').checked) { | |
49 | s.innerHTML += "<b>Highlight</b> " + pts_info(e,x,pts,row) + "<br/>"; | |
50 | } | |
51 | }, | |
52 | ||
53 | unhighlightCallback: function(e) { | |
54 | if (document.getElementById('unhighlight').checked) { | |
55 | s.innerHTML += "<b>Unhighlight</b><br/>"; | |
56 | } | |
57 | }, | |
58 | ||
59 | clickCallback: function(e, x, pts) { | |
60 | s.innerHTML += "<b>Click</b> " + pts_info(e,x,pts) + "<br/>"; | |
61 | }, | |
62 | ||
63 | pointClickCallback: function(e, p) { | |
64 | s.innerHTML += "<b>Point Click</b> " + p.name + ": " + p.x + "<br/>"; | |
65 | }, | |
66 | ||
67 | zoomCallback: function(minX, maxX, yRanges) { | |
68 | s.innerHTML += "<b>Zoom</b> [" + minX + ", " + maxX + ", [" + yRanges + "]]<br/>"; | |
69 | }, | |
70 | ||
71 | drawCallback: function(g) { | |
72 | s.innerHTML += "<b>Draw</b> [" + g.xAxisRange() + "]<br/>"; | |
73 | } | |
74 | } | |
75 | ); | |
76 | } | |
77 | }); |