setup: function(parent) {
parent.innerHTML =
"<div id='div_g' style='width:600px; height:300px;'></div>" +
- "<input type='button' value='Clear list' onclick='clearStatus()' />" +
+ "<button id='clear'>Clear list<Button>" +
"<input type='checkbox' id='highlight' checked><label for='highlight'> Show 'highlight' events</label>" +
"<input type='checkbox' id='unhighlight' checked><label for='unhighlight'>Show 'unhighlight' events</label>" +
- "<input type='checkbox' id='showLabels' checked onclick='g.updateOptions({showLabelsOnHighlight: this.checked});'>" +
+ "<input type='checkbox' id='showLabels' checked>" +
"<label for='showLabels'> Show Labels on highlight</label>" +
"<div id='status' style='width:100%; height:200px;'></div>";
},
run: function() {
- window.clearStatus = function() {
- document.getElementById('status').innerHTML='';
+ var showLabels = document.getElementById('showLabels');
+ showLabels.onclick = function() {
+ g.updateOptions({showLabelsOnHighlight: showLabels.checked});
+ }
+
+ var s = document.getElementById("status");
+ var clearStatus = function() {
+ s.innerHTML = '';
+ }
+ document.getElementById('clear').onclick = clearStatus;
+
+ var g = null;
+ pts_info = function(e, x, pts, row) {
+ var str = "(" + x + ") ";
+ for (var i = 0; i < pts.length; i++) {
+ var p = pts[i];
+ if (i) str += ", ";
+ str += p.name + ": " + p.yval;
}
- s = document.getElementById("status");
- window.g = null;
- pts_info = function(e, x, pts, row) {
- var str = "(" + x + ") ";
- for (var i = 0; i < pts.length; i++) {
- var p = pts[i];
- if (i) str += ", ";
- str += p.name + ": " + p.yval;
- }
-
- var x = e.offsetX;
- var y = e.offsetY;
- var dataXY = window.g.toDataCoords(x, y);
- str += ", (" + x + ", " + y + ")";
- str += " -> (" + dataXY[0] + ", " + dataXY[1] + ")";
- str += ", row #"+row;
-
- return str;
- };
-
- window.g = new Dygraph(
- document.getElementById("div_g"),
- NoisyData, {
- rollPeriod: 7,
- showRoller: true,
- errorBars: true,
+
+ var x = e.offsetX;
+ var y = e.offsetY;
+ var dataXY = g.toDataCoords(x, y);
+ str += ", (" + x + ", " + y + ")";
+ str += " -> (" + dataXY[0] + ", " + dataXY[1] + ")";
+ str += ", row #"+row;
+
+ return str;
+ };
+
+ g = new Dygraph(
+ document.getElementById("div_g"),
+ NoisyData, {
+ rollPeriod: 7,
+ showRoller: true,
+ errorBars: true,
- highlightCallback: function(e, x, pts, row) {
- if (document.getElementById('highlight').checked) {
- s.innerHTML += "<b>Highlight</b> " + pts_info(e,x,pts,row) + "<br/>";
- }
- },
+ highlightCallback: function(e, x, pts, row) {
+ if (document.getElementById('highlight').checked) {
+ s.innerHTML += "<b>Highlight</b> " + pts_info(e,x,pts,row) + "<br/>";
+ }
+ },
- unhighlightCallback: function(e) {
- if (document.getElementById('unhighlight').checked) {
- s.innerHTML += "<b>Unhighlight</b><br/>";
- }
- },
+ unhighlightCallback: function(e) {
+ if (document.getElementById('unhighlight').checked) {
+ s.innerHTML += "<b>Unhighlight</b><br/>";
+ }
+ },
- clickCallback: function(e, x, pts) {
- s.innerHTML += "<b>Click</b> " + pts_info(e,x,pts) + "<br/>";
- },
+ clickCallback: function(e, x, pts) {
+ s.innerHTML += "<b>Click</b> " + pts_info(e,x,pts) + "<br/>";
+ },
- pointClickCallback: function(e, p) {
- s.innerHTML += "<b>Point Click</b> " + p.name + ": " + p.x + "<br/>";
- },
+ pointClickCallback: function(e, p) {
+ s.innerHTML += "<b>Point Click</b> " + p.name + ": " + p.x + "<br/>";
+ },
- zoomCallback: function(minX, maxX, yRanges) {
- s.innerHTML += "<b>Zoom</b> [" + minX + ", " + maxX + ", [" + yRanges + "]]<br/>";
- },
+ zoomCallback: function(minX, maxX, yRanges) {
+ s.innerHTML += "<b>Zoom</b> [" + minX + ", " + maxX + ", [" + yRanges + "]]<br/>";
+ },
- drawCallback: function(g) {
- s.innerHTML += "<b>Draw</b> [" + g.xAxisRange() + "]<br/>";
- }
- }
- );
+ drawCallback: function(g) {
+ s.innerHTML += "<b>Draw</b> [" + g.xAxisRange() + "]<br/>";
+ }
+ }
+ );
}
});