- {
- 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();
- }
- } }
- );
+ B : {
+ drawPointCallback : Dygraph.Circles.HEXAGON,
+ drawHighlightPointCallback : Dygraph.Circles.HEXAGON
+ }
+ }
+ });
+
+
+ // Fancy demos
+ var smile = 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 frown = function(g, series, ctx, cx, cy, color, radius) {
+ mouthlessFace(g, series, ctx, cx, cy, color, radius);
+
+ ctx.lineWidth = 1;
+ ctx.fillStyle = "#000000";
+ ctx.beginPath();
+ ctx.arc(cx, cy + radius, radius - 2, Math.PI + .3, -.3, false);
+ ctx.stroke();
+ };
+
+ var mouthlessFace = function(g, series, ctx, cx, cy, color, radius) {
+ ctx.lineWidth = 1;
+ 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.beginPath();
+ ctx.arc(cx + (radius / 3) , cy - (radius / 4), 1, Math.PI * 2, false);
+ ctx.closePath();
+ ctx.stroke();
+ ctx.fill();
+ };
+
+ var makeGraph = function(title, yFunc, extraOpts) {
+ var opts = {
+ drawPoints : true,
+ pointSize : 5
+ };
+
+ var shapes = [];
+ var addShape = function(name, pointFn, highlightPointFn) {
+ shapes.push(name);
+ opts[name] = {
+ drawPointCallback: pointFn,
+ drawHighlightPointCallback: highlightPointFn
+ };
+ };
+
+ for (var shape in Dygraph.Circles) {
+ if (!Dygraph.Circles.hasOwnProperty(shape)) continue;
+ var fn = Dygraph.Circles[shape];
+ if (typeof fn !== 'function') continue;
+ addShape(shape.toLowerCase(), fn, fn);
+ };
+ addShape('custom', frown, smile);
+
+ for (var key in extraOpts) {
+ if (extraOpts.hasOwnProperty(key)) {
+ opts[key] = extraOpts[key];
+ }
+ };
+
+ var header = document.createElement('h3');
+ header.appendChild(document.createTextNode(title));
+ document.body.appendChild(header);
+
+ var div = document.createElement('div');
+ document.body.appendChild(div);
+
+ var g = new Dygraph(
+ div,
+ function() {
+ var r = "xval," + shapes.join(',') + "\n";
+ var n = shapes.length;
+ for (var i=1; i<=20; i++) {
+ r += i;
+ for (var j = 0; j < n; j++) {
+ r += "," + yFunc(i, j, n);
+ }
+ r += "\n";
+ }
+ return r;
+ }, opts);
+ };
+
+ makeGraph(
+ "Gallery of predefined shapes, adding a custom shape:",
+ function(x, c, n) {
+ return x / 3 + c * 10;
+ }, {
+ highlightCircleSize : 8
+ });
+ makeGraph(
+ "With interactive per-series highlighting:",
+ function(x, c, n) {
+ return Math.sin(x * c / n);
+ }, {
+ strokeBorderWidth: 2,
+ highlightSeriesOpts: {
+ pointSize: 6,
+ highlightCircleSize: 10,
+ strokeWidth: 2,
+ }});