tests/crosshair.html

   1 <!DOCTYPE html>
   2 <html>
   3   <head>
   4     <title>crosshairs</title>
   5     <!--
   6     For production (minified) code, use:
   7     <script type="text/javascript" src="dygraph-combined.js"></script>
   8     -->
   9     <script type="text/javascript" src="../dygraph-dev.js"></script>
  10
  11     <script type="text/javascript" src="data.js"></script>
  12     <style type="text/css">
  13       .line {
  14         visibility: hidden;
  15         background-color: black;
  16         position: absolute;
  17         pointer-events: none;  /* let mouse events fall through to the chart */
  18       }
  19       .yline {
  20         width: 100%;
  21         height: 1px;
  22       }
  23       .xline {
  24         height: 100%;
  25         width: 1px;
  26       }
  27     </style>
  28   </head>
  29   <body>
  30     <p>Hover, click and zoom to test the callbacks:</p>
  31     <div id="div_g" style="width:600px; height:300px; position:relative;">
  32     </div>
  33
  34     <script type="text/javascript">
  35       var lines = [];
  36       var xline;
  37       g = new Dygraph(
  38             document.getElementById("div_g"),
  39             NoisyData, {
  40               rollPeriod: 7,
  41               showRoller: true,
  42               errorBars: true,
  43
  44               highlightCallback: function(e, x, pts) {
  45                 for (var i = 0; i < pts.length; i++) {
  46                   var y = pts[i].canvasy;
  47                   lines[i].style.visibility = "visible";
  48                   lines[i].style.top = y + "px";
  49                   if (i == 0) xline.style.left = pts[i].canvasx + "px";
  50                 }
  51                 xline.style.visibility = "visible";
  52               },
  53
  54               unhighlightCallback: function(e) {
  55                 for (var i = 0; i < 2; i++) {
  56                   lines[i].style.visibility = "hidden";
  57                 }
  58                 xline.style.visibility = "hidden";
  59               }
  60             }
  61           );
  62
  63       for (var i = 0; i < 2; i++) {
  64         var line = document.createElement("div");
  65         line.className = "line yline";
  66         document.getElementById("div_g").appendChild(line);
  67         lines.push(line);
  68       }
  69
  70       xline = document.createElement("div");
  71       xline.className = "line xline";
  72       xline.style.top = "0px";
  73       document.getElementById("div_g").appendChild(xline);
  74     </script>
  75   </body>
  76 </html>