X-Git-Url: https://adrianiainlam.tk/git/?a=blobdiff_plain;f=dygraph-canvas.js;h=3b2ffa7c8ad9336a234b546660e735f3b4708a70;hb=8e48eef771ca7e1f4091845e6c690ad309c46fd8;hp=1947ccd6206723c0882cf3983ffde1f22d59b008;hpb=ce5e8d36fbecd1bc1811dc31091c9c9cf725d571;p=dygraphs.git diff --git a/dygraph-canvas.js b/dygraph-canvas.js index 1947ccd..3b2ffa7 100644 --- a/dygraph-canvas.js +++ b/dygraph-canvas.js @@ -30,26 +30,25 @@ DygraphLayout.prototype.addDataset = function(setname, set_xy) { this.datasets[setname] = set_xy; }; -// TODO(danvk): CONTRACT remove DygraphLayout.prototype.setAnnotations = function(ann) { // The Dygraph object's annotations aren't parsed. We parse them here and // save a copy. var parse = this.attr_('xValueParser'); for (var i = 0; i < ann.length; i++) { var a = {}; - if (!ann[i].x) { + if (!ann[i].xval && !ann[i].x) { this.dygraph_.error("Annotations must have an 'x' property"); 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; } Dygraph.update(a, ann[i]); - a.xval = parse(a.x); + if (!a.xval) a.xval = parse(a.x); this.annotations.push(a); } }; @@ -502,7 +501,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) { @@ -520,6 +519,10 @@ DygraphCanvasRenderer.prototype._renderAnnotations = function() { var points = this.layout.annotated_points; for (var i = 0; i < points.length; i++) { var p = points[i]; + if (p.canvasx < this.area.x || p.canvasx > this.area.x + this.area.w) { + continue; + } + var a = p.annotation; var tick_height = 6; if (a.hasOwnProperty("tickHeight")) { @@ -539,24 +542,29 @@ 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; div.style.color = this.colors[p.name]; div.style.borderColor = this.colors[p.name]; + a.div = div; Dygraph.addEvent(div, 'click', bindEvt('clickHandler', 'annotationClickHandler', p, this)); @@ -573,8 +581,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(); } @@ -742,13 +755,14 @@ 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]; @@ -766,17 +780,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) {