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