projects / dygraphs.git / blame
| Commit | Line | Data |
|---|---|---|
| 54425b14 | 1 | <!DOCTYPE html> |
| b258a3da DV |
2 | <html> |
| 3 | <head> | |
| 4 | <title>callbacks</title> | |
| 7e5ddc94 DV |
5 | <!-- |
| 6 | For production (minified) code, use: | |
| 7 | <script type="text/javascript" src="dygraph-combined.js"></script> | |
| 8 | --> | |
| 9 | <script type="text/javascript" src="../dygraph-dev.js"></script> | |
| 10 | ||
| b258a3da | 11 | <script type="text/javascript" src="data.js"></script> |
| 3230c662 DV |
12 | <style type="text/css"> |
| 13 | #div_g { | |
| 14 | position: absolute; | |
| 15 | left: 200px; | |
| 16 | top: 100px; | |
| 17 | } | |
| 18 | #status { | |
| 19 | position: absolute; | |
| 20 | top: 400px; | |
| 21 | } | |
| 22 | </style> | |
| b258a3da DV |
23 | </head> |
| 24 | <body> | |
| 25 | <p>Hover, click and zoom to test the callbacks:</p> | |
| d16579a0 | 26 | <div id="div_g" style="width:600px; height:300px;"></div> |
| b258a3da | 27 | |
| 599fb4ad DV |
28 | <input type="button" value="Clear list" onclick="javascript:document.getElementById('status').innerHTML=''" /> |
| 29 | <input type="checkbox" id="highlight" checked><label for="highlight"> Show 'highlight' events</label> | |
| a4c6a67c | 30 | <input type="checkbox" id="unhighlight" checked><label for="unhighlight">Show 'unhighlight' events</label> |
| 50360fd0 NK |
31 | <input type="checkbox" id="showLabels" checked |
| 32 | onclick='g.updateOptions({showLabelsOnHighlight: this.checked});'> | |
| 8bc236f9 | 33 | <label for="showLabels"> Show Labels on highlight</label> |
| b258a3da DV |
34 | <div id="status" style="width:100%; height:200px;"></div> |
| 35 | ||
| 36 | <script type="text/javascript"> | |
| 37 | s = document.getElementById("status"); | |
| 3230c662 | 38 | g = null; |
| 2ddb1197 | 39 | pts_info = function(e, x, pts, row) { |
| b258a3da DV |
40 | var str = "(" + x + ") "; |
| 41 | for (var i = 0; i < pts.length; i++) { | |
| 42 | var p = pts[i]; | |
| 43 | if (i) str += ", "; | |
| 3230c662 | 44 | str += p.name + ": " + p.yval; |
| b258a3da | 45 | } |
| 3230c662 DV |
46 | |
| 47 | var x = e.offsetX; | |
| 48 | var y = e.offsetY; | |
| 49 | var dataXY = g.toDataCoords(x, y); | |
| 50 | str += ", (" + x + ", " + y + ")"; | |
| 51 | str += " -> (" + dataXY[0] + ", " + dataXY[1] + ")"; | |
| 2ddb1197 | 52 | str += ", row #"+row; |
| 3230c662 | 53 | |
| b258a3da DV |
54 | return str; |
| 55 | }; | |
| 56 | ||
| 57 | g = new Dygraph( | |
| d16579a0 | 58 | document.getElementById("div_g"), |
| b258a3da DV |
59 | NoisyData, { |
| 60 | rollPeriod: 7, | |
| 61 | showRoller: true, | |
| 62 | errorBars: true, | |
| 63 | ||
| 2ddb1197 | 64 | highlightCallback: function(e, x, pts, row) { |
| 599fb4ad | 65 | if (document.getElementById('highlight').checked) { |
| 2ddb1197 | 66 | s.innerHTML += "<b>Highlight</b> " + pts_info(e,x,pts,row) + "<br/>"; |
| 599fb4ad | 67 | } |
| b258a3da DV |
68 | }, |
| 69 | ||
| a4c6a67c AV |
70 | unhighlightCallback: function(e) { |
| 71 | if (document.getElementById('unhighlight').checked) { | |
| 72 | s.innerHTML += "<b>Unhighlight</b><br/>"; | |
| 73 | } | |
| 74 | }, | |
| 75 | ||
| b258a3da | 76 | clickCallback: function(e, x, pts) { |
| 3230c662 | 77 | s.innerHTML += "<b>Click</b> " + pts_info(e,x,pts) + "<br/>"; |
| b258a3da DV |
78 | }, |
| 79 | ||
| 1e1bf7df DV |
80 | pointClickCallback: function(e, p) { |
| 81 | s.innerHTML += "<b>Point Click</b> " + p.name + ": " + p.x + "<br/>"; | |
| 82 | }, | |
| 83 | ||
| 8d4465c4 RK |
84 | zoomCallback: function(minX, maxX, yRanges) { |
| 85 | s.innerHTML += "<b>Zoom</b> [" + minX + ", " + maxX + ", [" + yRanges + "]]<br/>"; | |
| 599fb4ad DV |
86 | }, |
| 87 | ||
| 88 | drawCallback: function(g) { | |
| 89 | s.innerHTML += "<b>Draw</b> [" + g.xAxisRange() + "]<br/>"; | |
| b258a3da DV |
90 | } |
| 91 | } | |
| 92 | ); | |
| 93 | </script> | |
| 94 | </body> | |
| 95 | </html> |