Commit | Line | Data |
---|---|---|
773d1312 RK |
1 | <!DOCTYPE html> |
2 | <html> | |
3 | <head> | |
4 | <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9"> | |
240c0b11 | 5 | <title>Custom Circles</title> |
773d1312 RK |
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> | |
240c0b11 | 17 | <h2>Custom circles and hover circles</h2> |
773d1312 RK |
18 | |
19 | <script type="text/javascript"> | |
240c0b11 RK |
20 | var smile = function(g, series, ctx, cx, cy, color, radius) { |
21 | mouthlessFace(g, series, ctx, cx, cy, color, radius); | |
773d1312 | 22 | |
240c0b11 RK |
23 | ctx.fillStyle = "#000000"; |
24 | ctx.beginPath(); | |
25 | ctx.arc(cx, cy, radius - 2, .3, Math.PI - .3, false); | |
26 | ctx.stroke(); | |
27 | }; | |
28 | ||
29 | var frown = function(g, series, ctx, cx, cy, color, radius) { | |
30 | mouthlessFace(g, series, ctx, cx, cy, color, radius); | |
31 | ||
a8ef67a8 | 32 | ctx.lineWidth = 1; |
240c0b11 RK |
33 | ctx.fillStyle = "#000000"; |
34 | ctx.beginPath(); | |
4ab51f75 | 35 | ctx.arc(cx, cy + radius, radius - 2, Math.PI + .3, -.3, false); |
240c0b11 RK |
36 | ctx.stroke(); |
37 | }; | |
773d1312 | 38 | |
240c0b11 | 39 | var mouthlessFace = function(g, series, ctx, cx, cy, color, radius) { |
a8ef67a8 | 40 | ctx.lineWidth = 1; |
240c0b11 RK |
41 | ctx.strokeStyle = "#000000"; |
42 | ctx.fillStyle = "#FFFF00"; | |
43 | ctx.beginPath(); | |
44 | ctx.arc(cx, cy, radius, Math.PI * 2, false); | |
45 | ctx.closePath(); | |
46 | ctx.stroke(); | |
47 | ctx.fill(); | |
773d1312 | 48 | |
240c0b11 RK |
49 | ctx.fillStyle = "#000000"; |
50 | ctx.beginPath(); | |
51 | ctx.arc(cx - (radius / 3) , cy - (radius / 4), 1, Math.PI * 2, false); | |
52 | ctx.closePath(); | |
53 | ctx.stroke(); | |
54 | ctx.fill(); | |
773d1312 | 55 | |
240c0b11 RK |
56 | ctx.beginPath(); |
57 | ctx.arc(cx + (radius / 3) , cy - (radius / 4), 1, Math.PI * 2, false); | |
58 | ctx.closePath(); | |
59 | ctx.stroke(); | |
60 | ctx.fill(); | |
61 | }; | |
62 | ||
30b2bf7d KW |
63 | var makeGraph = function(yFunc, extraOpts) { |
64 | var opts = { | |
65 | drawPoints : true, | |
66 | pointSize : 5 | |
67 | }; | |
68 | ||
69 | var shapes = []; | |
70 | var addShape = function(name, fn) { | |
71 | shapes.push(name); | |
72 | opts[name] = { | |
73 | drawPointCallback: fn, | |
74 | drawHighlightPointCallback: fn | |
75 | }; | |
76 | }; | |
77 | ||
78 | for (var shape in Dygraph.Circles) { | |
79 | if (!Dygraph.Circles.hasOwnProperty(shape)) continue; | |
80 | var fn = Dygraph.Circles[shape]; | |
81 | if (typeof fn !== 'function') continue; | |
82 | addShape(shape.toLowerCase(), fn, fn); | |
83 | }; | |
84 | addShape('custom', frown, smile); | |
85 | ||
86 | for (var key in extraOpts) { | |
87 | if (extraOpts.hasOwnProperty(key)) { | |
88 | opts[key] = extraOpts[key]; | |
89 | } | |
90 | }; | |
773d1312 | 91 | |
30b2bf7d KW |
92 | var div = document.createElement('div'); |
93 | document.body.appendChild(div); | |
94 | var g = new Dygraph( | |
95 | div, | |
96 | function() { | |
97 | var r = "xval," + shapes.join(',') + "\n"; | |
98 | var n = shapes.length; | |
240c0b11 RK |
99 | for (var i=1; i<=20; i++) { |
100 | r += i; | |
30b2bf7d KW |
101 | for (var j = 0; j < n; j++) { |
102 | r += "," + yFunc(i, j, n); | |
240c0b11 RK |
103 | } |
104 | r += "\n"; | |
105 | } | |
106 | return r; | |
30b2bf7d KW |
107 | }, opts); |
108 | }; | |
109 | ||
110 | makeGraph( | |
111 | function(x, c, n) { | |
112 | return x / 3 + c * 10; | |
113 | }, { | |
114 | highlightCircleSize : 8 | |
115 | }); | |
116 | makeGraph( | |
117 | function(x, c, n) { | |
118 | return Math.sin(x * c / n); | |
119 | }, { | |
120 | strokeBorderWidth: 2, | |
121 | highlightSeriesOpts: { | |
122 | pointSize: 6, | |
123 | highlightCircleSize: 10, | |
124 | strokeWidth: 2, | |
125 | }}); | |
773d1312 RK |
126 | </script> |
127 | </body> | |
3fdc648d | 128 | </html> |