tests/callback.html

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