pass through (row, col) to valueFormatter
[dygraphs.git] / tests / custom-circles.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>Custom Circles</title>
5 <!--
6 For production (minified) code, use:
7 <script type="text/javascript" src="dygraph-combined.js"></script>
8 -->
9 <script type="text/javascript" src="../dygraph-dev.js"></script>
10 <script type="text/javascript" src="../extras/shapes.js"></script>
11
12 </head>
13 <body>
14 <h2>Custom circles and hover circles</h2>
15
16 <script type="text/javascript">
17 // Simple version
18 var div = document.createElement('div');
19 document.body.appendChild(div);
20
21 var data = 'x,A,B\n' +
22 '1,1,2\n' +
23 '2,2,4\n' +
24 '3,3,6\n' +
25 '4,4,8\n' +
26 '5,5,7\n';
27 var g = new Dygraph(div, data, {
28 drawPoints : true,
29 pointSize : 5,
30 highlightCircleSize: 8,
31 series : {
32 A : {
33 drawPointCallback : Dygraph.Circles.TRIANGLE,
34 drawHighlightPointCallback : Dygraph.Circles.TRIANGLE
35 },
36 B : {
37 drawPointCallback : Dygraph.Circles.HEXAGON,
38 drawHighlightPointCallback : Dygraph.Circles.HEXAGON
39 }
40 }
41 });
42
43
44 // Fancy demos
45 var smile = function(g, series, ctx, cx, cy, color, radius) {
46 mouthlessFace(g, series, ctx, cx, cy, color, radius);
47
48 ctx.fillStyle = "#000000";
49 ctx.beginPath();
50 ctx.arc(cx, cy, radius - 2, .3, Math.PI - .3, false);
51 ctx.stroke();
52 };
53
54 var frown = function(g, series, ctx, cx, cy, color, radius) {
55 mouthlessFace(g, series, ctx, cx, cy, color, radius);
56
57 ctx.lineWidth = 1;
58 ctx.fillStyle = "#000000";
59 ctx.beginPath();
60 ctx.arc(cx, cy + radius, radius - 2, Math.PI + .3, -.3, false);
61 ctx.stroke();
62 };
63
64 var mouthlessFace = function(g, series, ctx, cx, cy, color, radius) {
65 ctx.lineWidth = 1;
66 ctx.strokeStyle = "#000000";
67 ctx.fillStyle = "#FFFF00";
68 ctx.beginPath();
69 ctx.arc(cx, cy, radius, Math.PI * 2, false);
70 ctx.closePath();
71 ctx.stroke();
72 ctx.fill();
73
74 ctx.fillStyle = "#000000";
75 ctx.beginPath();
76 ctx.arc(cx - (radius / 3) , cy - (radius / 4), 1, Math.PI * 2, false);
77 ctx.closePath();
78 ctx.stroke();
79 ctx.fill();
80
81 ctx.beginPath();
82 ctx.arc(cx + (radius / 3) , cy - (radius / 4), 1, Math.PI * 2, false);
83 ctx.closePath();
84 ctx.stroke();
85 ctx.fill();
86 };
87
88 var makeGraph = function(title, yFunc, extraOpts) {
89 var opts = {
90 drawPoints : true,
91 pointSize : 5
92 };
93
94 var shapes = [];
95 var addShape = function(name, pointFn, highlightPointFn) {
96 shapes.push(name);
97 if (!opts['series']) opts['series'] = {};
98 opts.series[name] = {
99 drawPointCallback: pointFn,
100 drawHighlightPointCallback: highlightPointFn
101 };
102 };
103
104 for (var shape in Dygraph.Circles) {
105 if (!Dygraph.Circles.hasOwnProperty(shape)) continue;
106 var fn = Dygraph.Circles[shape];
107 if (typeof fn !== 'function') continue;
108 addShape(shape.toLowerCase(), fn, fn);
109 };
110 addShape('custom', frown, smile);
111
112 for (var key in extraOpts) {
113 if (extraOpts.hasOwnProperty(key)) {
114 opts[key] = extraOpts[key];
115 }
116 };
117
118 var header = document.createElement('h3');
119 header.appendChild(document.createTextNode(title));
120 document.body.appendChild(header);
121
122 var div = document.createElement('div');
123 document.body.appendChild(div);
124
125 var g = new Dygraph(
126 div,
127 function() {
128 var r = "xval," + shapes.join(',') + "\n";
129 var n = shapes.length;
130 for (var i=1; i<=20; i++) {
131 r += i;
132 for (var j = 0; j < n; j++) {
133 r += "," + yFunc(i, j, n);
134 }
135 r += "\n";
136 }
137 return r;
138 }, opts);
139 };
140
141 makeGraph(
142 "Gallery of predefined shapes, adding a custom shape:",
143 function(x, c, n) {
144 return x / 3 + c * 10;
145 }, {
146 highlightCircleSize : 8
147 });
148 makeGraph(
149 "With interactive per-series highlighting:",
150 function(x, c, n) {
151 return Math.sin(x * c / n);
152 }, {
153 strokeBorderWidth: 2,
154 highlightSeriesOpts: {
155 pointSize: 6,
156 highlightCircleSize: 10,
157 strokeWidth: 2,
158 }});
159 </script>
160 </body>
161 </html>