Added documentation for labelsDiv option using just an element id and for labelsShowZ...
authorSteven Jardine <steven.jardine@gmail.com>
Thu, 9 Sep 2010 17:06:32 +0000 (11:06 -0600)
committerSteven Jardine <steven.jardine@gmail.com>
Thu, 9 Sep 2010 17:06:32 +0000 (11:06 -0600)
docs/index.html
tests/data.js
tests/label-div.html

index 7d9b180..a109aa0 100644 (file)
@@ -604,10 +604,18 @@ perl -ne 'BEGIN{print "Month,Nominal,Real\n"} chomp; ($m,$cpi,$low,$close,$high)
         </tr>
         <tr>
           <td><strong>labelsDiv</strong></td>
-          <td><code>document.<br/>getElementById('foo')</code></td>
+          <td><code style="font-size: small">document.getElementById('foo')</code><br/>or<br/><code>'foo'</code></td>
           <td><code>null</code></td>
-          <td>Show data labels in an external div, rather than on the graph.
-          <div class="tests">Tests: <a href="tests/demo.html">demo</a> <a href="tests/label-div.html">label-div</a> </div>
+          <td style="vertical-align:top">Show data labels in an external div, rather than on the graph.  This value can either be a div element or a div id.
+          <div class="tests">Tests: <a href="tests/label-div.html">label-div</a> </div>
+          </td>
+        </tr>
+        <tr>
+          <td><strong>labelsShowZeroValues</strong></td>
+          <td><code>boolean</code></td>
+          <td><code>true</code></td>
+          <td>Show zero value labels in the labelsDiv.
+          <div class="tests">Tests: <a href="tests/label-div.html">label-div</a> </div>
           </td>
         </tr>
         <tr>
index 9dbdc27..5f61b95 100644 (file)
@@ -435,3 +435,15 @@ return "" +
 "20061129,1.41093474427,0.495309102312,3.02013422819,0.701020603129";
 }
 
+function data_showzerovalues() {
+       return "" +
+       "20070101,0,39\n" +
+       "20070102,62,0\n" +
+       "20070103,0,42\n" +
+       "20070104,57,0\n" +
+       "20070105,65,44\n" +
+       "20070106,55,44\n" +
+       "20070107,0,45\n" +
+       "20070108,66,0\n" +
+       "20070109,0,39\n";
+       }
index 98fdf0f..0231d91 100644 (file)
     <td valign="top">&nbsp; &nbsp;</td>
     <td valign="top"><div id="labels"></div></td>
     </tr></table>
+    <p>
+       The following chart should be the same as above. Here we use the 
+               labelsDiv id instead of the actual labelsDiv element.<br/>This is 
+               useful when the labelsDiv element has not been attached to the 
+               DOM when the chart/options is created:
+       </p>
+       <table><tr>
+    <td valign="top"><div id="graphdiv3"></div></td>
+    <td valign="top">&nbsp; &nbsp;</td>
+    <td valign="top"><div id="labels2"></div></td>
+    </tr></table>
+    <p>
+       The following chart shows the labelsShowZeroValues option in use.  
+               When any point has a zero value the label is not shown.  This is 
+               useful when there are many zero values in a point and the user 
+               is only interested in the non-zero points. 
+       </p>
+       <table><tr>
+    <td valign="top"><div id="graphdiv4"></div></td>
+    <td valign="top">&nbsp; &nbsp;</td>
+    <td valign="top"><div id="labels3"></div></td>
+    </tr></table>
 
     <script type="text/javascript">
       g2 = new Dygraph(document.getElementById("graphdiv2"),
                          labels: [ "Date", "High", "Low" ],
                          labelsDiv: document.getElementById("labels")
                        });
+      g3 = new Dygraph(document.getElementById("graphdiv3"),
+                       data_nolabel,
+                       {
+                         labels: [ "Date", "High", "Low" ],
+                         labelsDiv: "labels2"
+                       });
+      g4 = new Dygraph(document.getElementById("graphdiv4"),
+                       data_showzerovalues,
+                       {
+                         labels: [ "Date", "High", "Low" ],
+                         labelsDiv: "labels3",
+                                                labelsShowZeroValues: false
+                       });
     </script>
   </body>
 </html>