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);
--- /dev/null
+<!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>