Many bug fixes, highlight seems to not work.
[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();
35 ctx.arc(cx, cy, radius - 2, -.3, Math.PI + .3, false);
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,
78 pointSize : 6,
79 'default' : { drawPointCallback : Dygraph.Circles.DEFAULT },
80 'triangle' : { drawPointCallback : Dygraph.Circles.TRIANGLE },
81 'square' : { drawPointCallback : Dygraph.Circles.SQUARE },
82 'diamond' : { drawPointCallback : Dygraph.Circles.DIAMOND },
83 'pentagon' : { drawPointCallback : Dygraph.Circles.PENTAGON },
84 'hexagon' : { drawPointCallback : Dygraph.Circles.HEXAGON },
85 'circle' : { drawPointCallback : Dygraph.Circles.CIRCLE },
86 'star' : { drawPointCallback : Dygraph.Circles.STAR },
87 'plus' : { drawPointCallback : Dygraph.Circles.PLUS },
88 'ex' : { drawPointCallback : Dygraph.Circles.EX },
89 'custom' : { drawPointCallback : smile, drawHighlightCallback : frown }
90 }
91 );
773d1312
RK
92 </script>
93</body>
240c0b11 94</html>