tests/crosshair.html

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