diff options
| author | Tim Redfern <tim@eclectronics.org> | 2012-01-23 22:22:02 +0000 |
|---|---|---|
| committer | Tim Redfern <tim@eclectronics.org> | 2012-01-23 22:22:02 +0000 |
| commit | 7523fb951aabc24bf290028c348cbe46bd846f86 (patch) | |
| tree | fc28172683d16b59ecfa1070fa7a8188952803a7 /test/g.raphael/test2.html | |
| parent | 9af0f832607e626d22c4205a3ed21ad105fdc042 (diff) | |
graphing with raphael
Diffstat (limited to 'test/g.raphael/test2.html')
| -rw-r--r-- | test/g.raphael/test2.html | 55 |
1 files changed, 55 insertions, 0 deletions
diff --git a/test/g.raphael/test2.html b/test/g.raphael/test2.html new file mode 100644 index 0000000..f5ded7b --- /dev/null +++ b/test/g.raphael/test2.html @@ -0,0 +1,55 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" +"http://www.w3.org/TR/html4/strict.dtd"> +<html lang="en"> + <head> + <title>gRaphaël Static Line Charts</title> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> + <meta name="author" content="Dmitry Baranovskiy"> + <meta name="description" content="Charting JavaScript Library"> + <link rel="stylesheet" href="demo.css" type="text/css" media="screen" charset="utf-8"> + <link rel="stylesheet" href="demo-print.css" type="text/css" media="print" charset="utf-8"> + <script src="../raphael.js" type="text/javascript" charset="utf-8"></script> + <script src="g.raphael.js" type="text/javascript" charset="utf-8"></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"); + r.g.txtattr.font = "12px 'Fontin Sans', Fontin-Sans, sans-serif"; + + var x = [], y = [], y2 = [], y3 = []; + for (var i = 0; i < 500; 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"); + r.g.text(480, 10, "shade = true"); + r.g.text(160, 250, "shade = true & nostroke = true"); + r.g.text(480, 250, "Symbols, axis and hover effect"); + + r.g.linechart(10, 10, 300, 220, x, [y, y2, y3]); + r.g.linechart(330, 10, 300, 220, x, [y, y2, y3], {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"}).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.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> |