tests/callback.html

   1 <html>
   2   <head>
   3     <title>callbacks</title>
   4     <!--[if IE]>
   5     <script type="text/javascript" src="excanvas.js"></script>
   6     <![endif]-->
   7     <script type="text/javascript" src="../dygraph-combined.js"></script>
   8     <script type="text/javascript" src="../dygraph-canvas.js"></script>
   9     <script type="text/javascript" src="../dygraph.js"></script>
  10     <script type="text/javascript" src="data.js"></script>
  11     <style type="text/css">
  12       #div_g {
  13         position: absolute;
  14         left: 200px;
  15         top: 100px;
  16       }
  17       #status {
  18         position: absolute;
  19         top: 400px;
  20       }
  21     </style>
  22   </head>
  23   <body>
  24     <p>Hover, click and zoom to test the callbacks:</p>
  25     <div id="div_g" style="width:600px; height:300px;"></div>
  26
  27     <input type="button" value="Clear list" onclick="javascript:document.getElementById('status').innerHTML=''" />
  28     <input type="checkbox" id="highlight" checked><label for="highlight"> Show 'highlight' events</label>
  29     <input type="checkbox" id="showLabels" checked
  30     onclick='g.updateOptions({showLabelsOnHighlight: this.checked});'>
  31     <label for="highlight"> Show Labels on highlight</label>
  32     <div id="status" style="width:100%; height:200px;"></div>
  33
  34     <script type="text/javascript">
  35       s = document.getElementById("status");
  36       g = null;
  37       pts_info = function(e, x, pts) {
  38         var str = "(" + x + ") ";
  39         for (var i = 0; i < pts.length; i++) {
  40           var p = pts[i];
  41           if (i) str += ", ";
  42           str += p.name + ": " + p.yval;
  43         }
  44
  45         var x = e.offsetX;
  46         var y = e.offsetY;
  47         var dataXY = g.toDataCoords(x, y);
  48         str += ", (" + x + ", " + y + ")";
  49         str += " -> (" + dataXY[0] + ", " + dataXY[1] + ")";
  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               showLabelsOnHighlight: true,
  61
  62               highlightCallback: function(e, x, pts) {
  63                 if (document.getElementById('highlight').checked) {
  64                   s.innerHTML += "<b>Highlight</b> " + pts_info(e,x,pts) + "<br/>";
  65                 }
  66               },
  67
  68               clickCallback: function(e, x, pts) {
  69                 s.innerHTML += "<b>Click</b> " + pts_info(e,x,pts) + "<br/>";
  70               },
  71
  72               zoomCallback: function(minX, maxX) {
  73                 s.innerHTML += "<b>Zoom</b> [" + minX + ", " + maxX + "]<br/>";
  74               },
  75
  76               drawCallback: function(g) {
  77                 s.innerHTML += "<b>Draw</b> [" + g.xAxisRange() + "]<br/>";
  78               }
  79             }
  80           );
  81     </script>
  82   </body>
  83 </html>