Merge pull request #128 from klausw-g/custom-circle-tweaks

Custom circle tweaks:

diff --git a/dygraph-utils.js b/dygraph-utils.js
index 61aba43..3827d91 100644 (file)
--- a/dygraph-utils.js
+++ b/dygraph-utils.js
@@ -844,14 +844,14 @@ Dygraph.regularShape_ = function(
     var coords = computeCoordinates();
     ctx.lineTo(coords[0], coords[1]);
   }
+  ctx.fill();
   ctx.stroke();
-  ctx.closePath();
 }
 
 Dygraph.shapeFunction_ = function(sides, rotationRadians, delta) {
   return function(g, name, ctx, cx, cy, color, radius) {
-    ctx.lineWidth = 1;
     ctx.strokeStyle = color;
+    ctx.fillStyle = "white";
     Dygraph.regularShape_(ctx, sides, radius, cx, cy, rotationRadians, delta);
   };
 };
@@ -875,12 +875,13 @@ Dygraph.Circles = {
   CIRCLE : function(g, name, ctx, cx, cy, color, radius) {
     ctx.beginPath();
     ctx.strokeStyle = color;
+    ctx.fillStyle = "white";
     ctx.arc(cx, cy, radius, 0, 2 * Math.PI, false);
+    ctx.fill();
     ctx.stroke();
   },
   STAR : Dygraph.shapeFunction_(5, 0, 4 * Math.PI / 5),
   PLUS : function(g, name, ctx, cx, cy, color, radius) {
-    ctx.lineWidth = 1;
     ctx.strokeStyle = color;
 
     ctx.beginPath();
@@ -893,12 +894,10 @@ Dygraph.Circles = {
     ctx.moveTo(cx, cy + radius);
     ctx.lineTo(cx, cy - radius);
     ctx.closePath();
-
     ctx.stroke();
   },
   EX : function(g, name, ctx, cx, cy, color, radius) {
-    ctx.lineWidth = 1;
-    ctx.strokeStyle = "black";
+    ctx.strokeStyle = color;
 
     ctx.beginPath();
     ctx.moveTo(cx + radius, cy + radius);
@@ -910,7 +909,6 @@ Dygraph.Circles = {
     ctx.moveTo(cx + radius, cy - radius);
     ctx.lineTo(cx - radius, cy + radius);
     ctx.closePath();
-
     ctx.stroke();
   }
 };

diff --git a/dygraph.js b/dygraph.js
index 14347f5..4b4bd30 100644 (file)
--- a/dygraph.js
+++ b/dygraph.js
@@ -1766,11 +1766,15 @@ Dygraph.prototype.updateSelection_ = function() {
 
       var circleSize = this.attr_('highlightCircleSize', pt.name);
       var callback = this.attr_("drawHighlightPointCallback", pt.name);
+      var color = this.plotter_.colors[pt.name];
       if (!callback) {
         callback = Dygraph.Circles.DEFAULT;
       }
+      ctx.lineWidth = this.attr_('strokeWidth', pt.name);
+      ctx.strokeStyle = color;
+      ctx.fillStyle = color;
       callback(this.g, pt.name, ctx, canvasx, pt.canvasy,
-          this.plotter_.colors[pt.name], circleSize);
+          color, circleSize);
     }
     ctx.restore();
 

diff --git a/tests/custom-circles.html b/tests/custom-circles.html
index 7a30ea2..0249803 100644 (file)
--- a/tests/custom-circles.html
+++ b/tests/custom-circles.html
@@ -30,6 +30,7 @@
       var frown = function(g, series, ctx, cx, cy, color, radius) {
         mouthlessFace(g, series, ctx, cx, cy, color, radius);
 
+        ctx.lineWidth = 1;
         ctx.fillStyle = "#000000";
         ctx.beginPath();
         ctx.arc(cx, cy + radius, radius - 2, Math.PI + .3, -.3, false);
@@ -37,6 +38,7 @@
       };
 
       var mouthlessFace = function(g, series, ctx, cx, cy, color, radius) {
+        ctx.lineWidth = 1;
         ctx.strokeStyle = "#000000";
         ctx.fillStyle = "#FFFF00";
         ctx.beginPath();