</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>
// TODO(danvk): move defaults from createStatusMessage_ here.
},
labelsSeparateLines: false,
+ labelsShowZeroValues: true,
labelsKMB: false,
labelsKMG2: false,
showLabelsOnHighlight: true,
* been specified.
* @private
*/
-Dygraph.prototype.createStatusMessage_ = function(){
+Dygraph.prototype.createStatusMessage_ = function() {
+ var userLabelsDiv = this.user_attrs_["labelsDiv"];
+ if (userLabelsDiv && null != userLabelsDiv
+ && (typeof(userLabelsDiv) == "string" || userLabelsDiv instanceof String)) {
+ this.user_attrs_["labelsDiv"] = document.getElementById(userLabelsDiv);
+ }
if (!this.attr_("labelsDiv")) {
var divWidth = this.attr_('labelsDivWidth');
var messagestyle = {
if (this.attr_('showLabelsOnHighlight')) {
// Set the status message to indicate the selected point(s)
for (var i = 0; i < this.selPoints_.length; i++) {
+ if (!this.attr_("labelsShowZeroValues") && this.selPoints_[i].yval == 0) continue;
if (!isOK(this.selPoints_[i].canvasy)) continue;
if (this.attr_("labelsSeparateLines")) {
replace += "<br/>";
// Parse the x as a float or return null if it's not a number.
var parseFloatOrNull = function(x) {
- if (x.length == 0) return null;
- return parseFloat(x);
+ var val = parseFloat(x);
+ return isNaN(val) ? null : val;
};
var xParser;
var parsedData = Dygraph.clone(data);
for (var i = 0; i < data.length; i++) {
if (parsedData[i].length == 0) {
- this.error("Row " << (1 + i) << " of data is empty");
+ this.error("Row " + (1 + i) + " of data is empty");
return null;
}
if (parsedData[i][0] == null
"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";
+ }
<td valign="top"> </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"> </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"> </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>