Add custom-circles demo to tests/. Obvious bugs in rendering custom widgets.
authorRobert Konigsberg <konigsberg@google.com>
Thu, 23 Feb 2012 00:21:54 +0000 (19:21 -0500)
committerRobert Konigsberg <konigsberg@google.com>
Thu, 23 Feb 2012 00:21:54 +0000 (19:21 -0500)
dygraph-utils.js
tests/custom-circles.html [new file with mode: 0644]

index 9f4fcb0..ab973b3 100644 (file)
@@ -855,7 +855,7 @@ Dygraph.Circles = {
     Dygraph.DrawPolygon_(4, Math.PI / 4, ctx, cx, cy, color, radius);
   },
   DIAMOND : function(g, name, ctx, cx, cy, color, radius) {
-    Dygraph.DrawPolygon_(4, Math.PI / 4, ctx, cx, cy, color, radius, Math.PI / 8);
+    Dygraph.DrawPolygon_(4, Math.PI / 4, ctx, cx, cy, color, radius, Math.PI / 4);
   },
   PENTAGON : function(g, name, ctx, cx, cy, color, radius) {
     Dygraph.DrawPolygon_(5, Math.PI / 5, ctx, cx, cy, color, radius);
diff --git a/tests/custom-circles.html b/tests/custom-circles.html
new file mode 100644 (file)
index 0000000..6a4ced1
--- /dev/null
@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">
+    <title>Per-Series Properties</title>
+    <!--[if IE]>
+    <script type="text/javascript" src="../excanvas.js"></script>
+    <![endif]-->
+    <!--
+    For production (minified) code, use:
+    <script type="text/javascript" src="dygraph-combined.js"></script>
+    -->
+    <script type="text/javascript" src="../dygraph-dev.js"></script>
+
+  </head>
+  <body>
+    <h2>Chart with per-series properties</h2>
+    <div id="demodiv"></div>
+
+    <script type="text/javascript">
+
+      g = new Dygraph(
+              document.getElementById("demodiv"),
+              function() {
+
+                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();
+
+                    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, cy, radius - 2, .3, Math.PI - .3, false);
+                    ctx.stroke();
+                  }
+                } }
+          );
+    </script>
+</body>
+</html>