Add custom-circles demo to tests/. Obvious bugs in rendering custom widgets.

[dygraphs.git] / tests / custom-circles.html
diff --git a/tests/custom-circles.html b/tests/custom-circles.html

new file mode 100644 (file)

index 0000000..6a4ced1
--- /dev/null
+++ b/tests/custom-circles.html
@@ -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>