* MIT-licensed (http://opensource.org/licenses/MIT)
*/
+/*global Dygraph:false */
+
Dygraph.Plugins.Annotations = (function() {
+"use strict";
+
/**
Current bits of jankiness:
- Uses dygraph.layout_ to get the parsed annotations.
annotations.prototype.activate = function(g) {
return {
clearChart: this.clearChart,
- drawChart: this.drawChart
+ didDrawChart: this.didDrawChart
};
};
this.detachLabels();
};
-annotations.prototype.drawChart = function(e) {
+annotations.prototype.didDrawChart = function(e) {
var g = e.dygraph;
// Early out in the (common) case of zero annotations.
var points = g.layout_.annotated_points;
- if (!points || points.length == 0) return;
+ if (!points || points.length === 0) return;
var containerDiv = e.canvas.parentNode;
var annotationStyle = {
// Add the annotations one-by-one.
var area = e.dygraph.plotter_.area;
+
+ // x-coord to sum of previous annotation's heights (used for stacking).
+ var xToUsedHeight = {};
+
for (var i = 0; i < points.length; i++) {
var p = points[i];
if (p.canvasx < area.x || p.canvasx > area.x + area.w ||
} else if (p.annotation.hasOwnProperty('shortText')) {
div.appendChild(document.createTextNode(p.annotation.shortText));
}
- div.style.left = (p.canvasx - width / 2) + "px";
+ var left = p.canvasx - width / 2;
+ div.style.left = left + "px";
+ var divTop = 0;
if (a.attachAtBottom) {
- div.style.top = (area.h - height - tick_height) + "px";
+ var y = (area.y + area.h - height - tick_height);
+ if (xToUsedHeight[left]) {
+ y -= xToUsedHeight[left];
+ } else {
+ xToUsedHeight[left] = 0;
+ }
+ xToUsedHeight[left] += (tick_height + height);
+ divTop = y;
} else {
- div.style.top = (p.canvasy - height - tick_height) + "px";
+ divTop = p.canvasy - height - tick_height;
}
+ div.style.top = divTop + "px";
div.style.width = width + "px";
div.style.height = height + "px";
div.title = p.annotation.text;
div.style.borderColor = g.colorsMap_[p.name];
a.div = div;
- g.addEvent(div, 'click',
+ g.addAndTrackEvent(div, 'click',
bindEvt('clickHandler', 'annotationClickHandler', p, this));
- g.addEvent(div, 'mouseover',
+ g.addAndTrackEvent(div, 'mouseover',
bindEvt('mouseOverHandler', 'annotationMouseOverHandler', p, this));
- g.addEvent(div, 'mouseout',
+ g.addAndTrackEvent(div, 'mouseout',
bindEvt('mouseOutHandler', 'annotationMouseOutHandler', p, this));
- g.addEvent(div, 'dblclick',
+ g.addAndTrackEvent(div, 'dblclick',
bindEvt('dblClickHandler', 'annotationDblClickHandler', p, this));
containerDiv.appendChild(div);
ctx.moveTo(p.canvasx, p.canvasy);
ctx.lineTo(p.canvasx, p.canvasy - 2 - tick_height);
} else {
- ctx.moveTo(p.canvasx, area.h);
- ctx.lineTo(p.canvasx, area.h - 2 - tick_height);
+ var y = divTop + height;
+ ctx.moveTo(p.canvasx, y);
+ ctx.lineTo(p.canvasx, y + tick_height);
}
ctx.closePath();
ctx.stroke();