Use link href, not link src (#904)
[dygraphs.git] / tests / custom-circles.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <link rel="stylesheet" href="../dist/dygraph.css">
5 <title>Custom Circles</title>
6 <script type="text/javascript" src="../dist/dygraph.js"></script>
7 <script type="text/javascript" src="../src/extras/shapes.js"></script>
8
9 </head>
10 <body>
11 <h2>Custom circles and hover circles</h2>
12
13 <script type="text/javascript">
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,
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 }
37 }
38 });
39
40
41 // Fancy demos
42 var smile = function(g, series, ctx, cx, cy, color, radius) {
43 mouthlessFace(g, series, ctx, cx, cy, color, radius);
44
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
54 ctx.lineWidth = 1;
55 ctx.fillStyle = "#000000";
56 ctx.beginPath();
57 ctx.arc(cx, cy + radius, radius - 2, Math.PI + .3, -.3, false);
58 ctx.stroke();
59 };
60
61 var mouthlessFace = function(g, series, ctx, cx, cy, color, radius) {
62 ctx.lineWidth = 1;
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();
70
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();
77
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
85 var makeGraph = function(title, yFunc, extraOpts) {
86 var opts = {
87 drawPoints : true,
88 pointSize : 5
89 };
90
91 var shapes = [];
92 var addShape = function(name, pointFn, highlightPointFn) {
93 shapes.push(name);
94 if (!opts['series']) opts['series'] = {};
95 opts.series[name] = {
96 drawPointCallback: pointFn,
97 drawHighlightPointCallback: highlightPointFn
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 };
114
115 var header = document.createElement('h3');
116 header.appendChild(document.createTextNode(title));
117 document.body.appendChild(header);
118
119 var div = document.createElement('div');
120 document.body.appendChild(div);
121
122 var g = new Dygraph(
123 div,
124 function() {
125 var r = "xval," + shapes.join(',') + "\n";
126 var n = shapes.length;
127 for (var i=1; i<=20; i++) {
128 r += i;
129 for (var j = 0; j < n; j++) {
130 r += "," + yFunc(i, j, n);
131 }
132 r += "\n";
133 }
134 return r;
135 }, opts);
136 };
137
138 makeGraph(
139 "Gallery of predefined shapes, adding a custom shape:",
140 function(x, c, n) {
141 return x / 3 + c * 10;
142 }, {
143 highlightCircleSize : 8
144 });
145 makeGraph(
146 "With interactive per-series highlighting:",
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 }});
156 </script>
157 </body>
158 </html>