usage
[dygraphs.git] / tests / label-div.html
CommitLineData
54425b14 1<!DOCTYPE html>
285a6bda
DV
2<html>
3 <head>
6f091595 4 <title>label-div</title>
7e5ddc94
DV
5 <!--
6 For production (minified) code, use:
7 <script type="text/javascript" src="dygraph-combined.js"></script>
8 -->
fbd6834a 9 <script type="text/javascript" src="../dist/dygraph.js"></script>
7e5ddc94 10
285a6bda
DV
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>
52fe05c1
SJ
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>
285a6bda
DV
42
43 <script type="text/javascript">
44 g2 = new Dygraph(document.getElementById("graphdiv2"),
45 data_nolabel,
46 {
5011e7a1 47 labels: [ "Date", "High", "Low" ],
285a6bda
DV
48 labelsDiv: document.getElementById("labels")
49 });
52fe05c1
SJ
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 });
285a6bda
DV
63 </script>
64 </body>
65</html>