4 <link rel=
"stylesheet" href=
"../css/dygraph.css">
5 <title>Custom Circles
</title>
7 For production (minified) code, use:
8 <script type=
"text/javascript" src=
"dygraph-combined.js"></script>
10 <script type=
"text/javascript" src=
"../dist/dygraph.js"></script>
11 <script type=
"text/javascript" src=
"../src/extras/shapes.js"></script>
15 <h2>Custom circles and hover circles
</h2>
17 <script type=
"text/javascript">
19 var div = document.createElement('div');
20 document.body.appendChild(div);
22 var data = 'x,A,B
\n' +
28 var g = new Dygraph(div, data, {
31 highlightCircleSize:
8,
34 drawPointCallback : Dygraph.Circles.TRIANGLE,
35 drawHighlightPointCallback : Dygraph.Circles.TRIANGLE
38 drawPointCallback : Dygraph.Circles.HEXAGON,
39 drawHighlightPointCallback : Dygraph.Circles.HEXAGON
46 var smile = function(g, series, ctx, cx, cy, color, radius) {
47 mouthlessFace(g, series, ctx, cx, cy, color, radius);
49 ctx.fillStyle =
"#000000";
51 ctx.arc(cx, cy, radius -
2,
.3, Math.PI -
.3, false);
55 var frown = function(g, series, ctx, cx, cy, color, radius) {
56 mouthlessFace(g, series, ctx, cx, cy, color, radius);
59 ctx.fillStyle =
"#000000";
61 ctx.arc(cx, cy + radius, radius -
2, Math.PI +
.3, -
.3, false);
65 var mouthlessFace = function(g, series, ctx, cx, cy, color, radius) {
67 ctx.strokeStyle =
"#000000";
68 ctx.fillStyle =
"#FFFF00";
70 ctx.arc(cx, cy, radius, Math.PI *
2, false);
75 ctx.fillStyle =
"#000000";
77 ctx.arc(cx - (radius /
3) , cy - (radius /
4),
1, Math.PI *
2, false);
83 ctx.arc(cx + (radius /
3) , cy - (radius /
4),
1, Math.PI *
2, false);
89 var makeGraph = function(title, yFunc, extraOpts) {
96 var addShape = function(name, pointFn, highlightPointFn) {
98 if (!opts['series']) opts['series'] = {};
100 drawPointCallback: pointFn,
101 drawHighlightPointCallback: highlightPointFn
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);
111 addShape('custom', frown, smile);
113 for (var key in extraOpts) {
114 if (extraOpts.hasOwnProperty(key)) {
115 opts[key] = extraOpts[key];
119 var header = document.createElement('h3');
120 header.appendChild(document.createTextNode(title));
121 document.body.appendChild(header);
123 var div = document.createElement('div');
124 document.body.appendChild(div);
129 var r =
"xval," + shapes.join(',') +
"\n";
130 var n = shapes.length;
131 for (var i=
1; i<=
20; i++) {
133 for (var j =
0; j < n; j++) {
134 r +=
"," + yFunc(i, j, n);
143 "Gallery of predefined shapes, adding a custom shape:",
145 return x /
3 + c *
10;
147 highlightCircleSize :
8
150 "With interactive per-series highlighting:",
152 return Math.sin(x * c / n);
154 strokeBorderWidth:
2,
155 highlightSeriesOpts: {
157 highlightCircleSize:
10,