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