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