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