tests/callback.html

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