add tick marks

diff --git a/dygraph-canvas.js b/dygraph-canvas.js
index acb1266..3932e71 100644 (file)
--- a/dygraph-canvas.js
+++ b/dygraph-canvas.js
@@ -514,6 +514,11 @@ 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 div = document.createElement("div");
     for (var name in annotationStyle) {
       if (annotationStyle.hasOwnProperty(name)) {
@@ -526,18 +531,30 @@ DygraphCanvasRenderer.prototype._renderAnnotations = function() {
     }
     div.appendChild(document.createTextNode(p.annotation.shortText));
     div.style.left = (p.canvasx - 10) + "px";
-    div.style.top = p.canvasy + "px";
+    div.style.top = (p.canvasy - 20 - tick_height) + "px";
     div.title = p.annotation.text;
     div.style.color = this.colors[p.name];
     div.style.borderColor = this.colors[p.name];
 
-    Dygraph.addEvent(div, 'click', bindEvt('clickHandler', 'annotationClickHandler', p, this));
-    Dygraph.addEvent(div, 'mouseover', bindEvt('mouseOverHandler', 'annotationMouseOverHandler', p, this));
-    Dygraph.addEvent(div, 'mouseout', bindEvt('mouseOutHandler', 'annotationMouseOutHandler', p, this));
-    Dygraph.addEvent(div, 'dblclick', bindEvt('dblClickHandler', 'annotationDblClickHandler', p, this));
+    Dygraph.addEvent(div, 'click',
+        bindEvt('clickHandler', 'annotationClickHandler', p, this));
+    Dygraph.addEvent(div, 'mouseover',
+        bindEvt('mouseOverHandler', 'annotationMouseOverHandler', p, this));
+    Dygraph.addEvent(div, 'mouseout',
+        bindEvt('mouseOutHandler', 'annotationMouseOutHandler', p, this));
+    Dygraph.addEvent(div, 'dblclick',
+        bindEvt('dblClickHandler', 'annotationDblClickHandler', p, this));
 
     this.container.appendChild(div);
     this.annotations.push(div);
+
+    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);
+    ctx.closePath();
+    ctx.stroke();
   }
 };
 

diff --git a/tests/annotation.html b/tests/annotation.html
index cb7a95d..f4ad452 100644 (file)
--- a/tests/annotation.html
+++ b/tests/annotation.html
@@ -66,7 +66,8 @@
       annotations.push( {
         series: 'another line',
         x: "20061013",
-        shortText: 'X',
+        icon: 'http://www.planscalendar.com/icons/dollar_sign_32x32.gif',
+        shortText: 'A',
         text: 'Another one',
         cssClass: 'annotation',
         clickHandler: function() {
@@ -82,7 +83,8 @@
           series: 'line',
           x: "200610" + x,
           shortText: x,
-          text: 'Line ' + x
+          text: 'Line ' + x,
+          tickHeight: 10
         } );
         last_ann = x;
         g.setAnnotations(annotations);