2 * g.Raphael 0.51 - Charting library, based on Raphaƫl
4 * Copyright (c) 2009-2012 Dmitry Baranovskiy (http://g.raphaeljs.com)
5 * Licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) license.
8 if (typeof(Raphael) == 'undefined') {
9 // support for seed/simple browser usage
10 importz = imports['seed/importz.js'].importz;
12 Raphael = importz('Raphael');
18 function clearAr(ar) {
19 var ret = new Array();
20 //Roo.log(JSON.stringify(ar));
21 for (var i = 0; i < ar.length; i++) {
22 //print(typeof(ar[i]));
23 if (Raphael.is(ar[i], "object")) {
24 ret.push(clearAr(ar[i]));
27 ret.push(parseInt(ar[i]));
37 * Creates a vertical bar chart
41 - x (number) x coordinate of the chart
42 - y (number) y coordinate of the chart
43 - width (number) width of the chart (respected by all elements in the set)
44 - height (number) height of the chart (respected by all elements in the set)
45 - values (array) values
46 - opts (object) options for the chart
48 o type (string) type of endings of the bar. Default: 'square'. Other options are: 'round', 'sharp', 'soft'.
49 o gutter (number)(string) default '20%' (WHAT DOES IT DO?)
51 o colors (array) colors be used repeatedly to plot the bars. If multicolumn bar is used each sequence of bars with use a different color.
52 o stacked (boolean) whether or not to tread values as in a stacked bar chart
57 = (object) path element of the popup
59 | r.vbarchart(0, 0, 620, 260, [[76, 70], [67, 71]], {})
63 function MVBarchart(paper, x, y, width, height, values, opts) {
65 values = clearAr(values);
71 barsteps = opts.barsteps || 20,
72 colors = opts.colors || chartinst.colors;
75 opts.axis = opts.axis || "";
76 opts.baroffset = opts.baroffset || 10;
77 opts.asixxheight = opts.asixxheight || 100;
78 opts.asixywidth = opts.asixywidth || 100;
79 opts.axisxlabels = opts.axisxlabels || [];
80 opts.legendheight = opts.legendheight || 80;
81 opts.legends = opts.legends || 100;
84 paper.rect(0, 0, width, height).attr({ stroke: "none", fill: (opts.background || "#F0F4F7") });
85 // background.toBack();
88 var barwidth = Math.floor((width - x - opts.asixywidth - opts.baroffset) / barsteps);
89 var barheight = height - y - opts.asixxheight - opts.legendheight || 100;
90 var path = ["M", x + 1, y + opts.legendheight, "l", 0, barheight]
92 for (var i = 0; i < barsteps; i++) {
93 path = path.concat(["M", x + (i * barwidth), y + opts.legendheight + 1, "l", barwidth, 0, "l", 0, barheight]);
96 paper.path(path).attr({ stroke: "#fff", "stroke-width": 2 });
100 values.forEach(function(value,i) {
101 if (!Raphael.is(values[0], "array")) {
105 value.forEach(function(v,k) {
106 max = (v > max) ? v : max;
111 values.forEach(function(value,i) {
112 if (!Raphael.is(value, "array")) {
116 paper.circle(x + (i * 400) + 8, y + 10, 8).attr({ fill: colors[i%colors.length], "stroke": "#fff" });
118 paper.text(x + (i * 400) + 18, y + 8, opts.legends[i%opts.legends.length]).attr({
120 "font-family": "'Fontin Sans', Fontin-Sans, sans-serif",
121 "font-weight": "bold",
122 "text-anchor": "start",
128 var unit = barheight / max;
130 values.forEach(function(value,i) {
131 if (!Raphael.is(values, "array")) {
135 value.forEach(function(v,k) {
140 paper.rect(x + 1 + (k * barwidth) , y + opts.legendheight + 1 + (max - v) * unit, barwidth - 2, v * unit).attr({ stroke: "none", fill: colors[i%colors.length] });
142 var indicator_y = y + opts.legendheight + (max - v) * unit - 42;
145 indicator_y = y + opts.legendheight - 42;
148 paper.rect(x + 1 + (k * barwidth) + 8 , indicator_y, barwidth - 16, 30, 5).attr({ stroke: "none", fill: colors[i%colors.length] });
149 paper.path(["M", x + 1 + (k * barwidth) + barwidth / 4 + 10, indicator_y + 30, "l", 5, 10, "l", 5, -10]).attr({ stroke: "none", fill: colors[i%colors.length] });
150 paper.text(x + 1 + (k * barwidth) + barwidth / 2, indicator_y + 14, Roo.util.Format.number(v, 0)).attr({
152 "font-family": "'Fontin Sans', Fontin-Sans, sans-serif",
153 "font-weight": "bold",
159 var ax = (opts.axis + "").split(/[,\s]+/),
165 width - opts.asixywidth,
166 height - opts.asixxheight,
167 height - y - opts.asixxheight - opts.legendheight,
169 opts.axisystep || 10,
177 chartinst.bottomAxis(
179 height - opts.asixxheight,
181 opts.axisxlabels.length,
189 chart.push(bars, covers);
191 chart.covers = covers;
196 var F = function() {};
197 F.prototype = Raphael.g;
198 MVBarchart.prototype = new F; //prototype reused by hbarchart
200 Raphael.fn.mbarchart = function(x, y, width, height, values, opts) {
201 return new MVBarchart(this, x, y, width, height, values, opts);
204 MVBarchart.prototype.rightAxis = function (x, y, length, max, steps, asixxheight, paper)
206 // Roo.log('Right Axis');
207 // Roo.log([x, y, length, max, steps, ewidth]);
212 d = Math.ceil(max / steps);
219 for(var i = 0; i <= steps; i++) {
222 paper.text(x + (asixxheight / 2), Y + 15, label).attr({
224 "font-family": "'Fontin Sans', Fontin-Sans, sans-serif",
225 "font-weight": "bold",
226 "text-anchor": "end",
229 path = path.concat(["M", x, Y, "l", (asixxheight / 2), 0]);
237 var res = paper.path(path).attr({ stroke: color, "stroke-width": 2 });
240 res.all = paper.set([res, text]);
241 res.remove = function () {
243 this.constructor.prototype.remove.call(this);
249 MVBarchart.prototype.bottomAxis = function (x, y, length, steps, labels, barwidth, eheight, paper)
251 // Roo.log('Bottom Axis');
252 // Roo.log([x, y, length, steps, labels, barwidth]);
254 var path = ["M", x, y, "l", length, 0],
257 offset = Math.round(barwidth / 2);
259 labels.forEach(function(v,k) {
260 paper.text(x + (k * barwidth) + offset, y + (eheight / 2), v).attr({
262 "font-family": "'Fontin Sans', Fontin-Sans, sans-serif",
263 "font-weight": "bold",
268 var res = paper.path(path).attr({ stroke: color, "stroke-width": 2 });
271 res.all = paper.set([res, text]);
272 res.remove = function () {
274 this.constructor.prototype.remove.call(this);