Changes due to code review.
[dygraphs.git] / tests / custom-circles.html
CommitLineData
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 <div id="demodiv"></div>
19
20 <script type="text/javascript">
240c0b11
RK
21 var smile = function(g, series, ctx, cx, cy, color, radius) {
22 mouthlessFace(g, series, ctx, cx, cy, color, radius);
773d1312 23
240c0b11
RK
24 ctx.fillStyle = "#000000";
25 ctx.beginPath();
26 ctx.arc(cx, cy, radius - 2, .3, Math.PI - .3, false);
27 ctx.stroke();
28 };
29
30 var frown = function(g, series, ctx, cx, cy, color, radius) {
31 mouthlessFace(g, series, ctx, cx, cy, color, radius);
32
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
RK
39 var mouthlessFace = function(g, series, ctx, cx, cy, color, radius) {
40 ctx.strokeStyle = "#000000";
41 ctx.fillStyle = "#FFFF00";
42 ctx.beginPath();
43 ctx.arc(cx, cy, radius, Math.PI * 2, false);
44 ctx.closePath();
45 ctx.stroke();
46 ctx.fill();
773d1312 47
240c0b11
RK
48 ctx.fillStyle = "#000000";
49 ctx.beginPath();
50 ctx.arc(cx - (radius / 3) , cy - (radius / 4), 1, Math.PI * 2, false);
51 ctx.closePath();
52 ctx.stroke();
53 ctx.fill();
773d1312 54
240c0b11
RK
55 ctx.beginPath();
56 ctx.arc(cx + (radius / 3) , cy - (radius / 4), 1, Math.PI * 2, false);
57 ctx.closePath();
58 ctx.stroke();
59 ctx.fill();
60 };
61
62 g = new Dygraph(
63 document.getElementById("demodiv"),
64 function() {
773d1312 65
240c0b11
RK
66 var r = "xval,default,triangle,square,diamond,pentagon,hexagon,circle,star,plus,ex,custom\n";
67 for (var i=1; i<=20; i++) {
68 r += i;
69 for (var j = 0; j < 11; j++) {
70 r += "," + j + (i / 3);
71 }
72 r += "\n";
73 }
74 return r;
75 },
76 {
77 drawPoints : true,
4ab51f75
RK
78 pointSize : 5,
79 highlightCircleSize : 8,
80 'default' : {
81 drawPointCallback : Dygraph.Circles.DEFAULT,
5879307d 82 drawHighlightPointCallback : Dygraph.Circles.DEFAULT
4ab51f75
RK
83 },
84 'triangle' : {
85 drawPointCallback : Dygraph.Circles.TRIANGLE,
5879307d 86 drawHighlightPointCallback : Dygraph.Circles.TRIANGLE
4ab51f75
RK
87 },
88 'square' : {
89 drawPointCallback : Dygraph.Circles.SQUARE,
5879307d 90 drawHighlightPointCallback : Dygraph.Circles.SQUARE
4ab51f75
RK
91 },
92 'diamond' : {
93 drawPointCallback : Dygraph.Circles.DIAMOND,
5879307d 94 drawHighlightPointCallback : Dygraph.Circles.DIAMOND
4ab51f75
RK
95 },
96 'pentagon' : {
97 drawPointCallback : Dygraph.Circles.PENTAGON,
5879307d 98 drawHighlightPointCallback : Dygraph.Circles.PENTAGON
4ab51f75
RK
99 },
100 'hexagon' : {
101 drawPointCallback : Dygraph.Circles.HEXAGON,
5879307d 102 drawHighlightPointCallback : Dygraph.Circles.HEXAGON
4ab51f75
RK
103 },
104 'circle' : {
105 drawPointCallback : Dygraph.Circles.CIRCLE,
5879307d 106 drawHighlightPointCallback : Dygraph.Circles.CIRCLE
4ab51f75
RK
107 },
108 'star' : {
109 drawPointCallback : Dygraph.Circles.STAR,
5879307d 110 drawHighlightPointCallback : Dygraph.Circles.STAR
4ab51f75
RK
111 },
112 'plus' : {
113 drawPointCallback : Dygraph.Circles.PLUS,
5879307d 114 drawHighlightPointCallback : Dygraph.Circles.PLUS
4ab51f75
RK
115 },
116 'ex' : {
117 drawPointCallback : Dygraph.Circles.EX,
5879307d 118 drawHighlightPointCallback : Dygraph.Circles.EX
4ab51f75
RK
119 },
120 'custom' : {
121 drawPointCallback : frown,
5879307d 122 drawHighlightPointCallback : smile
4ab51f75 123 },
240c0b11
RK
124 }
125 );
773d1312
RK
126 </script>
127</body>
240c0b11 128</html>