-// Copyright 2006 Dan Vanderkam (danvdk@gmail.com)
-// MIT-licensed (http://opensource.org/licenses/MIT)
+/**
+ * @license
+ * Copyright 2006 Dan Vanderkam (danvdk@gmail.com)
+ * MIT-licensed (http://opensource.org/licenses/MIT)
+ */
/**
* @fileoverview Based on PlotKit.CanvasRenderer, but modified to meet the
this.annotations = new Array();
this.chartLabels = {};
- this.area = this.computeArea_();
+ this.area = layout.getPlotArea();
this.container.style.position = "relative";
this.container.style.width = this.width + "px";
// Set up a clipping area for the canvas (and the interaction canvas).
// This ensures that we don't overdraw.
- var ctx = this.dygraph_.canvas_ctx_;
- ctx.beginPath();
- ctx.rect(this.area.x, this.area.y, this.area.w, this.area.h);
- ctx.clip();
-
- ctx = this.dygraph_.hidden_ctx_;
- ctx.beginPath();
- ctx.rect(this.area.x, this.area.y, this.area.w, this.area.h);
- ctx.clip();
+ if (this.dygraph_.isUsingExcanvas_) {
+ this._createIEClipArea();
+ } else {
+ var ctx = this.dygraph_.canvas_ctx_;
+ ctx.beginPath();
+ ctx.rect(this.area.x, this.area.y, this.area.w, this.area.h);
+ ctx.clip();
+
+ ctx = this.dygraph_.hidden_ctx_;
+ ctx.beginPath();
+ ctx.rect(this.area.x, this.area.y, this.area.w, this.area.h);
+ ctx.clip();
+ }
};
DygraphCanvasRenderer.prototype.attr_ = function(x) {
return this.dygraph_.attr_(x);
};
-// Compute the box which the chart should be drawn in. This is the canvas's
-// box, less space needed for axis and chart labels.
-// TODO(danvk): this belongs in DygraphLayout.
-DygraphCanvasRenderer.prototype.computeArea_ = function() {
- var area = {
- // TODO(danvk): per-axis setting.
- x: 0,
- y: 0
- };
- if (this.attr_('drawYAxis')) {
- area.x = this.attr_('yAxisLabelWidth') + 2 * this.attr_('axisTickSize');
- }
-
- area.w = this.width - area.x - this.attr_('rightGap');
- area.h = this.height;
- if (this.attr_('drawXAxis')) {
- if (this.attr_('xAxisHeight')) {
- area.h -= this.attr_('xAxisHeight');
- } else {
- area.h -= this.attr_('axisLabelFontSize') + 2 * this.attr_('axisTickSize');
- }
- }
-
- // Shrink the drawing area to accomodate additional y-axes.
- if (this.dygraph_.numAxes() == 2) {
- // TODO(danvk): per-axis setting.
- area.w -= (this.attr_('yAxisLabelWidth') + 2 * this.attr_('axisTickSize'));
- } else if (this.dygraph_.numAxes() > 2) {
- this.dygraph_.error("Only two y-axes are supported at this time. (Trying " +
- "to use " + this.dygraph_.numAxes() + ")");
- }
-
- // Add space for chart labels: title, xlabel and ylabel.
- if (this.attr_('title')) {
- area.h -= this.attr_('titleHeight');
- area.y += this.attr_('titleHeight');
- }
- if (this.attr_('xlabel')) {
- area.h -= this.attr_('xLabelHeight');
- }
- if (this.attr_('ylabel')) {
- // It would make sense to shift the chart here to make room for the y-axis
- // label, but the default yAxisLabelWidth is large enough that this results
- // in overly-padded charts. The y-axis label should fit fine. If it
- // doesn't, the yAxisLabelWidth option can be increased.
- }
-
- return area;
-};
-
DygraphCanvasRenderer.prototype.clear = function() {
if (this.isIE) {
// VML takes a while to start up, so we just poll every this.IEDelay
if (this.attr_('drawYGrid')) {
var ticks = this.layout.yticks;
+ // TODO(konigsberg): I don't think these calls to save() have a corresponding restore().
ctx.save();
ctx.strokeStyle = this.attr_('gridLineColor');
ctx.lineWidth = this.attr_('gridLineWidth');
// Do the ordinary rendering, as before
this._renderLineChart();
this._renderAxis();
- this._renderChartLabels();
+ this._renderChartLabels();
this._renderAnnotations();
};
+DygraphCanvasRenderer.prototype._createIEClipArea = function() {
+ var className = 'dygraph-clip-div';
+ var graphDiv = this.dygraph_.graphDiv;
+
+ // Remove old clip divs.
+ for (var i = graphDiv.childNodes.length-1; i >= 0; i--) {
+ if (graphDiv.childNodes[i].className == className) {
+ graphDiv.removeChild(graphDiv.childNodes[i]);
+ }
+ }
+
+ // Determine background color to give clip divs.
+ var backgroundColor = document.bgColor;
+ var element = this.dygraph_.graphDiv;
+ while (element != document) {
+ var bgcolor = element.currentStyle.backgroundColor;
+ if (bgcolor && bgcolor != 'transparent') {
+ backgroundColor = bgcolor;
+ break;
+ }
+ element = element.parentNode;
+ }
+
+ function createClipDiv(area) {
+ if (area.w == 0 || area.h == 0) {
+ return;
+ }
+ var elem = document.createElement('div');
+ elem.className = className;
+ elem.style.backgroundColor = backgroundColor;
+ elem.style.position = 'absolute';
+ elem.style.left = area.x + 'px';
+ elem.style.top = area.y + 'px';
+ elem.style.width = area.w + 'px';
+ elem.style.height = area.h + 'px';
+ graphDiv.appendChild(elem);
+ }
+
+ var plotArea = this.area;
+ // Left side
+ createClipDiv({x:0, y:0, w:plotArea.x, h:this.height});
+ // Top
+ createClipDiv({x:plotArea.x, y:0, w:this.width-plotArea.x, h:plotArea.y});
+ // Right side
+ createClipDiv({x:plotArea.x+plotArea.w, y:0, w:this.width-plotArea.x-plotArea.w, h:this.height});
+ // Bottom
+ createClipDiv({x:plotArea.x, y:plotArea.y+plotArea.h, w:this.width-plotArea.x, h:this.height-plotArea.h-plotArea.y});
+}
DygraphCanvasRenderer.prototype._renderAxis = function() {
if (!this.attr_('drawXAxis') && !this.attr_('drawYAxis')) return;
color: this.attr_('axisLabelColor'),
width: this.attr_('axisLabelWidth') + "px",
// height: this.attr_('axisLabelFontSize') + 2 + "px",
+ lineHeight: "normal", // Something other than "normal" line-height screws up label positioning.
overflow: "hidden"
};
var makeDiv = function(txt, axis, prec_axis) {
prec_axis = 'y2';
}
var y = this.area.y + tick[1] * this.area.h;
+
+ /* Tick marks are currently clipped, so don't bother drawing them.
context.beginPath();
context.moveTo(halfUp(x), halfDown(y));
context.lineTo(halfUp(x - sgn * this.attr_('axisTickSize')), halfDown(y));
context.closePath();
context.stroke();
+ */
var label = makeDiv(tick[2], 'y', num_axes == 2 ? prec_axis : null);
var top = (y - this.attr_('axisLabelFontSize') / 2);
var x = this.area.x + tick[0] * this.area.w;
var y = this.area.y + this.area.h;
+
+ /* Tick marks are currently clipped, so don't bother drawing them.
context.beginPath();
context.moveTo(halfUp(x), halfDown(y));
context.lineTo(halfUp(x), halfDown(y + this.attr_('axisTickSize')));
context.closePath();
context.stroke();
+ */
var label = makeDiv(tick[1], 'x');
label.style.textAlign = "center";
var isNullOrNaN = function(x) {
return (x === null || isNaN(x));
};
-
+
// TODO(danvk): use this.attr_ for many of these.
var context = this.elementContext;
var fillAlpha = this.attr_('fillAlpha');