// Used for initializing annotation CSS rules only once.
Dygraph.addedAnnotationCSS = false;
+/**
+ * Return the 2d context for a dygraph canvas.
+ *
+ * This method is only exposed for the sake of replacing the function in
+ * automated tests, e.g.
+ *
+ * var oldFunc = Dygraph.getContext();
+ * Dygraph.getContext = function(canvas) {
+ * var realContext = oldFunc(canvas);
+ * return new Proxy(realContext);
+ * };
+ */
+Dygraph.getContext = function(canvas) {
+ return canvas.getContext("2d");
+};
+
Dygraph.prototype.__old_init__ = function(div, file, labels, attrs) {
// Labels is no longer a constructor parameter, since it's typically set
// directly from the data source. It also conains a name for the x-axis,
this.canvas_.style.width = this.width_ + "px"; // for IE
this.canvas_.style.height = this.height_ + "px"; // for IE
+ this.canvas_ctx_ = Dygraph.getContext(this.canvas_);
+
// ... and for static parts of the chart.
this.hidden_ = this.createPlotKitCanvas_(this.canvas_);
+ this.hidden_ctx_ = Dygraph.getContext(this.hidden_);
// The interactive parts of the graph are drawn on top of the chart.
this.graphDiv.appendChild(this.hidden_);
g.doZoomY_(Math.min(context.dragStartY, context.dragEndY),
Math.max(context.dragStartY, context.dragEndY));
} else {
- g.canvas_.getContext("2d").clearRect(0, 0,
- g.canvas_.width,
- g.canvas_.height);
+ g.canvas_ctx_.clearRect(0, 0, g.canvas_.width, g.canvas_.height);
}
context.dragStartX = null;
context.dragStartY = null;
Dygraph.prototype.drawZoomRect_ = function(direction, startX, endX, startY,
endY, prevDirection, prevEndX,
prevEndY) {
- var ctx = this.canvas_.getContext("2d");
+ var ctx = this.canvas_ctx_;
// Clean up from the previous rect if necessary
if (prevDirection == Dygraph.HORIZONTAL) {
var labels = this.attr_('labels');
var html = '';
for (var i = 1; i < labels.length; i++) {
- var c = new RGBColor(this.plotter_.colors[labels[i]]);
- if (i > 1) html += (sepLines ? '<br/>' : ' ');
- html += "<b><font color='" + c.toHex() + "'>—" + labels[i] +
- "</font></b>";
+ if (!this.visibility()[i - 1]) continue;
+ var c = this.plotter_.colors[labels[i]];
+ if (html != '') html += (sepLines ? '<br/>' : ' ');
+ html += "<b><span style='color: " + c + ";'>—" + labels[i] +
+ "</span></b>";
}
return html;
}
if (!Dygraph.isOK(pt.canvasy)) continue;
if (sepLines) html += "<br/>";
- var c = new RGBColor(this.plotter_.colors[pt.name]);
+ var c = this.plotter_.colors[pt.name];
var yval = fmtFunc(pt.yval, this);
// TODO(danvk): use a template string here and make it an attribute.
- html += " <b><font color='" + c.toHex() + "'>"
- + pt.name + "</font></b>:"
+ html += " <b><span style='color: " + c + ";'>"
+ + pt.name + "</span></b>:"
+ yval;
}
return html;
};
+Dygraph.prototype.setLegendHTML_ = function(x, sel_points) {
+ var html = this.generateLegendHTML_(x, sel_points);
+ var labelsDiv = this.attr_("labelsDiv");
+ if (labelsDiv !== null) {
+ labelsDiv.innerHTML = html;
+ } else {
+ if (typeof(this.shown_legend_error_) == 'undefined') {
+ this.error('labelsDiv is set to something nonexistent; legend will not be shown.');
+ this.shown_legend_error_ = true;
+ }
+ }
+};
+
/**
* Draw dots over the selectied points in the data series. This function
* takes care of cleanup of previously-drawn dots.
*/
Dygraph.prototype.updateSelection_ = function() {
// Clear the previously drawn vertical, if there is one
- var ctx = this.canvas_.getContext("2d");
+ var ctx = this.canvas_ctx_;
if (this.previousVerticalX_ >= 0) {
// Determine the maximum highlight circle size.
var maxCircleSize = 0;
if (this.selPoints_.length > 0) {
// Set the status message to indicate the selected point(s)
if (this.attr_('showLabelsOnHighlight')) {
- var html = this.generateLegendHTML_(this.lastx_, this.selPoints_);
- this.attr_("labelsDiv").innerHTML = html;
+ this.setLegendHTML_(this.lastx_, this.selPoints_);
}
// Draw colored circles over the center of each selected point
this.lastx_ = this.selPoints_[0].xval;
this.updateSelection_();
} else {
- this.lastx_ = -1;
this.clearSelection();
}
*/
Dygraph.prototype.clearSelection = function() {
// Get rid of the overlay data
- var ctx = this.canvas_.getContext("2d");
- ctx.clearRect(0, 0, this.width_, this.height_);
- this.attr_('labelsDiv').innerHTML = this.generateLegendHTML_();
+ this.canvas_ctx_.clearRect(0, 0, this.width_, this.height_);
+ this.setLegendHTML_();
this.selPoints_ = [];
this.lastx_ = -1;
}
var n = k*k*k*k;
for (var j = 3; j >= 0; j--, n /= k) {
if (absTickV >= n) {
- label = Dygraph.round_(tickV / n, 1) + k_labels[j];
+ label = Dygraph.round_(tickV / n, attr('digitsAfterDecimal')) + k_labels[j];
break;
}
}
// Create a new plotter.
if (this.plotter_) this.plotter_.clear();
this.plotter_ = new DygraphCanvasRenderer(this,
- this.hidden_, this.layout_,
+ this.hidden_,
+ this.hidden_ctx_,
+ this.layout_,
this.renderOptions_);
// The roller sits in the bottom left corner of the chart. We don't know where
if (is_initial_draw) {
// Generate a static legend before any particular point is selected.
- this.attr_('labelsDiv').innerHTML = this.generateLegendHTML_();
+ this.setLegendHTML_();
+ } else {
+ if (typeof(this.selPoints_) !== 'undefined' && this.selPoints_.length) {
+ this.lastx_ = this.selPoints_[0].xval;
+ this.updateSelection_();
+ } else {
+ this.clearSelection();
+ }
}
if (this.attr_("drawCallback") !== null) {
this.attrs_.xTicker = Dygraph.dateTicker;
this.attrs_.xAxisLabelFormatter = Dygraph.dateAxisFormatter;
} else {
+ // TODO(danvk): use Dygraph.numberFormatter here?
this.attrs_.xValueFormatter = function(x) { return x; };
this.attrs_.xValueParser = function(x) { return parseFloat(x); };
this.attrs_.xTicker = Dygraph.numericTicks;
} else if (this.attr_("customBars")) {
// Bars are a low;center;high tuple
for (var j = 1; j < inFields.length; j++) {
- var vals = inFields[j].split(";");
- fields[j] = [ this.parseFloat_(vals[0], i, line),
- this.parseFloat_(vals[1], i, line),
- this.parseFloat_(vals[2], i, line) ];
+ var val = inFields[j];
+ if (/^ *$/.test(val)) {
+ fields[j] = [null, null, null];
+ } else {
+ var vals = val.split(";");
+ if (vals.length == 3) {
+ fields[j] = [ this.parseFloat_(vals[0], i, line),
+ this.parseFloat_(vals[1], i, line),
+ this.parseFloat_(vals[2], i, line) ];
+ } else {
+ this.warning('When using customBars, values must be either blank ' +
+ 'or "low;center;high" tuples (got "' + val +
+ '" on line ' + (1+i));
+ }
+ }
}
} else {
// Values are just numbers
"labels": ["Zooming"],
"type": "boolean",
"description" : "When this option is passed to updateOptions() along with either the <code>dateWindow</code> or <code>valueRange</code> options, the zoom flags are not changed to reflect a zoomed state. This is primarily useful for when the display area of a chart is changed programmatically and also where manual zooming is allowed and use is made of the <code>isZoomed</code> method to determine this."
+ },
+ "sigFigs" : {
+ "default": "null",
+ "labels": ["Value display/formatting"],
+ "type": "integer",
+ "description": "By default, dygraphs displays numbers with a fixed number of digits after the decimal point. If you'd prefer to have a fixed number of significant figures, set this option to that number of sig figs. A value of 2, for instance, would cause 1 to be display as 1.0 and 1234 to be displayed as 1.23e+3."
+ },
+ "digitsAfterDecimal" : {
+ "default": "2",
+ "labels": ["Value display/formatting"],
+ "type": "integer",
+ "description": "Unless it's run in scientific mode (see the <code>sigFigs</code> option), dygraphs displays numbers with <code>digitsAfterDecimal</code> digits after the decimal point. Trailing zeros are not displayed, so with a value of 2 you'll get '0', '0.1', '0.12', '123.45' but not '123.456' (it will be rounded to '123.46'). Numbers with absolute value less than 0.1^digitsAfterDecimal (i.e. those which would show up as '0.00') will be displayed in scientific notation."
+ },
+ "maxNumberWidth" : {
+ "default": "6",
+ "labels": ["Value display/formatting"],
+ "type": "integer",
+ "description": "When displaying numbers in normal (not scientific) mode, large numbers will be displayed with many trailing zeros (e.g. 100000000 instead of 1e9). This can lead to unwieldy y-axis labels. If there are more than <code>maxNumberWidth</code> digits to the left of the decimal in a number, dygraphs will switch to scientific notation, even when not operating in scientific mode. If you'd like to see all those digits, set this to something large, like 20 or 30."
}
}
; // </JSON>
projects / dygraphs.git / blobdiff