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