Merge pull request #678 from danvk/dygraphs-css
[dygraphs.git] / tests / crosshair.html
... / ...
CommitLineData
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>