/*\
- * Paper.vbarchart
- [ method ]
**
* Creates a vertical bar chart
**
- values (array) values
- opts (object) options for the chart
o {
- o type (string) type of endings of the bar. Default: 'square'. Other options are: 'round', 'sharp', 'soft'.
- o gutter (number)(string) default '20%' (WHAT DOES IT DO?)
- o vgutter (number)
- 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.
- o stacked (boolean) whether or not to tread values as in a stacked bar chart
- o to
- o stretch (boolean)
+ background (string) : background color
+ gutter (string) (number) : indicate width of gutters with repsect to the bars in terms of percentage (e.g. '20%' means that the width ratio of gutter to bar is 10:2)
+ barsteps (number) : number of bars shown
+ barfill (string) : color to fill the empty bar (not filling if not provided)
+ baroffset (number) : distance between the rightmost bar and y axis;
+ colors (array) : colors of the bars
+ axis (string) : composed of 4 '0' / '1' separated by space (indicated whether top / right / bottom / left axis should be shown)
+ (e.g. '0 1 1 0' indicates that the right and the bottom axis should be shown)
+ asixxheight (number) : height of x axis area
+ axisxlabels (string) : labels in x axis
+ asixywidth (number) : width of y axis area
+ axisystep (number) : number of steps in y axis
+ axislinecolor (string) : color of lines in y axis
+ axisfont (string) : font family of labels in axes
+ axisfontsize (number) : font size of labels in axes
+ axisfontweight (string) (number) : font weight of labels in axes
+ axisfontcolor (string) : font color of labels in axes
+ labelfont (string) : font family of labels
+ labelsize (number) : font size of labels
+ labelweight (string)(number) : font weight of labels
+ labelcolors (array) : font colors of the labels
+ legends (array) : legend
+ legendheight : height of the legend
+ legendkeyshape (string) : shape of the legend keys ('circle' / 'rect')
+ legendkeysize (number) : size of the legend keys (diameter for 'circle' and width for 'rect')
+ legendfont (string) : font family of the legend labels
+ legendfontsize (number) : font size of the legend labels
+ legendfontweight (string)(number) : font weight of the legend labels
+ legendfontcolor (string) : font color of the legend colors
o }
**
- = (object) path element of the popup
- > Usage
- | r.vbarchart(0, 0, 620, 260, [[76, 70], [67, 71]], {})
\*/
chart = paper.set(),
bars = paper.set(),
covers = paper.set(),
+ len = values.length,
+ gutter = parseFloat(opts.gutter || "0%"),
barsteps = opts.barsteps || 20,
- colors = opts.colors || chartinst.colors;
+ barFill = opts.barfill || false, // default no fill
+ colors = opts.colors || chartinst.colors,
+ axisLineColor = opts.axislinecolor || '#BABABA',
+ axisFont = opts.axisfont || "'Fontin Sans', Fontin-Sans, sans-serif",
+ axisFontSize = opts.axisfontsize || ((barsteps > 10) ? 12 : 14),
+ axisFontWeight = opts.axisfontweight || 'bold',
+ axisFontColor = opts.axisfontcolor || '#BABABA',
+ labelFont = opts.labelfont || "'Fontin Sans', Fontin-Sans, sans-serif",
+ labelSize = opts.labelsize || ((barsteps > 10) ? 10 : 12),
+ labelWeight = opts.labelweight || 'bold',
+ labelColors = opts.labelcolors || [],
+ legendKeyShape = opts.legendkeyshape || 'circle',
+ legendKeySize = opts.legendkeysize || 16,
+ legendFont = opts.legendfont || "'Fontin Sans', Fontin-Sans, sans-serif",
+ legendFontSize = opts.legendfontsize || 14,
+ legendFontWeight = opts.legendfontweight || 'bold',
+ legendFontColor = opts.legendfontcolor || '#0C014D';
+
+ for(var i = 0; i < len; i++) {
+ labelColors.push('#FFFFFF');
+ }
opts.axis = opts.axis || "";
opts.baroffset = opts.baroffset || 10;
- opts.asixxheight = opts.asixxheight || 100;
- opts.asixywidth = opts.asixywidth || 100;
+ axisXHeight = opts.asixxheight || 100;
+ axisYWidth = opts.asixywidth || 100;
opts.axisxlabels = opts.axisxlabels || [];
opts.legendheight = opts.legendheight || 80;
opts.legends = opts.legends || 100;
paper.rect(0, 0, width, height).attr({ stroke: "none", fill: (opts.background || "#F0F4F7") });
// background.toBack();
- // bar border
- var barwidth = Math.floor((width - x - opts.asixywidth - opts.baroffset) / barsteps);
- var barheight = height - y - opts.asixxheight - opts.legendheight || 100;
- var path = ["M", x + 1, y + opts.legendheight, "l", 0, barheight]
+ // bar border && bar gutter
+ // total 'barsteps' of bars and 'barsteps - 1' of gutters
+ var barWidth = (width - x - axisYWidth - opts.baroffset) / (barsteps * (100 + gutter) - gutter) * 100;
+ var barGutter = barWidth * gutter / 100;
+ var barHeight = height - y - axisXHeight - opts.legendheight || 100;
+ var path = [];
for (var i = 0; i < barsteps; i++) {
- path = path.concat(["M", x + (i * barwidth), y + opts.legendheight + 1, "l", barwidth, 0, "l", 0, barheight]);
+ path = path.concat(["M", x + (i * (barWidth + barGutter)), height - axisXHeight, "l", 0, -1 * barHeight, "l", barWidth, 0, "l", 0, barHeight]);
+
+ if(barFill) {
+ paper.rect(x + (i * (barWidth + barGutter)) + 1 , y + opts.legendheight + 1, barWidth - 2, barHeight - 2).attr({ stroke: "none", fill: barFill });
+ }
}
- paper.path(path).attr({ stroke: "#fff", "stroke-width": 2 });
+ paper.path(path).attr({ stroke: "#FFF", "stroke-width": 2});
var max = 0;
}
value.forEach(function(v,k) {
+ if(k >= barsteps) {
+ return;
+ }
max = (v > max) ? v : max;
});
});
+ // legends
values.forEach(function(value,i) {
if (!Raphael.is(value, "array")) {
value = [value];
}
+
+ // 10 pixels away from top of the chart
+ // 10 pixels away from left of the chart
+ if(legendKeyShape == 'rect') {
+ // pass top left position for 'rect'
+ paper.rect(x + (i * (width - x) / len) + 10, y + 10, legendKeySize, legendKeySize, 0).attr({ fill: colors[i%colors.length], "stroke": "#fff" });
+ }
+ else {
+ // pass center position for 'circle'
+ paper.circle(x + (i * (width - x) / len) + 10 + (legendKeySize / 2), y + 10 + (legendKeySize / 2), legendKeySize / 2).attr({ fill: colors[i%colors.length], "stroke": "#fff" });
+ }
- paper.circle(x + (i * 400) + 8, y + 10, 8).attr({ fill: colors[i%colors.length], "stroke": "#fff" });
-
- paper.text(x + (i * 400) + 18, y + 8, opts.legends[i%opts.legends.length]).attr({
- "font-size": "14",
- "font-family": "'Fontin Sans', Fontin-Sans, sans-serif",
- "font-weight": "bold",
+ // 10 pixels away from right of the legend key
+ // align legend key and text horizontally
+ paper.text(x + (i * (width - x) / len) + 10 + legendKeySize + 10, y + 10 + (legendKeySize / 2) - legendFontSize / 10, opts.legends[i%opts.legends.length]).attr({
+ "font-size": legendFontSize,
+ "font-family": legendFont,
+ "font-weight": legendFontWeight,
"text-anchor": "start",
- fill : "#0C014D"
+ fill : legendFontColor
});
});
//bars
- var unit = barheight / max;
+ var unit = barHeight / max;
values.forEach(function(value,i) {
if (!Raphael.is(values, "array")) {
}
value.forEach(function(v,k) {
- if(v == 0) {
+ if(v == 0 || k >= barsteps) {
return;
}
- 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] });
-
- var indicator_y = y + opts.legendheight + (max - v) * unit - 42;
+ paper.rect(x + (k * (barWidth + barGutter)) + 1 , y + opts.legendheight + 1 + (max - v) * unit, barWidth - 2, v * unit - 2).attr({ stroke: "none", fill: colors[i%colors.length] });
+
+ // width and height of indicator
+ var iw = barWidth * 0.8;
+ var ih = Math.min(30, iw * 0.5);
+
+ // position of indicator
+ var ix = x + (k * (barWidth + barGutter)) + 1 + (barWidth - iw) / 2;
+ var iy = y + opts.legendheight + 1 + (max - v) * unit - ih - 20;
if(i == 0) {
- indicator_y = y + opts.legendheight - 42;
+ iy = y + opts.legendheight + 1 - ih - 20;
}
- var fontSize = barsteps > 10 ? 10 : 12;
-
- paper.rect(x + 1 + (k * barwidth) + 5 , indicator_y, barwidth - 10, 30, 5).attr({ stroke: "none", fill: colors[i%colors.length] });
- 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] });
- paper.text(x + 1 + (k * barwidth) + barwidth / 2, indicator_y + 14, Roo.util.Format.number(v, 0)).attr({
- "font-size": fontSize,
- "font-family": "'Fontin Sans', Fontin-Sans, sans-serif",
- "font-weight": "bold",
- fill : "#fff"
+ paper.rect(ix , iy, iw, ih, 4).attr({ stroke: "none", fill: colors[i%colors.length] });
+ paper.path(["M", ix + (iw - 10) / 2, iy + ih, "l", 5, 10, "l", 5, -10]).attr({ stroke: "none", fill: colors[i%colors.length] });
+ // align labels center
+ paper.text(ix + iw / 2, iy + ih / 2 - labelSize / 10, Roo.util.Format.number(v, 0)).attr({
+ "font-size": labelSize,
+ "font-family": labelFont,
+ "font-weight": labelWeight,
+ fill : labelColors[i]
});
});
});
// right axis
+ax[1] && axis.push(
chartinst.rightAxis(
- width - opts.asixywidth,
- height - opts.asixxheight,
- height - y - opts.asixxheight - opts.legendheight,
+ width - axisYWidth,
+ height - axisXHeight,
+ height - y - axisXHeight - opts.legendheight,
max,
opts.axisystep || 10,
- opts.asixywidth,
- barsteps,
- paper
+ axisYWidth,
+ paper,
+ axisLineColor,
+ axisFont,
+ axisFontSize,
+ axisFontWeight,
+ axisFontColor
)
);
+ax[2] && axis.push(
chartinst.bottomAxis(
x ,
- height - opts.asixxheight,
- width,
- opts.axisxlabels.length,
+ height - axisXHeight,
+ width - x - axisYWidth / 2,
opts.axisxlabels,
- barwidth,
- opts.asixxheight,
- paper
+ barsteps,
+ barWidth,
+ barGutter,
+ axisXHeight,
+ paper,
+ axisLineColor,
+ axisFont,
+ axisFontSize,
+ axisFontWeight,
+ axisFontColor
)
);
return new MVBarchart(this, x, y, width, height, values, opts);
};
- MVBarchart.prototype.rightAxis = function (x, y, length, max, steps, asixywidth, barsteps, paper)
+ MVBarchart.prototype.rightAxis = function (x, y, length, max, steps, axisYWidth, paper, axisLineColor, axisFont, axisFontSize, axisFontWeight, axisFontColor)
{
// Roo.log('Right Axis');
-// Roo.log([x, y, length, max, steps, asixywidth]);
+// Roo.log([x, y, length, max, steps, axisYWidth]);
var path = [],
- color = "#bababa",
text = paper.set(),
d = Math.ceil(max / steps);
for(var i = 0; i <= steps; i++) {
if(i != 0) {
- paper.text(x + (asixywidth / 2), Y + 15, label).attr({
- "font-size": (barsteps > 10) ? "12" : "14",
- "font-family": "'Fontin Sans', Fontin-Sans, sans-serif",
- "font-weight": "bold",
+ // 6 pixels away from bottom of the line
+ paper.text(x + (axisYWidth / 2), Y + axisFontSize / 2 + 6, label).attr({
+ "font-size": axisFontSize,
+ "font-family": axisFont,
+ "font-weight": axisFontWeight,
"text-anchor": "end",
- fill : color
+ fill : axisFontColor
});
- path = path.concat(["M", x, Y, "l", (asixywidth / 2), 0]);
+ path = path.concat(["M", x , Y, "l", axisYWidth / 2, 0]);
}
Y -= dx;
}
- var res = paper.path(path).attr({ stroke: color, "stroke-width": 2 });
+ var res = paper.path(path).attr({ stroke: axisLineColor, "stroke-width": 2 });
res.text = text;
res.all = paper.set([res, text]);
return res;
}
- MVBarchart.prototype.bottomAxis = function (x, y, length, steps, labels, barwidth, eheight, paper)
+ MVBarchart.prototype.bottomAxis = function (x, y, length, labels, barsteps, barWidth, barGutter, height, paper, axisLineColor, axisFont, axisFontSize, axisFontWeight, axisFontColor)
{
// Roo.log('Bottom Axis');
-// Roo.log([x, y, length, steps, labels, barwidth]);
+// Roo.log([x, y, length, steps, labels, barWidth]);
var path = ["M", x, y, "l", length, 0],
- color = "#bababa",
text = paper.set(),
- offset = Math.round(barwidth / 2);
+ offset = Math.round(barWidth / 2);
labels.forEach(function(v,k) {
- paper.text(x + (k * barwidth) + offset, y + (eheight / 2), v).attr({
- "font-size": (steps > 10) ? "12" : "14",
- "font-family": "'Fontin Sans', Fontin-Sans, sans-serif",
- "font-weight": "bold",
- fill : color
+ if(k >= barsteps) {
+ return;
+ }
+ paper.text(x + (k * (barWidth + barGutter)) + offset, y + (height / 2), v).attr({
+ "font-size": axisFontSize,
+ "font-family": axisFont,
+ "font-weight": axisFontWeight,
+ fill : axisFontColor
});
});
- var res = paper.path(path).attr({ stroke: color, "stroke-width": 2 });
+ var res = paper.path(path).attr({ stroke: axisLineColor, "stroke-width": 2 });
res.text = text;
res.all = paper.set([res, text]);
projects / g.raphael / blobdiff