4 <meta http-equiv=
"X-UA-Compatible" content=
"IE=EmulateIE7; IE=EmulateIE9">
5 <title>Custom Circles
</title>
7 <script type=
"text/javascript" src=
"../excanvas.js"></script>
10 For production (minified) code, use:
11 <script type=
"text/javascript" src=
"dygraph-combined.js"></script>
13 <script type=
"text/javascript" src=
"../dygraph-dev.js"></script>
17 <h2>Custom circles and hover circles
</h2>
19 <script type=
"text/javascript">
20 var smile = function(g, series, ctx, cx, cy, color, radius) {
21 mouthlessFace(g, series, ctx, cx, cy, color, radius);
23 ctx.fillStyle =
"#000000";
25 ctx.arc(cx, cy, radius -
2,
.3, Math.PI -
.3, false);
29 var frown = function(g, series, ctx, cx, cy, color, radius) {
30 mouthlessFace(g, series, ctx, cx, cy, color, radius);
33 ctx.fillStyle =
"#000000";
35 ctx.arc(cx, cy + radius, radius -
2, Math.PI +
.3, -
.3, false);
39 var mouthlessFace = function(g, series, ctx, cx, cy, color, radius) {
41 ctx.strokeStyle =
"#000000";
42 ctx.fillStyle =
"#FFFF00";
44 ctx.arc(cx, cy, radius, Math.PI *
2, false);
49 ctx.fillStyle =
"#000000";
51 ctx.arc(cx - (radius /
3) , cy - (radius /
4),
1, Math.PI *
2, false);
57 ctx.arc(cx + (radius /
3) , cy - (radius /
4),
1, Math.PI *
2, false);
63 var makeGraph = function(yFunc, extraOpts) {
70 var addShape = function(name, fn) {
73 drawPointCallback: fn,
74 drawHighlightPointCallback: fn
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);
84 addShape('custom', frown, smile);
86 for (var key in extraOpts) {
87 if (extraOpts.hasOwnProperty(key)) {
88 opts[key] = extraOpts[key];
92 var div = document.createElement('div');
93 document.body.appendChild(div);
97 var r =
"xval," + shapes.join(',') +
"\n";
98 var n = shapes.length;
99 for (var i=
1; i<=
20; i++) {
101 for (var j =
0; j < n; j++) {
102 r +=
"," + yFunc(i, j, n);
112 return x /
3 + c *
10;
114 highlightCircleSize :
8
118 return Math.sin(x * c / n);
120 strokeBorderWidth:
2,
121 highlightSeriesOpts: {
123 highlightCircleSize:
10,