[dygraphs.git] / tests / crosshair.html

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="../dist/dygraph.css">
    <title>crosshairs</title>
    <script type="text/javascript" src="../dist/dygraph.js"></script>

    <script type="text/javascript" src="../src/extras/crosshair.js"></script>
    <script type="text/javascript" src="data.js"></script>
  </head>
  <body>
    <p>Vertical crosshair:</p>
    <div id="div_g_v" style="width:600px; height:300px; position:relative;">
    </div>

    <p>Horizontal crosshairs:</p>
    <div id="div_g_h" style="width:600px; height:300px; position:relative;">
    </div>

    <p>Both crosshairs:</p>
    <div id="div_g_b" style="width:600px; height:300px; position:relative;">
    </div>

    <script type="text/javascript">
      gv = new Dygraph(
        document.getElementById("div_g_v"),
        NoisyData,
        {
          rollPeriod: 7,
          showRoller: true,
          errorBars: true,

          plugins: [
            new Dygraph.Plugins.Crosshair({
              direction: "vertical"
            })
          ]
        }
      );
      gh = new Dygraph(
        document.getElementById("div_g_h"),
        NoisyData, {
          rollPeriod: 7,
          showRoller: true,
          errorBars: true,

          plugins: [
            new Dygraph.Plugins.Crosshair({
              direction: "horizontal"
            })
          ]
        }
      );
      gb = new Dygraph(
        document.getElementById("div_g_b"),
        NoisyData, {
          rollPeriod: 7,
          showRoller: true,
          errorBars: true,

          plugins: [
            new Dygraph.Plugins.Crosshair({
              direction: "both"
            })
          ]
        }
      );
    </script>
  </body>
</html>
Commit	Line	Data
	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>