| | 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> |
projects / dygraphs.git / blame_incremental