From ce5e8d36fbecd1bc1811dc31091c9c9cf725d571 Mon Sep 17 00:00:00 2001 From: Dan Vanderkam Date: Sat, 11 Sep 2010 09:30:12 -0700 Subject: [PATCH] icons working --- dygraph-canvas.js | 42 ++++++++++++++++++++++++++++++++---------- tests/annotation.html | 7 ++++--- tests/dollar.png | Bin 0 -> 3461 bytes 3 files changed, 36 insertions(+), 13 deletions(-) create mode 100644 tests/dollar.png diff --git a/dygraph-canvas.js b/dygraph-canvas.js index 3932e71..1947ccd 100644 --- a/dygraph-canvas.js +++ b/dygraph-canvas.js @@ -41,6 +41,13 @@ DygraphLayout.prototype.setAnnotations = function(ann) { 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 " + + "annotation.icon property"); + return; + } Dygraph.update(a, ann[i]); a.xval = parse(a.x); this.annotations.push(a); @@ -495,7 +502,6 @@ DygraphCanvasRenderer.prototype._renderAnnotations = function() { "position": "absolute", "fontSize": this.options.axisLabelFontSize + "px", "zIndex": 10, - "width": "20px", "overflow": "hidden", }; @@ -514,9 +520,10 @@ DygraphCanvasRenderer.prototype._renderAnnotations = function() { var points = this.layout.annotated_points; for (var i = 0; i < points.length; i++) { var p = points[i]; - var tick_height = 5; - if (p.annotation.hasOwnProperty("tickHeight")) { - tick_height = p.annotation.tickHeight; + var a = p.annotation; + var tick_height = 6; + if (a.hasOwnProperty("tickHeight")) { + tick_height = a.tickHeight; } var div = document.createElement("div"); @@ -525,13 +532,28 @@ DygraphCanvasRenderer.prototype._renderAnnotations = function() { div.style[name] = annotationStyle[name]; } } - div.className = "dygraphDefaultAnnotation"; - if (p.annotation.hasOwnProperty('cssClass')) { - div.className += " " + p.annotation.cssClass; + if (!a.hasOwnProperty('icon')) { + div.className = "dygraphDefaultAnnotation"; + } + if (a.hasOwnProperty('cssClass')) { + div.className += " " + a.cssClass; + } + + var width = a.hasOwnProperty('height') ? a.height : 20; + var height = a.hasOwnProperty('width') ? a.width : 16; + if (a.hasOwnProperty('icon')) { + var img = document.createElement("img"); + img.src = a.icon; + img.width = width = a.iconWidth; + img.height = height = a.iconHeight; + div.appendChild(img); + } else if (p.annotation.hasOwnProperty('shortText')) { + div.appendChild(document.createTextNode(p.annotation.shortText)); } - div.appendChild(document.createTextNode(p.annotation.shortText)); - div.style.left = (p.canvasx - 10) + "px"; - div.style.top = (p.canvasy - 20 - tick_height) + "px"; + div.style.left = (p.canvasx - width / 2) + "px"; + 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]; diff --git a/tests/annotation.html b/tests/annotation.html index f4ad452..2cecb9a 100644 --- a/tests/annotation.html +++ b/tests/annotation.html @@ -10,7 +10,6 @@ @@ -66,8 +65,10 @@ annotations.push( { series: 'another line', x: "20061013", - icon: 'http://www.planscalendar.com/icons/dollar_sign_32x32.gif', - shortText: 'A', + icon: 'dollar.png', + iconWidth: 18, + iconHeight: 23, + tickHeight: 4, text: 'Another one', cssClass: 'annotation', clickHandler: function() { diff --git a/tests/dollar.png b/tests/dollar.png new file mode 100644 index 0000000000000000000000000000000000000000..f34ef3d296ed1288dc8c32cb5bd6ca58a1f3e171 GIT binary patch literal 3461 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