Merge branch 'master' of http://github.com/nealie/dygraphs
[dygraphs.git] / tests / label-div.html
1 <html>
2 <head>
3 <title>label-div</title>
4 <!--[if IE]>
5 <script type="text/javascript" src="../excanvas.js"></script>
6 <![endif]-->
7 <script type="text/javascript" src="../strftime/strftime-min.js"></script>
8 <script type="text/javascript" src="../rgbcolor/rgbcolor.js"></script>
9 <script type="text/javascript" src="../dygraph-canvas.js"></script>
10 <script type="text/javascript" src="../dygraph.js"></script>
11 <script type="text/javascript" src="data.js"></script>
12 </head>
13 <body>
14 <p>Chart with labels displayed in a separate div:</p>
15 <table><tr>
16 <td valign="top"><div id="graphdiv2"></div></td>
17 <td valign="top">&nbsp; &nbsp;</td>
18 <td valign="top"><div id="labels"></div></td>
19 </tr></table>
20 <p>
21 The following chart should be the same as above. Here we use the
22 labelsDiv id instead of the actual labelsDiv element.<br/>This is
23 useful when the labelsDiv element has not been attached to the
24 DOM when the chart/options is created:
25 </p>
26 <table><tr>
27 <td valign="top"><div id="graphdiv3"></div></td>
28 <td valign="top">&nbsp; &nbsp;</td>
29 <td valign="top"><div id="labels2"></div></td>
30 </tr></table>
31 <p>
32 The following chart shows the labelsShowZeroValues option in use.
33 When any point has a zero value the label is not shown. This is
34 useful when there are many zero values in a point and the user
35 is only interested in the non-zero points.
36 </p>
37 <table><tr>
38 <td valign="top"><div id="graphdiv4"></div></td>
39 <td valign="top">&nbsp; &nbsp;</td>
40 <td valign="top"><div id="labels3"></div></td>
41 </tr></table>
42
43 <script type="text/javascript">
44 g2 = new Dygraph(document.getElementById("graphdiv2"),
45 data_nolabel,
46 {
47 labels: [ "Date", "High", "Low" ],
48 labelsDiv: document.getElementById("labels")
49 });
50 g3 = new Dygraph(document.getElementById("graphdiv3"),
51 data_nolabel,
52 {
53 labels: [ "Date", "High", "Low" ],
54 labelsDiv: "labels2"
55 });
56 g4 = new Dygraph(document.getElementById("graphdiv4"),
57 data_showzerovalues,
58 {
59 labels: [ "Date", "High", "Low" ],
60 labelsDiv: "labels3",
61 labelsShowZeroValues: false
62 });
63 </script>
64 </body>
65 </html>