-
Notifications
You must be signed in to change notification settings - Fork 37
/
chart.html
92 lines (92 loc) · 4 KB
/
chart.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Raphaël · Animated Chart</title>
<link rel="stylesheet" href="demo.css"media="screen">
<link rel="stylesheet" href="demo-print.css"media="print">
<style media="screen">
#holder {
height: 230px;
margin: -115px 0 0 -310px;
width: 620px;
}
</style>
<script src="raphael.js"></script>
<script>
Raphael(function () {
var r = Raphael("holder", 620, 250),
e = [],
clr = [],
months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"],
values = [],
now = 0,
month = r.text(310, 27, months[now]).attr({fill: "#fff", stroke: "none", "font": '100 18px "Helvetica Neue", Helvetica, "Arial Unicode MS", Arial, sans-serif'}),
rightc = r.circle(364, 27, 10).attr({fill: "#fff", stroke: "none"}),
right = r.path("M360,22l10,5 -10,5z").attr({fill: "#000"}),
leftc = r.circle(256, 27, 10).attr({fill: "#fff", stroke: "none"}),
left = r.path("M260,22l-10,5 10,5z").attr({fill: "#000"}),
c = r.path("M0,0").attr({fill: "none", "stroke-width": 4, "stroke-linecap": "round"}),
bg = r.path("M0,0").attr({stroke: "none", opacity: .3}),
dotsy = [];
function randomPath(length, j) {
var path = "",
x = 10,
y = 0;
dotsy[j] = dotsy[j] || [];
for (var i = 0; i < length; i++) {
dotsy[j][i] = Math.round(Math.random() * 200);
// if (i) {
// path += "C" + [x + 10, y, (x += 20) - 10, (y = 240 - dotsy[j][i]), x, y];
// } else {
// path += "M" + [10, (y = 240 - dotsy[j][i])];
// }
if (i) {
x += 20;
y = 240 - dotsy[j][i];
path += "," + [x, y];
} else {
path += "M" + [10, (y = 240 - dotsy[j][i])] + "R";
}
}
return path;
}
for (var i = 0; i < 12; i++) {
values[i] = randomPath(30, i);
clr[i] = Raphael.getColor(1);
}
c.attr({path: values[0], stroke: clr[0]});
bg.attr({path: values[0] + "L590,250 10,250z", fill: clr[0]});
var animation = function () {
var time = 500;
if (now == 12) {
now = 0;
}
if (now == -1) {
now = 11;
}
var anim = Raphael.animation({path: values[now], stroke: clr[now]}, time, "<>");
c.animate(anim);
bg.animateWith(c, anim, {path: values[now] + "L590,250 10,250z", fill: clr[now]}, time, "<>");
month.attr({text: months[now]});
};
var next = function () {
now++;
animation();
},
prev = function () {
now--;
animation();
};
rightc.click(next);
right.click(next);
leftc.click(prev);
left.click(prev);
});
</script>
</head>
<body>
<div id="holder"></div>
<p id="copy">Demo of <a href="http://raphaeljs.com/">Raphaël</a>—JavaScript Vector Library</p>
</body>
</html>