tests/crosshair.html

   1 <!DOCTYPE html>
   2 <html>
   3   <head>
   4     <link rel="stylesheet" href="../css/dygraph.css">
   5     <title>crosshairs</title>
   6     <!--
   7     For production (minified) code, use:
   8     <script type="text/javascript" src="dygraph-combined.js"></script>
   9     -->
  10     <script type="text/javascript" src="../dist/dygraph.js"></script>
  11
  12     <script type="text/javascript" src="../src/extras/crosshair.js"></script>
  13     <script type="text/javascript" src="data.js"></script>
  14   </head>
  15   <body>
  16     <p>Vertical crosshair:</p>
  17     <div id="div_g_v" style="width:600px; height:300px; position:relative;">
  18     </div>
  19
  20     <p>Horizontal crosshairs:</p>
  21     <div id="div_g_h" style="width:600px; height:300px; position:relative;">
  22     </div>
  23
  24     <p>Both crosshairs:</p>
  25     <div id="div_g_b" style="width:600px; height:300px; position:relative;">
  26     </div>
  27
  28     <script type="text/javascript">
  29       gv = new Dygraph(
  30         document.getElementById("div_g_v"),
  31         NoisyData,
  32         {
  33           rollPeriod: 7,
  34           showRoller: true,
  35           errorBars: true,
  36
  37           plugins: [
  38             new Dygraph.Plugins.Crosshair({
  39               direction: "vertical"
  40             })
  41           ]
  42         }
  43       );
  44       gh = new Dygraph(
  45         document.getElementById("div_g_h"),
  46         NoisyData, {
  47           rollPeriod: 7,
  48           showRoller: true,
  49           errorBars: true,
  50
  51           plugins: [
  52             new Dygraph.Plugins.Crosshair({
  53               direction: "horizontal"
  54             })
  55           ]
  56         }
  57       );
  58       gb = new Dygraph(
  59         document.getElementById("div_g_b"),
  60         NoisyData, {
  61           rollPeriod: 7,
  62           showRoller: true,
  63           errorBars: true,
  64
  65           plugins: [
  66             new Dygraph.Plugins.Crosshair({
  67               direction: "both"
  68             })
  69           ]
  70         }
  71       );
  72     </script>
  73   </body>
  74 </html>