tests/label-div.html

   1 <!DOCTYPE html>
   2 <html>
   3   <head>
   4     <title>label-div</title>
   5     <!--
   6     For production (minified) code, use:
   7     <script type="text/javascript" src="dygraph-combined.js"></script>
   8     -->
   9     <script type="text/javascript" src="../dygraph-dev.js"></script>
  10
  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>