raphael-inceleme/line_chart.html at master · asimturgut61/raphael-inceleme · GitHub

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

<html lang="en">
<head>
        <title>çizerlerr :)</title>
		 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta name="author" content="Asim Turgut">
        <meta name="description" content="grafik çizimleri">
<script type="text/javascript" src="js/raphael.js"> charset="utf-8"</script>
<script type="text/javascript" src="js/g.raphael.js"> charset="utf-8"</script>
<script type="text/javascript" src="js/g.pie.js"> charset="utf-8"</script>
<script type="text/javascript" src="js/g.bar.js"> charset="utf-8"</script>
<script type="text/javascript" src="js/g.line.js"> charset="utf-8"</script>
<script type="text/javascript" src="js/g.dot.js"> charset="utf-8"</script>
        <script type="text/javascript" charset="utf-8">
window.onload = function () {
var r = Raphael(0,0,1000,1000);
r.g.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.g.text(160, 10, "Simple Line Chart (1000 points)");
r.g.text(480, 10, "shade = true (10,000 points)");
r.g.text(160, 250, "shade = true & nostroke = true (1,000,000 points)");
r.g.text(480, 250, "Symbols, axis and hover effect");
r.g.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.g.disc(this.x, this.y[0]),
r.g.disc(this.x, this.y[1]),
r.g.disc(this.x, this.y[2])
);
}, function () {
this.set.remove();
});
r.g.linechart(330, 10, 300, 220, x, [y.slice(0, 1e4), y2.slice(0, 1e4), y3.slice(0, 1e4)], {shade: true});
r.g.linechart(10, 250, 300, 220, x, [y, y2, y3], {nostroke: true, shade: true});
var lines = r.g.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: "o", smooth: true}).hoverColumn(function () {
this.tags = r.set();
for (var i = 0, ii = this.y.length; i < ii; i++) {
this.tags.push(r.g.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: 3});
// 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 >


    </body>
</html>