tests/label-div.html

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