[dygraphs.git] / tests / crosshair.html

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="../css/dygraph.css">
    <title>crosshairs</title>
    <!--
    For production (minified) code, use:
    <script type="text/javascript" src="dygraph-combined.js"></script>
    -->
    <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="../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>