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
|
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>gRaphaël Line Charts</title>
<link rel="stylesheet" href="css/demo.css" type="text/css" media="screen" charset="utf-8">
<link rel="stylesheet" href="css/demo-print.css" type="text/css" media="print" charset="utf-8">
<script src="../raphael-min.js" type="text/javascript" charset="utf-8"></script>
<script src="../g.raphael.js" type="text/javascript"></script>
<script src="../g.line.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
window.onload = function () {
var r = Raphael("holder"),
txtattr = { font: "12px 'Fontin Sans', Fontin-Sans, sans-serif" };
var x = [], y = [], y2 = [], y3 = [];
for (var i = 0; i < 1e6; i++) {
x[i] = i * 10;
y[i] = (y[i - 1] || 0) + (Math.random() * 7) - 3;
y2[i] = (y2[i - 1] || 150) + (Math.random() * 7) - 3.5;
y3[i] = (y3[i - 1] || 300) + (Math.random() * 7) - 4;
}
r.text(160, 10, "Simple Line Chart (1000 points)").attr(txtattr);
r.text(480, 10, "shade = true (10,000 points)").attr(txtattr);;
r.text(160, 250, "shade = true & nostroke = true (1,000,000 points)").attr(txtattr);
r.text(480, 250, "Symbols, axis and hover effect").attr(txtattr);
r.linechart(10, 10, 300, 220, x, [y.slice(0, 1e3), y2.slice(0, 1e3), y3.slice(0, 1e3)]).hoverColumn(function () {
this.set = r.set(
r.circle(this.x, this.y[0]),
r.circle(this.x, this.y[1]),
r.circle(this.x, this.y[2])
);
}, function () {
this.set.remove();
});
r.linechart(330, 10, 300, 220, x, [y.slice(0, 1e4), y2.slice(0, 1e4), y3.slice(0, 1e4)], { shade: true });
r.linechart(10, 250, 300, 220, x, [y, y2, y3], { nostroke: true, shade: true });
var lines = r.linechart(330, 250, 300, 220, [[1, 2, 3, 4, 5, 6, 7],[3.5, 4.5, 5.5, 6.5, 7, 8]], [[12, 32, 23, 15, 17, 27, 22], [10, 20, 30, 25, 15, 28]], { nostroke: false, axis: "0 0 1 1", symbol: "circle", smooth: true }).hoverColumn(function () {
this.tags = r.set();
for (var i = 0, ii = this.y.length; i < ii; i++) {
this.tags.push(r.tag(this.x, this.y[i], this.values[i], 160, 10).insertBefore(this).attr([{ fill: "#fff" }, { fill: this.symbols[i].attr("fill") }]));
}
}, function () {
this.tags && this.tags.remove();
});
lines.symbols.attr({ r: 6 });
// lines.lines[0].animate({"stroke-width": 6}, 1000);
// lines.symbols[0].attr({stroke: "#fff"});
// lines.symbols[0][1].animate({fill: "#f00"}, 1000);
};
</script>
</head>
<body class="raphael" id="g.raphael.dmitry.baranovskiy.com">
<div id="holder"></div>
<p>
Demo of <a href="http://g.raphaeljs.com/">gRaphaël</a> JavaScript library.
</p>
</body>
</html>
|
