projects / dygraphs.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: ce5e8d3)
attach divs to points; respect clipping area
authorDan Vanderkam <danvdk@gmail.com>
Sat, 11 Sep 2010 16:44:33 +0000 (09:44 -0700)
committerDan Vanderkam <danvdk@gmail.com>
Sat, 11 Sep 2010 16:44:33 +0000 (09:44 -0700)
dygraph-canvas.js patch | blob | blame | history
tests/annotation.html patch | blob | blame | history

diff --git a/dygraph-canvas.js b/dygraph-canvas.js
index 1947ccd..b71044a 100644 (file)
--- a/dygraph-canvas.js
+++ b/dygraph-canvas.js
@@ -520,6 +520,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")) {
@@ -557,6 +561,7 @@ DygraphCanvasRenderer.prototype._renderAnnotations = function() {
     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));
diff --git a/tests/annotation.html b/tests/annotation.html
index 2cecb9a..b87c291 100644 (file)
--- a/tests/annotation.html
+++ b/tests/annotation.html
@@ -16,22 +16,27 @@
   <body>
     <input type="button" value="Add Annotation" onclick="add()" />
     <div id="events"> </div>
-    <div style="position:absolute; left:100px; top: 200px;" id="g"></div>
-    <div style="position:absolute; left:600px; top: 200px;" id="list"></div>
+    <div style="position:absolute; left:200px; top: 200px;" id="g"></div>
+    <div style="position:absolute; left:700px; top: 200px;" id="list"></div>
 
     <script type="text/javascript">
+      var eventDiv = document.getElementById("events");
+      function nameAnnotation(ann) {
+        return "(" + ann.series + ", " + ann.x + ")";
+      }
+
       g = new DateGraph(
               document.getElementById("g"),
               function() {
                 var zp = function(x) { if (x < 10) return "0"+x; else return x; };
                 var r = "date,parabola,line,another line,sine wave\n";
                 for (var i=1; i<=31; i++) {
-                r += "200610" + zp(i);
-                r += "," + 10*(i*(31-i));
-                r += "," + 10*(8*i);
-                r += "," + 10*(250 - 8*i);
-                r += "," + 10*(125 + 125 * Math.sin(0.3*i));
-                r += "\n";
+                  r += "200610" + zp(i);
+                  r += "," + 10*(i*(31-i));
+                  r += "," + 10*(8*i);
+                  r += "," + 10*(250 - 8*i);
+                  r += "," + 10*(125 + 125 * Math.sin(0.3*i));
+                  r += "\n";
                 }
                 return r;
               },
@@ -44,7 +49,10 @@
                   var ann = g.annotations();
                   var html = "";
                   for (var i = 0; i < ann.length; i++) {
-                    html += "(" + ann[i].series + ", " + ann[i].x + "): " + ann[i].shortText + " -> " + ann[i].text + "<br/>";
+                    var name = nameAnnotation(ann[i]);
+                    html += "<span id='" + name + "'>"
+                    html += name + ": " + ann[i].shortText + " -> ";
+                    html += ann[i].text + "</span><br/>";
                   }
                   document.getElementById("list").innerHTML = html;
                 },
@@ -91,10 +99,7 @@
         g.setAnnotations(annotations);
       }
 
-      var eventDiv = document.getElementById("events");
-      function nameAnnotation(ann) {
-        return "(" + ann.series + ", " + ann.x + ")";
-      }
+      var saveBg = '';
       g.updateOptions( {
         annotationClickHandler: function(ann, point, dg, event) {
           eventDiv.innerHTML += "click: " + nameAnnotation(ann) + "<br/>";
@@ -103,10 +108,13 @@
           eventDiv.innerHTML += "dblclick: " + nameAnnotation(ann) + "<br/>";
         },
         annotationMouseOverHandler: function(ann, point, dg, event) {
-          eventDiv.innerHTML += "mouseenter: " + nameAnnotation(ann) + "<br/>";
+          document.getElementById(nameAnnotation(ann)).style.fontWeight = 'bold';
+          saveBg = ann.div.style.backgroundColor;
+          ann.div.style.backgroundColor = '#ddd';
         },
         annotationMouseOutHandler: function(ann, point, dg, event) {
-          eventDiv.innerHTML += "mouseout: " + nameAnnotation(ann) + "<br/>";
+          document.getElementById(nameAnnotation(ann)).style.fontWeight = 'normal';
+          ann.div.style.backgroundColor = saveBg;
         }
       });
     </script>
danvk/dygraphs fork supporting touch events