tests/crosshair.html

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