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