* @constructor
*/
+/*jshint globalstrict: true */
+/*global Dygraph:false,RGBColor:false */
"use strict";
var DygraphCanvasRenderer = function(dygraph, element, elementContext, layout) {
throw "Canvas is not supported.";
// internal state
- this.xlabels = new Array();
- this.ylabels = new Array();
- this.annotations = new Array();
+ this.xlabels = [];
+ this.ylabels = [];
+ this.annotations = [];
this.chartLabels = {};
this.area = layout.getPlotArea();
};
DygraphCanvasRenderer.prototype.clear = function() {
+ var context;
if (this.isIE) {
// VML takes a while to start up, so we just poll every this.IEDelay
try {
this.clearDelay.cancel();
this.clearDelay = null;
}
- var context = this.elementContext;
+ context = this.elementContext;
}
catch (e) {
// TODO(danvk): this is broken, since MochiKit.Async is gone.
- this.clearDelay = MochiKit.Async.wait(this.IEDelay);
- this.clearDelay.addCallback(bind(this.clear, this));
+ // this.clearDelay = MochiKit.Async.wait(this.IEDelay);
+ // this.clearDelay.addCallback(bind(this.clear, this));
return;
}
}
- var context = this.elementContext;
+ context = this.elementContext;
context.clearRect(0, 0, this.width, this.height);
- for (var i = 0; i < this.xlabels.length; i++) {
- var el = this.xlabels[i];
- if (el.parentNode) el.parentNode.removeChild(el);
- }
- for (var i = 0; i < this.ylabels.length; i++) {
- var el = this.ylabels[i];
- if (el.parentNode) el.parentNode.removeChild(el);
- }
- for (var i = 0; i < this.annotations.length; i++) {
- var el = this.annotations[i];
- if (el.parentNode) el.parentNode.removeChild(el);
+ function removeArray(ary) {
+ for (var i = 0; i < ary.length; i++) {
+ var el = ary[i];
+ if (el.parentNode) el.parentNode.removeChild(el);
+ }
}
+
+ removeArray(this.xlabels);
+ removeArray(this.ylabels);
+ removeArray(this.annotations);
+
for (var k in this.chartLabels) {
if (!this.chartLabels.hasOwnProperty(k)) continue;
var el = this.chartLabels[k];
if (el.parentNode) el.parentNode.removeChild(el);
}
- this.xlabels = new Array();
- this.ylabels = new Array();
- this.annotations = new Array();
+ this.xlabels = [];
+ this.ylabels = [];
+ this.annotations = [];
this.chartLabels = {};
};
DygraphCanvasRenderer.isSupported = function(canvasName) {
var canvas = null;
try {
- if (typeof(canvasName) == 'undefined' || canvasName == null)
+ if (typeof(canvasName) == 'undefined' || canvasName === null) {
canvas = document.createElement("canvas");
- else
+ } else {
canvas = canvasName;
- var context = canvas.getContext("2d");
+ }
+ canvas.getContext("2d");
}
catch (e) {
var ie = navigator.appVersion.match(/MSIE (\d\.\d)/);
// Draw the new X/Y grid. Lines appear crisper when pixels are rounded to
// half-integers. This prevents them from drawing in two rows/cols.
var ctx = this.elementContext;
- function halfUp(x){return Math.round(x)+0.5};
- function halfDown(y){return Math.round(y)-0.5};
+ function halfUp(x) { return Math.round(x) + 0.5; }
+ function halfDown(y){ return Math.round(y) - 0.5; }
if (this.attr_('underlayCallback')) {
// NOTE: we pass the dygraph object to this callback twice to avoid breaking
this.attr_('underlayCallback')(ctx, this.area, this.dygraph_, this.dygraph_);
}
+ var x, y, i, ticks;
if (this.attr_('drawYGrid')) {
- var ticks = this.layout.yticks;
+ 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');
- for (var i = 0; i < ticks.length; i++) {
+ for (i = 0; i < ticks.length; i++) {
// TODO(danvk): allow secondary axes to draw a grid, too.
- if (ticks[i][0] != 0) continue;
- var x = halfUp(this.area.x);
- var y = halfDown(this.area.y + ticks[i][1] * this.area.h);
+ if (ticks[i][0] !== 0) continue;
+ x = halfUp(this.area.x);
+ y = halfDown(this.area.y + ticks[i][1] * this.area.h);
ctx.beginPath();
ctx.moveTo(x, y);
ctx.lineTo(x + this.area.w, y);
}
if (this.attr_('drawXGrid')) {
- var ticks = this.layout.xticks;
+ ticks = this.layout.xticks;
ctx.save();
ctx.strokeStyle = this.attr_('gridLineColor');
ctx.lineWidth = this.attr_('gridLineWidth');
- for (var i=0; i<ticks.length; i++) {
- var x = halfUp(this.area.x + ticks[i][0] * this.area.w);
- var y = halfDown(this.area.y + this.area.h);
+ for (i=0; i<ticks.length; i++) {
+ x = halfUp(this.area.x + ticks[i][0] * this.area.w);
+ y = halfDown(this.area.y + this.area.h);
ctx.beginPath();
ctx.moveTo(x, y);
ctx.lineTo(x, this.area.y);
}
function createClipDiv(area) {
- if (area.w == 0 || area.h == 0) {
+ if (area.w === 0 || area.h === 0) {
return;
}
var elem = document.createElement('div');
var plotArea = this.area;
// Left side
- createClipDiv({x:0, y:0, w:plotArea.x, h:this.height});
+ 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});
+ 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});
+ 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});
-}
+ 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;
// Round pixels to half-integer boundaries for crisper drawing.
- function halfUp(x){return Math.round(x)+0.5};
- function halfDown(y){return Math.round(y)-0.5};
+ function halfUp(x) { return Math.round(x) + 0.5; }
+ function halfDown(y){ return Math.round(y) - 0.5; }
var context = this.elementContext;
+ var label, x, y, tick, i;
+
var labelStyle = {
position: "absolute",
fontSize: this.attr_('axisLabelFontSize') + "px",
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.
+ lineHeight: "normal", // Something other than "normal" line-height screws up label positioning.
overflow: "hidden"
};
var makeDiv = function(txt, axis, prec_axis) {
if (this.attr_('drawYAxis')) {
if (this.layout.yticks && this.layout.yticks.length > 0) {
var num_axes = this.dygraph_.numAxes();
- for (var i = 0; i < this.layout.yticks.length; i++) {
- var tick = this.layout.yticks[i];
+ for (i = 0; i < this.layout.yticks.length; i++) {
+ tick = this.layout.yticks[i];
if (typeof(tick) == "function") return;
- var x = this.area.x;
+ x = this.area.x;
var sgn = 1;
var prec_axis = 'y1';
if (tick[0] == 1) { // right-side y-axis
sgn = -1;
prec_axis = 'y2';
}
- var y = this.area.y + tick[1] * this.area.h;
+ y = this.area.y + tick[1] * this.area.h;
/* Tick marks are currently clipped, so don't bother drawing them.
context.beginPath();
context.stroke();
*/
- var label = makeDiv(tick[2], 'y', num_axes == 2 ? prec_axis : null);
+ label = makeDiv(tick[2], 'y', num_axes == 2 ? prec_axis : null);
var top = (y - this.attr_('axisLabelFontSize') / 2);
if (top < 0) top = 0;
} else {
label.style.top = top + "px";
}
- if (tick[0] == 0) {
+ if (tick[0] === 0) {
label.style.left = (this.area.x - this.attr_('yAxisLabelWidth') - this.attr_('axisTickSize')) + "px";
label.style.textAlign = "right";
} else if (tick[0] == 1) {
// compensate if necessary.
var bottomTick = this.ylabels[0];
var fontSize = this.attr_('axisLabelFontSize');
- var bottom = parseInt(bottomTick.style.top) + fontSize;
+ var bottom = parseInt(bottomTick.style.top, 10) + fontSize;
if (bottom > this.height - fontSize) {
- bottomTick.style.top = (parseInt(bottomTick.style.top) -
+ bottomTick.style.top = (parseInt(bottomTick.style.top, 10) -
fontSize / 2) + "px";
}
}
if (this.attr_('drawXAxis')) {
if (this.layout.xticks) {
- for (var i = 0; i < this.layout.xticks.length; i++) {
- var tick = this.layout.xticks[i];
- if (typeof(dataset) == "function") return;
-
- var x = this.area.x + tick[0] * this.area.w;
- var y = this.area.y + this.area.h;
+ for (i = 0; i < this.layout.xticks.length; i++) {
+ tick = this.layout.xticks[i];
+ x = this.area.x + tick[0] * this.area.w;
+ y = this.area.y + this.area.h;
/* Tick marks are currently clipped, so don't bother drawing them.
context.beginPath();
context.stroke();
*/
- var label = makeDiv(tick[1], 'x');
+ label = makeDiv(tick[1], 'x');
label.style.textAlign = "center";
label.style.top = (y + this.attr_('axisTickSize')) + 'px';
DygraphCanvasRenderer.prototype._renderChartLabels = function() {
+ var div, class_div;
+
// Generate divs for the chart title, xlabel and ylabel.
// Space for these divs has already been taken away from the charting area in
// the DygraphCanvasRenderer constructor.
if (this.attr_('title')) {
- var div = document.createElement("div");
+ div = document.createElement("div");
div.style.position = 'absolute';
div.style.top = '0px';
div.style.left = this.area.x + 'px';
div.style.textAlign = 'center';
div.style.fontSize = (this.attr_('titleHeight') - 8) + 'px';
div.style.fontWeight = 'bold';
- var class_div = document.createElement("div");
+ class_div = document.createElement("div");
class_div.className = 'dygraph-label dygraph-title';
class_div.innerHTML = this.attr_('title');
div.appendChild(class_div);
}
if (this.attr_('xlabel')) {
- var div = document.createElement("div");
+ div = document.createElement("div");
div.style.position = 'absolute';
div.style.bottom = 0; // TODO(danvk): this is lazy. Calculate style.top.
div.style.left = this.area.x + 'px';
div.style.textAlign = 'center';
div.style.fontSize = (this.attr_('xLabelHeight') - 2) + 'px';
- var class_div = document.createElement("div");
+ class_div = document.createElement("div");
class_div.className = 'dygraph-label dygraph-xlabel';
class_div.innerHTML = this.attr_('xlabel');
div.appendChild(class_div);
height: this.area.h
};
// TODO(danvk): is this outer div actually necessary?
- var div = document.createElement("div");
+ div = document.createElement("div");
div.style.position = 'absolute';
div.style.left = box.left;
div.style.top = box.top + 'px';
inner_div.style.top = '0px';
}
- var class_div = document.createElement("div");
+ class_div = document.createElement("div");
class_div.className = 'dygraph-label dygraph-ylabel';
class_div.innerHTML = this.attr_('ylabel');
self.dygraph_.attr_(classEventName)(a, p, self.dygraph_,e );
}
};
- }
+ };
// Get a list of point with annotations.
var points = this.layout.annotated_points;
/**
- * Overrides the CanvasRenderer method to draw error bars
+ * Actually draw the lines chart, including error bars.
+ * TODO(danvk): split this into several smaller functions.
+ * @private
*/
DygraphCanvasRenderer.prototype._renderLineChart = function() {
var isNullOrNaN = function(x) {
var stepPlot = this.attr_("stepPlot");
var points = this.layout.points;
var pointsLength = points.length;
+ var point, i, j, prevX, prevY, prevYs, color, setName, newYs, err_color, rgb, yscale, axis;
var setNames = [];
for (var name in this.layout.datasets) {
var setCount = setNames.length;
// TODO(danvk): Move this mapping into Dygraph and get it out of here.
- this.colors = {}
- for (var i = 0; i < setCount; i++) {
+ this.colors = {};
+ for (i = 0; i < setCount; i++) {
this.colors[setNames[i]] = this.colorScheme_[i % this.colorScheme_.length];
}
// Update Points
// TODO(danvk): here
- for (var i = pointsLength; i--;) {
- var point = points[i];
+ for (i = pointsLength; i--;) {
+ point = points[i];
point.canvasx = this.area.w * point.x + this.area.x;
point.canvasy = this.area.h * point.y + this.area.y;
}
this.dygraph_.warn("Can't use fillGraph option with error bars");
}
- for (var i = 0; i < setCount; i++) {
- var setName = setNames[i];
- var axis = this.dygraph_.axisPropertiesForSeries(setName);
- var color = this.colors[setName];
+ for (i = 0; i < setCount; i++) {
+ setName = setNames[i];
+ axis = this.dygraph_.axisPropertiesForSeries(setName);
+ color = this.colors[setName];
// setup graphics context
ctx.save();
- var prevX = NaN;
- var prevY = NaN;
- var prevYs = [-1, -1];
- var yscale = axis.yscale;
+ prevX = NaN;
+ prevY = NaN;
+ prevYs = [-1, -1];
+ yscale = axis.yscale;
// should be same color as the lines but only 15% opaque.
- var rgb = new RGBColor(color);
- var err_color = 'rgba(' + rgb.r + ',' + rgb.g + ',' + rgb.b + ',' +
+ rgb = new RGBColor(color);
+ err_color = 'rgba(' + rgb.r + ',' + rgb.g + ',' + rgb.b + ',' +
fillAlpha + ')';
ctx.fillStyle = err_color;
ctx.beginPath();
- for (var j = 0; j < pointsLength; j++) {
- var point = points[j];
+ for (j = 0; j < pointsLength; j++) {
+ point = points[j];
if (point.name == setName) {
if (!Dygraph.isOK(point.y)) {
prevX = NaN;
// TODO(danvk): here
if (stepPlot) {
- var newYs = [ point.y_bottom, point.y_top ];
+ newYs = [ point.y_bottom, point.y_top ];
prevY = point.y;
} else {
- var newYs = [ point.y_bottom, point.y_top ];
+ newYs = [ point.y_bottom, point.y_top ];
}
newYs[0] = this.area.h * newYs[0] + this.area.y;
newYs[1] = this.area.h * newYs[1] + this.area.y;
ctx.fill();
}
} else if (fillGraph) {
- var baseline = [] // for stacked graphs: baseline for filling
+ var baseline = []; // for stacked graphs: baseline for filling
// process sets in reverse order (needed for stacked graphs)
- for (var i = setCount - 1; i >= 0; i--) {
- var setName = setNames[i];
- var color = this.colors[setName];
- var axis = this.dygraph_.axisPropertiesForSeries(setName);
+ for (i = setCount - 1; i >= 0; i--) {
+ setName = setNames[i];
+ color = this.colors[setName];
+ axis = this.dygraph_.axisPropertiesForSeries(setName);
var axisY = 1.0 + axis.minyval * axis.yscale;
if (axisY < 0.0) axisY = 0.0;
else if (axisY > 1.0) axisY = 1.0;
// setup graphics context
ctx.save();
- var prevX = NaN;
- var prevYs = [-1, -1];
- var yscale = axis.yscale;
+ prevX = NaN;
+ prevYs = [-1, -1];
+ yscale = axis.yscale;
// should be same color as the lines but only 15% opaque.
- var rgb = new RGBColor(color);
- var err_color = 'rgba(' + rgb.r + ',' + rgb.g + ',' + rgb.b + ',' +
+ rgb = new RGBColor(color);
+ err_color = 'rgba(' + rgb.r + ',' + rgb.g + ',' + rgb.b + ',' +
fillAlpha + ')';
ctx.fillStyle = err_color;
ctx.beginPath();
- for (var j = 0; j < pointsLength; j++) {
- var point = points[j];
+ for (j = 0; j < pointsLength; j++) {
+ point = points[j];
if (point.name == setName) {
if (!Dygraph.isOK(point.y)) {
prevX = NaN;
continue;
}
- var newYs;
if (stackedGraph) {
var lastY = baseline[point.canvasx];
if (lastY === undefined) lastY = axisY;
var firstIndexInSet = 0;
var afterLastIndexInSet = 0;
var setLength = 0;
- for (var i = 0; i < setCount; i += 1) {
+ for (i = 0; i < setCount; i += 1) {
setLength = this.layout.setPointsLengths[i];
afterLastIndexInSet += setLength;
- var setName = setNames[i];
- var color = this.colors[setName];
+ setName = setNames[i];
+ color = this.colors[setName];
var strokeWidth = this.dygraph_.attr_("strokeWidth", setName);
// setup graphics context
context.save();
var pointSize = this.dygraph_.attr_("pointSize", setName);
- var prevX = null, prevY = null;
+ prevX = null;
+ prevY = null;
var drawPoints = this.dygraph_.attr_("drawPoints", setName);
- for (var j = firstIndexInSet; j < afterLastIndexInSet; j++) {
- var point = points[j];
+ for (j = firstIndexInSet; j < afterLastIndexInSet; j++) {
+ point = points[j];
if (isNullOrNaN(point.canvasy)) {
- if (stepPlot && prevX != null) {
+ if (stepPlot && prevX !== null) {
// Draw a horizontal line to the start of the missing data
ctx.beginPath();
ctx.strokeStyle = color;
projects / dygraphs.git / blobdiff