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/examples/barchart | |
| parent | 9af0f832607e626d22c4205a3ed21ad105fdc042 (diff) | |
graphing with raphael
Diffstat (limited to 'test/g.raphael/examples/barchart')
8 files changed, 193 insertions, 0 deletions
diff --git a/test/g.raphael/examples/barchart/barchart_basic.html b/test/g.raphael/examples/barchart/barchart_basic.html new file mode 100644 index 0000000..8956e9f --- /dev/null +++ b/test/g.raphael/examples/barchart/barchart_basic.html @@ -0,0 +1,20 @@ +<html> + <head> + <title>gRaphaël Bar Chart - a simple barchart example</title> + <script type="text/javascript" src="../raphael-min.js"></script> + <script type="text/javascript" src="../../g.raphael-min.js"></script> + <script type="text/javascript" src="../../g.bar-min.js"></script> + <script type="text/javascript"> + window.onload = function() { + // Creates canvas 640 × 480 at 10, 50 + var r = Raphael(10, 50, 640, 480); + + // Creates a single series barchart at 10, 10 + // width 300, height 220, data: [55, 20, 13, 32, 5, 1, 2, 10] + r.g.barchart(10, 10, 300, 220, [[55, 20, 13, 32, 5, 1, 2, 10]]); + } + </script> + </head> + <body> + </body> +</html>
\ No newline at end of file diff --git a/test/g.raphael/examples/barchart/barchart_custom_axis.html b/test/g.raphael/examples/barchart/barchart_custom_axis.html new file mode 100644 index 0000000..5cf8e74 --- /dev/null +++ b/test/g.raphael/examples/barchart/barchart_custom_axis.html @@ -0,0 +1,23 @@ +<html> + <head> + <title>gRaphaël Bar Chart - a barchart with customised axis</title> + <script type="text/javascript" src="../raphael-min.js"></script> + <script type="text/javascript" src="../../g.raphael-min.js"></script> + <script type="text/javascript" src="../../g.bar-min.js"></script> + <script type="text/javascript"> + window.onload = function() { + // Creates canvas 640 × 480 at 10, 50 + var r = Raphael(10, 50, 640, 480); + + // Creates a single series barchart at 10, 10 + // width 300, height 220, data: [55, 20, 13, 32, 5, 1, 2, 10] + var max_val = 50 + r.g.barchart(40, 10, 300, 220, [[55, 20, 13, 32, 5, 1, 2, 10]]); + axis = r.g.axis(40,230,300,0,400,10,2); + axis.text.attr({font:"9px Arial", fill:"#888", "font-weight": "regular", "color": "#ff0000", "fill": "#ff0000"}); + } + </script> + </head> + <body> + </body> +</html>
\ No newline at end of file diff --git a/test/g.raphael/examples/barchart/barchart_custom_spacing.html b/test/g.raphael/examples/barchart/barchart_custom_spacing.html new file mode 100644 index 0000000..f7a51e7 --- /dev/null +++ b/test/g.raphael/examples/barchart/barchart_custom_spacing.html @@ -0,0 +1,21 @@ +<html> + <head> + <title>gRaphaël Bar Chart - a horizontal barchart with gutters</title> + <script type="text/javascript" src="../raphael-min.js"></script> + <script type="text/javascript" src="../../g.raphael-min.js"></script> + <script type="text/javascript" src="../../g.bar-min.js"></script> + <script type="text/javascript"> + window.onload = function() { + // Creates canvas 640 × 480 at 10, 50 + var r = Raphael(10, 50, 640, 480); + + // Creates a single series horizontal barchart at 10, 10 + // width 300, height 220, data: [10,20,30,40] + r.g.hbarchart(10, 10, 300, 220, [[10,20,30,40]], {"gutter":"40%"}); + // My bar sizes will be 36px high and gutter(space between) 14px. (for more on how this is calculated, refer to bar.markdown) + } + </script> + </head> + <body> + </body> +</html>
\ No newline at end of file diff --git a/test/g.raphael/examples/barchart/barchart_horizontal.html b/test/g.raphael/examples/barchart/barchart_horizontal.html new file mode 100644 index 0000000..87f422f --- /dev/null +++ b/test/g.raphael/examples/barchart/barchart_horizontal.html @@ -0,0 +1,20 @@ +<html> + <head> + <title>gRaphaël Bar Chart - a simple barchart example</title> + <script type="text/javascript" src="../raphael-min.js"></script> + <script type="text/javascript" src="../../g.raphael-min.js"></script> + <script type="text/javascript" src="../../g.bar-min.js"></script> + <script type="text/javascript"> + window.onload = function() { + // Creates canvas 640 × 480 at 10, 50 + var r = Raphael(10, 50, 640, 480); + + // Creates a single series horizontal barchart at 10, 10 + // width 300, height 220, data: [55, 20, 13, 32, 5, 1, 2, 10] + r.g.hbarchart(10, 10, 300, 220, [[55, 20, 13, 32, 5, 1, 2, 10]]); + } + </script> + </head> + <body> + </body> +</html>
\ No newline at end of file diff --git a/test/g.raphael/examples/barchart/barchart_hover.html b/test/g.raphael/examples/barchart/barchart_hover.html new file mode 100644 index 0000000..4366857 --- /dev/null +++ b/test/g.raphael/examples/barchart/barchart_hover.html @@ -0,0 +1,27 @@ +<html> + <head> + <title>gRaphaël Bar Chart - a .hover() example</title> + <script type="text/javascript" src="../raphael-min.js"></script> + <script type="text/javascript" src="../../g.raphael-min.js"></script> + <script type="text/javascript" src="../../g.bar-min.js"></script> + <script type="text/javascript"> + window.onload = function() { + // Creates canvas 640 × 480 at 10, 50 + var r = Raphael(10, 50, 640, 480); + + // Creates a single series barchart at 10, 10 + // width 300, height 220, data: [55, 20, 13, 32, 5, 1, 2, 10] + var barchart = r.g.barchart(10, 10, 300, 220, [[55, 20, 13, 32, 5, 1, 2, 10]]).attr({fill: "#666"}); + + // Add a hover event to the barchart + barchart.hover(function() { + this.bar.attr({fill: "#333"}); + }, function() { + this.bar.attr({fill: "#666"}); + }); + } + </script> + </head> + <body> + </body> +</html>
\ No newline at end of file diff --git a/test/g.raphael/examples/barchart/barchart_hoverCol.html b/test/g.raphael/examples/barchart/barchart_hoverCol.html new file mode 100644 index 0000000..0c61574 --- /dev/null +++ b/test/g.raphael/examples/barchart/barchart_hoverCol.html @@ -0,0 +1,29 @@ +<html> + <head> + <title>gRaphaël Bar Chart - a .hoverColumn() example</title> + <script type="text/javascript" src="../raphael-min.js"></script> + <script type="text/javascript" src="../../g.raphael-min.js"></script> + <script type="text/javascript" src="../../g.bar-min.js"></script> + <script type="text/javascript"> + window.onload = function() { + // Creates canvas 640 × 480 at 10, 50 + var r = Raphael(10, 50, 640, 480); + + // Creates a stacked series barchart at 10, 10 + // width 300, height 220, data: [55, 20, 13],[16,11,5] + r.g.barchart(10, 10, 300, 220, [[55, 20, 13],[16,11,5]], {stacked:true}).hoverColumn(function() { + var y = [], res = []; + for (var i = this.bars.length; i--;) { + y.push(this.bars[i].y); + res.push(this.bars[i].value || "0"); + } + this.flag = r.g.popup(this.bars[0].x, Math.min.apply(Math, y), res.join(", ")).insertBefore(this); + }, function() { + this.flag.animate({opacity: 0}, 3000, ">", function () {this.remove();}); + }); + } + </script> + </head> + <body> + </body> +</html> diff --git a/test/g.raphael/examples/barchart/barchart_stacked.html b/test/g.raphael/examples/barchart/barchart_stacked.html new file mode 100644 index 0000000..6bfd9de --- /dev/null +++ b/test/g.raphael/examples/barchart/barchart_stacked.html @@ -0,0 +1,28 @@ +<html> + <head> + <title>gRaphaël Bar Chart - a stacked vs unstacked barchart example</title> + <script type="text/javascript" src="../raphael-min.js"></script> + <script type="text/javascript" src="../../g.raphael-min.js"></script> + <script type="text/javascript" src="../../g.bar-min.js"></script> + <script type="text/javascript"> + window.onload = function() { + // Creates canvas 480 x 640 at 10, 50 + var r = Raphael(10, 50, 480, 640); + + var data1 = [10, 55, 33]; + var data2 = [16, 44, 123]; + var data3 = [4, 66, 58]; + + // Creates a stacked barchart at 10, 10 + // width 300, height 220, data sets: data1, data2, data3 + r.g.barchart(10, 10, 300, 220, [data1, data2, data3], {stacked:true}); + + // Creates a barchart at 10, 320 + // width 300, height 220, data sets: data1, data2, data3 + r.g.barchart(10, 320, 300, 220, [data1, data2, data3]); + } + </script> + </head> + <body> + </body> +</html>
\ No newline at end of file diff --git a/test/g.raphael/examples/barchart/barchart_text_axis.html b/test/g.raphael/examples/barchart/barchart_text_axis.html new file mode 100644 index 0000000..e3036f7 --- /dev/null +++ b/test/g.raphael/examples/barchart/barchart_text_axis.html @@ -0,0 +1,25 @@ +<html> + <head> + <title>gRaphaël Bar Chart - a barchart with text x-axis</title> + <script type="text/javascript" src="../raphael-min.js"></script> + <script type="text/javascript" src="../../g.raphael-min.js"></script> + <script type="text/javascript" src="../../g.bar-min.js"></script> + <script type="text/javascript"> + window.onload = function() { + // Creates canvas 640 × 480 at 10, 50 + var r = Raphael(10, 50, 640, 480); + + // Creates a single series barchart at 10, 10 + // width 300, height 220, data: [10,20,30,40] + var max_val = 50 + r.g.barchart(40, 10, 320, 220, [[10,20,30,40]]); + axis = r.g.axis(85,230,310,null,null,4,2,["Today", "Yesterday", "Tomorrow", "Future"], "|", 0); + axis.text.attr({font:"12px Arial", "font-weight": "regular", "fill": "#333333"}); + // show y-axis by setting orientation to 1 + axis2 = r.g.axis(40,230,300,0,400,10,1); + } + </script> + </head> + <body> + </body> +</html>
\ No newline at end of file |