Many bug fixes, highlight seems to not work.

diff --git a/dygraph-utils.js b/dygraph-utils.js
index ab973b3..f9cc85b 100644 (file)
--- a/dygraph-utils.js
+++ b/dygraph-utils.js
@@ -808,37 +808,46 @@ Dygraph.compareArrays = function(array1, array2) {
   return true;
 };
 
-
-Dygraph.RegularConvex = function(sides, rotation) {
+/**
+ * this.sides: the number of sides in the shape.
+ * this.rotation: the shift of the initial angle.
+ * this.delta: the angle shift for each line. If missing, creates a regular
+ *   polygon.
+ */
+Dygraph.RegularShape_ = function(sides, rotation, delta) {
   this.sides = sides;
   this.rotation = rotation ? rotation : 0;
-  this.delta = Math.PI * 2 / sides;
+  this.delta = delta ? delta : Math.PI * 2 / sides;
 }
 
-Dygraph.RegularConvex.prototype.draw = function(ctx, cx, cy, radius, angleAdjustment) {
- ctx.beginPath();
- var first = true;
- if (!angleAdjustment) angleAdjustment = 0;
- var angle = this.rotation + angleAdjustment;
-
- var x = cx + (Math.sin(angle) * radius);
- var y = cy + (-Math.cos(angle) * radius);
- ctx.moveTo(x, y);
-
- for (var idx = 0; idx < this.sides; idx++) {
-   angle = (idx == this.sides - 1) ? this.rotation : (angle + this.delta);
-   var x = cx + (Math.sin(angle) * radius);
-   var y = cy + (-Math.cos(angle) * radius);
-   ctx.lineTo(x, y);
- }
- ctx.stroke();
- ctx.closePath();
+Dygraph.RegularShape_.prototype.draw = function(ctx, cx, cy, radius) {
+  ctx.beginPath();
+  var first = true;
+  var initialAngle = this.rotation;
+  var angle = initialAngle;
+
+  var computeCoordinates = function() {
+    var x = cx + (Math.sin(angle) * radius);
+    var y = cy + (-Math.cos(angle) * radius);
+    return [x, y]; 
+  };
+
+  var initialCoordinates = computeCoordinates();
+  var x = initialCoordinates[0];
+  var y = initialCoordinates[1];
+  ctx.moveTo(x, y);
+
+  for (var idx = 0; idx < this.sides; idx++) {
+    angle = (idx == this.sides - 1) ? initialAngle : (angle + this.delta);
+    var coords = computeCoordinates();
+    ctx.lineTo(coords[0], coords[1]);
+  }
+  ctx.stroke();
+  ctx.closePath();
 }
 
-Dygraph.DrawPolygon_ = function(sides, rotation, ctx, cx, cy, color, radius, angleAdjustment) {
-  ctx.lineWidth = 1;
-  ctx.strokeStyle = color;
-  new Dygraph.RegularConvex(sides, rotation).draw(ctx, cx, cy, radius, angleAdjustment);
+Dygraph.DrawPolygon_ = function(sides, rotation, ctx, cx, cy, color, radius, delta) {
+  new Dygraph.RegularShape_(sides, rotation, delta).draw(ctx, cx, cy, radius);
 }
 
 Dygraph.Circles = {
@@ -849,28 +858,73 @@ Dygraph.Circles = {
     ctx.fill();
   },
   TRIANGLE : function(g, name, ctx, cx, cy, color, radius) {
-    Dygraph.DrawPolygon_(3, Math.PI / 3, ctx, cx, cy, color, radius);
+    ctx.lineWidth = 1;
+    ctx.strokeStyle = color;
+    new Dygraph.RegularShape_(3).draw(ctx, cx, cy, radius);
   },
   SQUARE : function(g, name, ctx, cx, cy, color, radius) {
-    Dygraph.DrawPolygon_(4, Math.PI / 4, ctx, cx, cy, color, radius);
+    ctx.lineWidth = 1;
+    ctx.strokeStyle = color;
+    new Dygraph.RegularShape_(4, Math.PI / 4).draw(ctx, cx, cy, radius);
   },
   DIAMOND : function(g, name, ctx, cx, cy, color, radius) {
-    Dygraph.DrawPolygon_(4, Math.PI / 4, ctx, cx, cy, color, radius, Math.PI / 4);
+    ctx.lineWidth = 1;
+    ctx.strokeStyle = color;
+    new Dygraph.RegularShape_(4).draw(ctx, cx, cy, radius);
   },
   PENTAGON : function(g, name, ctx, cx, cy, color, radius) {
-    Dygraph.DrawPolygon_(5, Math.PI / 5, ctx, cx, cy, color, radius);
+    ctx.lineWidth = 1;
+    ctx.strokeStyle = color;
+    new Dygraph.RegularShape_(5).draw(ctx, cx, cy, radius);
   },
   HEXAGON : function(g, name, ctx, cx, cy, color, radius) {
-    Dygraph.DrawPolygon_(6, Math.PI / 6, ctx, cx, cy, color, radius);
+    ctx.lineWidth = 1;
+    ctx.strokeStyle = color;
+    new Dygraph.RegularShape_(6).draw(ctx, cx, cy, radius);
   },
   CIRCLE : function(g, name, ctx, cx, cy, color, radius) {
     ctx.beginPath();
     ctx.lineStyle = color;
     ctx.arc(cx, cy, radius, 0, 2 * Math.PI, false);
-    ctx.fill();
+    ctx.stroke();
   },
   STAR : function(g, name, ctx, cx, cy, color, radius) {
-    Dygraph.DrawPolygon_(5, 2 * Math.PI / 5, ctx, cx, cy, color, radius);
+    ctx.lineWidth = 1;
+    ctx.strokeStyle = color;
+    new Dygraph.RegularShape_(5, 0, 4 * Math.PI / 5).draw(ctx, cx, cy, radius);
+  },
+  PLUS : function(g, name, ctx, cx, cy, color, radius) {
+    ctx.lineWidth = 1;
+    ctx.strokeStyle = color;
+
+    ctx.beginPath();
+    ctx.moveTo(cx + radius, cy);
+    ctx.lineTo(cx - radius, cy);
+    ctx.closePath();
+    ctx.stroke();
+
+    ctx.beginPath();
+    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.beginPath();
+    ctx.moveTo(cx + radius, cy + radius);
+    ctx.lineTo(cx - radius, cy - radius);
+    ctx.closePath();
+    ctx.stroke();
+
+    ctx.beginPath();
+    ctx.moveTo(cx + radius, cy - radius);
+    ctx.lineTo(cx - radius, cy + radius);
+    ctx.closePath();
+
+    ctx.stroke();
   }
-  // TODO: plus, x.
 };

diff --git a/tests/custom-circles.html b/tests/custom-circles.html
index 6a4ced1..8b1d8bb 100644 (file)
--- a/tests/custom-circles.html
+++ b/tests/custom-circles.html
@@ -2,7 +2,7 @@
 <html>
   <head>
     <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">
-    <title>Per-Series Properties</title>
+    <title>Custom Circles</title>
     <!--[if IE]>
     <script type="text/javascript" src="../excanvas.js"></script>
     <![endif]-->
@@ -14,65 +14,81 @@
 
   </head>
   <body>
-    <h2>Chart with per-series properties</h2>
+    <h2>Custom circles and hover circles</h2>
     <div id="demodiv"></div>
 
     <script type="text/javascript">
+      var smile = function(g, series, ctx, cx, cy, color, radius) {
+        mouthlessFace(g, series, ctx, cx, cy, color, radius);
 
-      g = new Dygraph(
-              document.getElementById("demodiv"),
-              function() {
+        ctx.fillStyle = "#000000";
+        ctx.beginPath();
+        ctx.arc(cx, cy, radius - 2, .3, Math.PI - .3, false);
+        ctx.stroke();
+      };
+
+      var frown = function(g, series, ctx, cx, cy, color, radius) {
+        mouthlessFace(g, series, ctx, cx, cy, color, radius);
+
+        ctx.fillStyle = "#000000";
+        ctx.beginPath();
+        ctx.arc(cx, cy, radius - 2, -.3, Math.PI + .3, false);
+        ctx.stroke();
+      };
 
-                var r = "x,default,triangle,square,diamond,pentagon,hexagon,circle,star,custom\n";
-                for (var i=1; i<=20; i++) {
-                  r += i;
-                  for (var j = 0; j < 9; j++) {
-                    r += "," + j + (i / 20);
-                  }
-                  r += "\n";
-                }
-                return r;
-              },
-              {
-                drawPoints : true,
-                pointSize : 5,
-                'default' : { drawPointCallback : Dygraph.Circles.DEFAULT },
-                'triangle' : { drawPointCallback : Dygraph.Circles.TRIANGLE },
-                'square' : { drawPointCallback : Dygraph.Circles.SQUARE },
-                'diamond' : { drawPointCallback : Dygraph.Circles.DIAMOND },
-                'pentagon' : { drawPointCallback : Dygraph.Circles.PENTAGON },
-                'hexagon' : { drawPointCallback : Dygraph.Circles.HEXAGON },
-                'circle' : { drawPointCallback : Dygraph.Circles.CIRCLE },
-                'star' : { drawPointCallback : Dygraph.Circles.STAR },
-                'custom' : { drawPointCallback : function(g, series, ctx, cx, cy, color, radius) {
-                    ctx.fillStyle = "#FFFF00";
-                    ctx.beginPath();
-                    ctx.arc(cx, cy, radius, Math.PI*2, false);
-                    ctx.closePath();
-                    ctx.stroke();
-                    ctx.fill();
+      var mouthlessFace = function(g, series, ctx, cx, cy, color, radius) {
+        ctx.strokeStyle = "#000000";
+        ctx.fillStyle = "#FFFF00";
+        ctx.beginPath();
+        ctx.arc(cx, cy, radius, Math.PI * 2, false);
+        ctx.closePath();
+        ctx.stroke();
+        ctx.fill();
 
-                    ctx.fillStyle = "#000000";
-                    ctx.beginPath();
-                    ctx.arc(cx - (radius / 3) , cy - (radius / 4), 1, Math.PI*2, false);
-                    ctx.closePath();
-                    ctx.stroke();
-                    ctx.fill();
+        ctx.fillStyle = "#000000";
+        ctx.beginPath();
+        ctx.arc(cx - (radius / 3) , cy - (radius / 4), 1, Math.PI * 2, false);
+        ctx.closePath();
+        ctx.stroke();
+        ctx.fill();
 
-                    ctx.fillStyle = "#000000";
-                    ctx.beginPath();
-                    ctx.arc(cx + (radius / 3) , cy - (radius / 4), 1, Math.PI*2, false);
-                    ctx.closePath();
-                    ctx.stroke();
-                    ctx.fill();
+        ctx.beginPath();
+        ctx.arc(cx + (radius / 3) , cy - (radius / 4), 1, Math.PI * 2, false);
+        ctx.closePath();
+        ctx.stroke();
+        ctx.fill();
+      };
+
+      g = new Dygraph(
+          document.getElementById("demodiv"),
+          function() {
 
-                    ctx.fillStyle = "#000000";
-                    ctx.beginPath();
-                    ctx.arc(cx, cy, radius - 2, .3, Math.PI - .3, false);
-                    ctx.stroke();
-                  }
-                } }
-          );
+            var r = "xval,default,triangle,square,diamond,pentagon,hexagon,circle,star,plus,ex,custom\n";
+            for (var i=1; i<=20; i++) {
+              r += i;
+              for (var j = 0; j < 11; j++) {
+                r += "," + j + (i / 3);
+              }
+              r += "\n";
+            }
+            return r;
+          },
+          {
+            drawPoints : true,
+            pointSize : 6,
+            'default' : { drawPointCallback : Dygraph.Circles.DEFAULT },
+            'triangle' : { drawPointCallback : Dygraph.Circles.TRIANGLE },
+            'square' : { drawPointCallback : Dygraph.Circles.SQUARE },
+            'diamond' : { drawPointCallback : Dygraph.Circles.DIAMOND },
+            'pentagon' : { drawPointCallback : Dygraph.Circles.PENTAGON },
+            'hexagon' : { drawPointCallback : Dygraph.Circles.HEXAGON },
+            'circle' : { drawPointCallback : Dygraph.Circles.CIRCLE },
+            'star' : { drawPointCallback : Dygraph.Circles.STAR },
+            'plus' : { drawPointCallback : Dygraph.Circles.PLUS },
+            'ex' : { drawPointCallback : Dygraph.Circles.EX },
+            'custom' : { drawPointCallback : smile, drawHighlightCallback : frown }
+          }
+      );
     </script>
 </body>
-</html>
+</html>
\ No newline at end of file