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