tests/label-div.html

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