| 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 | }); |