-
Notifications
You must be signed in to change notification settings - Fork 37
/
ichart.html
106 lines (102 loc) · 4.39 KB
/
ichart.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
93
94
95
96
97
98
99
100
101
102
103
104
105
106
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Raphaël · Interactive Chart</title>
<link rel="stylesheet" href="demo.css" media="screen">
<link rel="stylesheet" href="demo-print.css" media="print">
<script src="raphael.js"></script>
<script>
window.onload = function () {
var W = 640,
H = 480,
r = Raphael("holder", W, H),
values = [],
len = 7;
for (var i = len; i--;) {
values.push(50);
}
function translate(x, y) {
return [
50 + (W - 60) / (values.length - 1) * x,
H - 10 - (H - 20) / 100 * y
];
}
function drawPath() {
var p = [];
for (var j = 1, jj = X.length; j < jj; j++) {
p.push(X[j], Y[j]);
}
p = ["M", X[0], Y[0], "R"].concat(p);
var subaddon = "L" + (W - 10) + "," + (H - 10) + ",50," + (H - 10) + "z";
path.attr({path: p});
sub.attr({path: p + subaddon});
}
var p = [["M"].concat(translate(0, values[0]))],
color = "hsb(240°, 1, 1)",
X = [],
Y = [],
blankets = r.set(),
buttons = r.set(),
w = (W - 60) / values.length,
isDrag = -1,
start = null,
sub = r.path().attr({stroke: "none", fill: [90, color, color].join("-"), opacity: 0}),
path = r.path().attr({stroke: color, "stroke-width": 2}),
unhighlight = function () {};
var ii;
for (i = 0, ii = values.length - 1; i < ii; i++) {
var xy = translate(i, values[i]),
xy1 = translate(i + 1, values[i + 1]),
f;
X[i] = xy[0];
Y[i] = xy[1];
(f = function (i, xy) {
buttons.push(r.circle(xy[0], xy[1], 5).attr({fill: color, stroke: "none"}));
blankets.push(r.circle(xy[0], xy[1], w / 2).attr({stroke: "none", fill: "#fff", opacity: 0}).mouseover(function () {
if (isDrag + 1) {
unhighlight = function () {};
} else {
buttons.items[i].animate({r: 10}, 200);
}
}).mouseout(function () {
if (isDrag + 1) {
unhighlight = function () {
buttons.items[i].animate({r: 5}, 200);
};
} else {
buttons.items[i].animate({r: 5}, 200);
}
}).drag(function (dx, dy) {
var start = this.start;
start && update(start.i, start.p + dy);
}, function (x, y) {
this.start = {i: i, m: y, p: Y[i]};
}));
blankets.items[blankets.items.length - 1].node.style.cursor = "move";
})(i, xy);
if (i == ii - 1) {
f(i + 1, xy1);
}
}
xy = translate(ii, values[ii]);
X.push(xy[0]);
Y.push(xy[1]);
drawPath();
var update = function (i, d) {
(d > H - 10) && (d = H - 10);
(d < 10) && (d = 10);
Y[i] = d;
drawPath();
buttons.items[i].attr({cy: d});
blankets.items[i].attr({cy: d});
r.safari();
};
};
</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>