X-Git-Url: https://adrianiainlam.tk/git/?a=blobdiff_plain;f=dygraph-canvas.js;h=57087a8274238f0c037784585f27ec4fa65d5cd3;hb=d1dfab803da706bb80a867d433bc839bb4ca33fc;hp=13e5fe6122eb1e06d581f0dbeaac3411700b65f1;hpb=a685723c0438aa2b29060404e6048d4409b95b1c;p=dygraphs.git diff --git a/dygraph-canvas.js b/dygraph-canvas.js index 13e5fe6..57087a8 100644 --- a/dygraph-canvas.js +++ b/dygraph-canvas.js @@ -19,7 +19,7 @@ DygraphLayout = function(dygraph, options) { this.options = {}; // TODO(danvk): remove, use attr_ instead. Dygraph.update(this.options, options ? options : {}); this.datasets = new Array(); - this.annotations = new Array() + this.annotations = new Array(); }; DygraphLayout.prototype.attr_ = function(name) { @@ -33,6 +33,7 @@ DygraphLayout.prototype.addDataset = function(setname, set_xy) { DygraphLayout.prototype.setAnnotations = function(ann) { // The Dygraph object's annotations aren't parsed. We parse them here and // save a copy. + this.annotations = []; var parse = this.attr_('xValueParser'); for (var i = 0; i < ann.length; i++) { var a = {}; @@ -41,9 +42,9 @@ DygraphLayout.prototype.setAnnotations = function(ann) { return; } if (ann[i].icon && - !(ann[i].hasOwnProperty('iconWidth') && - ann[i].hasOwnProperty('iconHeight'))) { - this.dygraph_.error("Must set iconWidth and iconHeight when setting " + + !(ann[i].hasOwnProperty('width') && + ann[i].hasOwnProperty('height'))) { + this.dygraph_.error("Must set width and height when setting " + "annotation.icon property"); return; } @@ -69,11 +70,13 @@ DygraphLayout.prototype._evaluateLimits = function() { for (var name in this.datasets) { if (!this.datasets.hasOwnProperty(name)) continue; var series = this.datasets[name]; - var x1 = series[0][0]; - if (!this.minxval || x1 < this.minxval) this.minxval = x1; - - var x2 = series[series.length - 1][0]; - if (!this.maxxval || x2 > this.maxxval) this.maxxval = x2; + if (series.length > 1) { + var x1 = series[0][0]; + if (!this.minxval || x1 < this.minxval) this.minxval = x1; + + var x2 = series[series.length - 1][0]; + if (!this.maxxval || x2 > this.maxxval) this.maxxval = x2; + } } } this.xrange = this.maxxval - this.minxval; @@ -103,13 +106,6 @@ DygraphLayout.prototype._evaluateLineCharts = function() { name: setName }; - // limit the x, y values so they do not overdraw - if (point.y <= 0.0) { - point.y = 0.0; - } - if (point.y >= 1.0) { - point.y = 1.0; - } this.points.push(point); } } @@ -202,6 +198,35 @@ DygraphLayout.prototype.updateOptions = function(new_options) { Dygraph.update(this.options, new_options ? new_options : {}); }; +/** + * Return a copy of the point at the indicated index, with its yval unstacked. + * @param int index of point in layout_.points + */ +DygraphLayout.prototype.unstackPointAtIndex = function(idx) { + var point = this.points[idx]; + + // Clone the point since we modify it + var unstackedPoint = {}; + for (var i in point) { + unstackedPoint[i] = point[i]; + } + + if (!this.attr_("stackedGraph")) { + return unstackedPoint; + } + + // The unstacked yval is equal to the current yval minus the yval of the + // next point at the same xval. + for (var i = idx+1; i < this.points.length; i++) { + if (this.points[i].xval == point.xval) { + unstackedPoint.yval -= this.points[i].yval; + break; + } + } + + return unstackedPoint; +} + // Subclass PlotKit.CanvasRenderer to add: // 1. X/Y grid overlay // 2. Ability to draw error bars (if required) @@ -501,7 +526,7 @@ DygraphCanvasRenderer.prototype._renderAnnotations = function() { "position": "absolute", "fontSize": this.options.axisLabelFontSize + "px", "zIndex": 10, - "overflow": "hidden", + "overflow": "hidden" }; var bindEvt = function(eventName, classEventName, p, self) { @@ -542,19 +567,23 @@ DygraphCanvasRenderer.prototype._renderAnnotations = function() { div.className += " " + a.cssClass; } - var width = a.hasOwnProperty('height') ? a.height : 20; - var height = a.hasOwnProperty('width') ? a.width : 16; + var width = a.hasOwnProperty('width') ? a.width : 16; + var height = a.hasOwnProperty('height') ? a.height : 16; if (a.hasOwnProperty('icon')) { var img = document.createElement("img"); img.src = a.icon; - img.width = width = a.iconWidth; - img.height = height = a.iconHeight; + img.width = width; + img.height = height; div.appendChild(img); } else if (p.annotation.hasOwnProperty('shortText')) { div.appendChild(document.createTextNode(p.annotation.shortText)); } div.style.left = (p.canvasx - width / 2) + "px"; - div.style.top = (p.canvasy - height - tick_height) + "px"; + if (a.attachAtBottom) { + div.style.top = (this.area.h - height - tick_height) + "px"; + } else { + div.style.top = (p.canvasy - height - tick_height) + "px"; + } div.style.width = width + "px"; div.style.height = height + "px"; div.title = p.annotation.text; @@ -577,8 +606,13 @@ DygraphCanvasRenderer.prototype._renderAnnotations = function() { var ctx = this.element.getContext("2d"); ctx.strokeStyle = this.colors[p.name]; ctx.beginPath(); - ctx.moveTo(p.canvasx, p.canvasy); - ctx.lineTo(p.canvasx, p.canvasy - 2 - tick_height); + if (!a.attachAtBottom) { + ctx.moveTo(p.canvasx, p.canvasy); + ctx.lineTo(p.canvasx, p.canvasy - 2 - tick_height); + } else { + ctx.moveTo(p.canvasx, this.area.h); + ctx.lineTo(p.canvasx, this.area.h - 2 - tick_height); + } ctx.closePath(); ctx.stroke(); } @@ -746,18 +780,28 @@ DygraphCanvasRenderer.prototype._renderLineChart = function() { for (var i = 0; i < setCount; i++) { var setName = setNames[i]; var color = this.colors[setName]; + var strokeWidth = this.dygraph_.attr_("strokeWidth", setName); // setup graphics context context.save(); var point = this.layout.points[0]; - var pointSize = this.dygraph_.attr_("pointSize"); + var pointSize = this.dygraph_.attr_("pointSize", setName); var prevX = null, prevY = null; - var drawPoints = this.dygraph_.attr_("drawPoints"); + var drawPoints = this.dygraph_.attr_("drawPoints", setName); var points = this.layout.points; for (var j = 0; j < points.length; j++) { var point = points[j]; if (point.name == setName) { if (!isOK(point.canvasy)) { + if (stepPlot && prevX != null) { + // Draw a horizontal line to the start of the missing data + ctx.beginPath(); + ctx.strokeStyle = color; + ctx.lineWidth = this.options.strokeWidth; + ctx.moveTo(prevX, prevY); + ctx.lineTo(point.canvasx, prevY); + ctx.stroke(); + } // this will make us move to the next point, not draw a line to it. prevX = prevY = null; } else { @@ -770,17 +814,20 @@ DygraphCanvasRenderer.prototype._renderLineChart = function() { prevX = point.canvasx; prevY = point.canvasy; } else { - ctx.beginPath(); - ctx.strokeStyle = color; - ctx.lineWidth = this.options.strokeWidth; - ctx.moveTo(prevX, prevY); - if (stepPlot) { - ctx.lineTo(point.canvasx, prevY); + // TODO(danvk): figure out why this conditional is necessary. + if (strokeWidth) { + ctx.beginPath(); + ctx.strokeStyle = color; + ctx.lineWidth = strokeWidth; + ctx.moveTo(prevX, prevY); + if (stepPlot) { + ctx.lineTo(point.canvasx, prevY); + } + prevX = point.canvasx; + prevY = point.canvasy; + ctx.lineTo(prevX, prevY); + ctx.stroke(); } - prevX = point.canvasx; - prevY = point.canvasy; - ctx.lineTo(prevX, prevY); - ctx.stroke(); } if (drawPoints || isIsolated) {