<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]-->
</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