Merge branch 'master' of github.com:danvk/dygraphs
[dygraphs.git] / tests / custom-circles.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">
5 <title>Custom Circles</title>
6 <!--[if IE]>
7 <script type="text/javascript" src="../excanvas.js"></script>
8 <![endif]-->
9 <!--
10 For production (minified) code, use:
11 <script type="text/javascript" src="dygraph-combined.js"></script>
12 -->
13 <script type="text/javascript" src="../dygraph-dev.js"></script>
14
15 </head>
16 <body>
17 <h2>Custom circles and hover circles</h2>
18
19 <script type="text/javascript">
20 // Simple version
21 var div = document.createElement('div');
22 document.body.appendChild(div);
23
24 var data = 'x,A,B\n' +
25 '1,1,2\n' +
26 '2,2,4\n' +
27 '3,3,6\n' +
28 '4,4,8\n' +
29 '5,5,7\n';
30 var g = new Dygraph(div, data, {
31 drawPoints : true,
32 pointSize : 5,
33 highlightCircleSize: 8,
34 A : {
35 drawPointCallback : Dygraph.Circles.TRIANGLE,
36 drawHighlightPointCallback : Dygraph.Circles.TRIANGLE
37 },
38 B : {
39 drawPointCallback : Dygraph.Circles.HEXAGON,
40 drawHighlightPointCallback : Dygraph.Circles.HEXAGON
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 opts[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>