4 <link rel=
"stylesheet" href=
"../css/dygraph.css">
5 <title>callbacks
</title>
7 For production (minified) code, use:
8 <script type=
"text/javascript" src=
"dygraph-combined.js"></script>
10 <script type=
"text/javascript" src=
"../dist/dygraph.js"></script>
12 <script type=
"text/javascript" src=
"data.js"></script>
13 <style type=
"text/css">
26 <p>Hover, click and zoom to test the callbacks:
</p>
27 <div id=
"div_g" style=
"width:600px; height:300px;"></div>
29 <input type=
"button" value=
"Clear list" onclick=
"javascript:document.getElementById('status').innerHTML=''" />
30 <input type=
"checkbox" id=
"highlight" checked
><label for=
"highlight"> Show 'highlight' events
</label>
31 <input type=
"checkbox" id=
"unhighlight" checked
><label for=
"unhighlight">Show 'unhighlight' events
</label>
32 <input type=
"checkbox" id=
"showLabels" checked
33 onclick='g.updateOptions({showLabelsOnHighlight: this.checked});'
>
34 <label for=
"showLabels"> Show Labels on highlight
</label>
35 <div id=
"status" style=
"width:100%; height:200px;"></div>
37 <script type=
"text/javascript">
38 s = document.getElementById(
"status");
40 pts_info = function(e, x, pts, row) {
41 var str =
"(" + x +
") ";
42 for (var i =
0; i < pts.length; i++) {
45 str += p.name +
": " + p.yval;
50 var dataXY = g.toDataCoords(x, y);
51 str +=
", (" + x +
", " + y +
")";
52 str +=
" -> (" + dataXY[
0] +
", " + dataXY[
1] +
")";
59 document.getElementById(
"div_g"),
65 highlightCallback: function(e, x, pts, row) {
66 if (document.getElementById('highlight').checked) {
67 s.innerHTML +=
"<b>Highlight</b> " + pts_info(e,x,pts,row) +
"<br/>";
71 unhighlightCallback: function(e) {
72 if (document.getElementById('unhighlight').checked) {
73 s.innerHTML +=
"<b>Unhighlight</b><br/>";
77 clickCallback: function(e, x, pts) {
78 s.innerHTML +=
"<b>Click</b> " + pts_info(e,x,pts) +
"<br/>";
81 pointClickCallback: function(e, p) {
82 s.innerHTML +=
"<b>Point Click</b> " + p.name +
": " + p.x +
"<br/>";
85 zoomCallback: function(minX, maxX, yRanges) {
86 s.innerHTML +=
"<b>Zoom</b> [" + minX +
", " + maxX +
", [" + yRanges +
"]]<br/>";
89 drawCallback: function(g) {
90 s.innerHTML +=
"<b>Draw</b> [" + g.xAxisRange() +
"]<br/>";