+++ /dev/null
-/*!
- * g.Raphael 0.5 - Charting library, based on Raphaël
- *
- * Copyright (c) 2009 Dmitry Baranovskiy (http://g.raphaeljs.com)
- * Licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) license.
- */
-imports = typeof(imports) == 'undefined' ? false : imports;
-Raphael = typeof(Raphael) != 'undefined' ? Raphael : (imports ? imports.seed.Raphael.Raphael : {});
-Roo = typeof(Roo) != 'undefined' ? Roo: (imports ? imports.seed.Roo.Roo: {});
-
-(function () {
-
- /**
- * Create a horizontal chart
- * support left axis with labels and bottom axis with interval
- *
- * @param {Raphael} paper to draw on
- * @param {int} width - width of the chart
- * @param {int} height - height of the chart
- * @param {Array} values
- * @param {Object} opts options
- * background (string) : background color
- * colors (array) : colors of the bars
- * labelfont (string) : font family of bar labels
- * labelfontsize (number) : font size of bar labels
- * labelfontweight (string) (number) : font weight of bar labels
- * labelfontcolors (array) : font colors of bar labels
- * gutter (string) (number) : height of gutters in terms of percentage of bar height (e.g. '20%' : height raito of a bar to a gutter is 10 to 2)
- * axis (string) : composed of 4 '0' / '1' separated by space (indicated whether top / right / bottom / left axis should be shown)
- * (e.g. '0 0 1 1' indicates that the bottom and the left axis should be shown)
- * leftaxiswidth (number) : width of left axis area
- * leftaxislabels (array) : labels in left axis area
- * leftaxisfontsize (number) : font size of labels in left axis
- * bottomaxisheight (number) : height of bottom axis area
- * bottomaxisstep (number) : number of steps in bottom axis
- * bottomaxisfontsize (number) : font size of labels in bottom axis
- * axisfont (string) : font family of labels in axes
- * axisfontweight (string) (number) : font weight of labels in axes
- * axisfontcolor (string) : font color of labels in axes
- */
-
- function MHBarchart(paper, width, height, values, opts) {
- opts = opts || {};
-
- var chartinst = this,
- chart = paper.set(),
- len = values.length,
- max = values.length == 0 ? 0 : Math.max(...values),
- background = opts.background || '#FFFFFF',
- colors = opts.colors || chartinst.colors,
- labelFont = opts.labelfont || 'Work Sans',
- labelFontSize = opts.labelfontsize || 12,
- labelFontWeight = opts.labelfontweight || 'bold',
- labelFontColors = opts.labelfontcolors || [],
- gutter = parseFloat(opts.gutter || "40%"),
- axis = opts.axis || "0 0 0 0",
- ax = (axis + "").split(/[,\s]+/),
- leftAxisWidth = 0,
- leftAxisLabels = opts.leftaxislabels || [];
- leftAxisFontSize = opts.leftaxisfontsize || 16,
- bottomAxisHeight = 0,
- bottomAxisStep = opts.bottomaxisstep || 10;
- bottomAxisFontSize = opts.bottomaxisfontsize || 16,
- axisFont = opts.axisfont || 'Work Sans',
- axisFontWeight = opts.axisfontweight || 'normal',
- axisFontColor = opts.axisfontcolor || '#323232';
-
- // bottom axis
- if(+ax[2]) {
- bottomAxisHeight = opts.bottomaxisheight || 30;
- max = Math.ceil(max / bottomAxisStep) * bottomAxisStep;
- }
- // left axis
- if(+ax[3]) {
- leftAxisWidth = opts.leftaxiswidth || 240;
- }
-
- if(labelFontColors.length < len) {
- for(var i = labelFontColors.length; i < len; i++) {
- labelFontColors.push('#FFFFFF');
- }
- }
-
- // background
- paper.rect(0, 0, width, height).attr({ stroke: "none", fill: background });
-
- var barWidth = (width - leftAxisWidth); // maximum width of bar
- var barHeight = (height - bottomAxisHeight) / (len * (100 + gutter) + gutter) * 100;
- var barGutter = barHeight * (gutter / 100);
-
- // bottom axis
- if(+ax[2]) {
- chartinst.bottomAxis(
- paper,
- leftAxisWidth,
- height - bottomAxisHeight,
- width - leftAxisWidth,
- max,
- bottomAxisStep,
- bottomAxisHeight,
- axisFont,
- bottomAxisFontSize,
- axisFontWeight,
- axisFontColor
- )
- }
-
- // left axis
- if(+ax[3]) {
- chartinst.leftAxis(
- paper,
- leftAxisWidth,
- 0,
- height - bottomAxisHeight,
- leftAxisLabels,
- barHeight,
- barGutter,
- axisFont,
- leftAxisFontSize,
- axisFontWeight,
- axisFontColor
- )
- }
-
- // bars
- var unit = barWidth / max;
-
- values.forEach(function(v,k) {
- if(v == 0) {
- return;
- }
-
- paper.rect(leftAxisWidth, barGutter + (k * (barHeight + barGutter)), v * unit, barHeight).attr({ stroke: "none", fill: colors[k] });
-
- // bar label
- // 16 pixels away from right of left axis
- // align bar label in the center
- paper.text(leftAxisWidth + 16, barGutter + (k * (barHeight + barGutter)) + barHeight / 2, Roo.util.Format.number(v, 0)).attr({
- "font-size": labelFontSize,
- "font-family": labelFont,
- "font-weight": labelFontWeight,
- "text-anchor": 'start',
- fill : labelFontColors[k]
- });
-
- });
-
- return chart;
-
- }
-
- //inheritance
- var F = function() {};
- F.prototype = Raphael.g;
- MHBarchart.prototype = new F;
-
- Raphael.fn.mhbarchart = function(width, height, values, opts) {
- return new MHBarchart(this, width, height, values, opts);
- };
-
- MHBarchart.prototype.bottomAxis = function (paper, x, y, length, max, steps, axisHeight, axisFont, axisFontSize, axisFontWeight, axisFontColor)
- {
- var path = ["M", x, y, "l", length, 0],
- text = paper.set(),
- d = Math.ceil(max / steps),
- dl = length / steps;
-
- for(var i = 0; i < steps; i++) {
- paper.text(x + i * dl, y + axisHeight / 2, i * d).attr({
- "font-size": axisFontSize,
- "font-family": axisFont,
- "font-weight": axisFontWeight,
- "text-anchor": 'middle',
- fill : axisFontColor
- });
-
- // bottom axis interval
- paper.path(["M", x + i * dl , y, "l", 0, -1 * y]).attr({ stroke: '#9E9E9E', "stroke-width": 1 });
- }
-
- var res = paper.path(path).attr({ stroke: '#000', "stroke-width": 0 }); // default no axis
-
- res.text = text;
- res.all = paper.set([res, text]);
- res.remove = function () {
- this.text.remove();
- this.constructor.prototype.remove.call(this);
- };
-
- return res;
- }
-
- MHBarchart.prototype.leftAxis = function (paper, x, y, length, labels, barHeight, barGutter, axisFont, axisFontSize, axisFontWeight, axisFontColor)
- {
- var path = ["M", x, y, "l", 0, length],
- text = paper.set();
-
- labels.forEach(function(v,k) {
- paper.text(0, barGutter + (k * (barHeight + barGutter)) + barHeight / 2, v).attr({
- "font-size": axisFontSize,
- "font-family": axisFont,
- "font-weight": axisFontWeight,
- "text-anchor": 'start',
- fill : axisFontColor
- });
- });
-
- var res = paper.path(path).attr({ stroke: '#000', "stroke-width": 0 }); // default no axis
-
- res.text = text;
- res.all = paper.set([res, text]);
- res.remove = function () {
- this.text.remove();
- this.constructor.prototype.remove.call(this);
- };
-
- return res;
- }
-})();
\ No newline at end of file
/*\
+ * Paper.vbarchart
+ [ method ]
**
* Creates a vertical bar chart
**
- values (array) values
- opts (object) options for the chart
o {
- 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 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)
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,
- 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');
- }
+ colors = opts.colors || chartinst.colors;
opts.axis = opts.axis || "";
opts.baroffset = opts.baroffset || 10;
- axisXHeight = opts.asixxheight || 100;
- axisYWidth = opts.asixywidth || 100;
+ opts.asixxheight = opts.asixxheight || 100;
+ opts.asixywidth = 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 && 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 = [];
+ // 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]
for (var i = 0; i < barsteps; i++) {
- 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 });
- }
+ path = path.concat(["M", x + (i * barwidth), y + opts.legendheight + 1, "l", barwidth, 0, "l", 0, barheight]);
}
- 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" });
- }
- // 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,
+ 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",
"text-anchor": "start",
- fill : legendFontColor
+ fill : "#0C014D"
});
});
//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 || k >= barsteps) {
+ if(v == 0) {
return;
}
- 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;
+ 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;
if(i == 0) {
- iy = y + opts.legendheight + 1 - ih - 20;
+ indicator_y = y + opts.legendheight - 42;
}
- 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]
+ 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"
});
});
});
// right axis
+ax[1] && axis.push(
chartinst.rightAxis(
- width - axisYWidth,
- height - axisXHeight,
- height - y - axisXHeight - opts.legendheight,
+ width - opts.asixywidth,
+ height - opts.asixxheight,
+ height - y - opts.asixxheight - opts.legendheight,
max,
opts.axisystep || 10,
- axisYWidth,
- paper,
- axisLineColor,
- axisFont,
- axisFontSize,
- axisFontWeight,
- axisFontColor
+ opts.asixywidth,
+ barsteps,
+ paper
)
);
+ax[2] && axis.push(
chartinst.bottomAxis(
x ,
- height - axisXHeight,
- width - x - axisYWidth / 2,
+ height - opts.asixxheight,
+ width,
+ opts.axisxlabels.length,
opts.axisxlabels,
- barsteps,
- barWidth,
- barGutter,
- axisXHeight,
- paper,
- axisLineColor,
- axisFont,
- axisFontSize,
- axisFontWeight,
- axisFontColor
+ barwidth,
+ opts.asixxheight,
+ paper
)
);
return new MVBarchart(this, x, y, width, height, values, opts);
};
- MVBarchart.prototype.rightAxis = function (x, y, length, max, steps, axisYWidth, paper, axisLineColor, axisFont, axisFontSize, axisFontWeight, axisFontColor)
+ MVBarchart.prototype.rightAxis = function (x, y, length, max, steps, asixywidth, barsteps, paper)
{
// Roo.log('Right Axis');
-// Roo.log([x, y, length, max, steps, axisYWidth]);
+// Roo.log([x, y, length, max, steps, asixywidth]);
var path = [],
+ color = "#bababa",
text = paper.set(),
d = Math.ceil(max / steps);
for(var i = 0; i <= steps; i++) {
if(i != 0) {
- // 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,
+ 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",
"text-anchor": "end",
- fill : axisFontColor
+ fill : color
});
- path = path.concat(["M", x , Y, "l", axisYWidth / 2, 0]);
+ path = path.concat(["M", x, Y, "l", (asixywidth / 2), 0]);
}
Y -= dx;
}
- var res = paper.path(path).attr({ stroke: axisLineColor, "stroke-width": 2 });
+ var res = paper.path(path).attr({ stroke: color, "stroke-width": 2 });
res.text = text;
res.all = paper.set([res, text]);
return res;
}
- MVBarchart.prototype.bottomAxis = function (x, y, length, labels, barsteps, barWidth, barGutter, height, paper, axisLineColor, axisFont, axisFontSize, axisFontWeight, axisFontColor)
+ MVBarchart.prototype.bottomAxis = function (x, y, length, steps, labels, barwidth, eheight, paper)
{
// 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) {
- 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
+ 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
});
});
- var res = paper.path(path).attr({ stroke: axisLineColor, "stroke-width": 2 });
+ var res = paper.path(path).attr({ stroke: color, "stroke-width": 2 });
res.text = text;
res.all = paper.set([res, text]);
* @param {int} r - radius
* @param {Array} values
* @param {Object} opts options
- * top (number) : top padding
- * bottom (number) : bottom padding
- * left (number) : left padding
- * right (number) : right padding
- * background (string) : background color
- * borderstlye (string) : border style of empty bars
- * bordercolor (string): border color of empty bars
- * barwidth (number) : width of the bars
- * color (string) : color of the bars
- * indicatorwidth (number): width of indicator
- * indicatorheight (number): height of indicator
- * indicatorcolor (string): color of indicator
- * labelfont (string) : font family of labels
- * labelsize (number) : font size of labels
- * labelweight (string)(number) : font weight of labels
- * labelcolor (string) : font color of the labels
- * 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
+ * cut : after this meany items - do not show a pie element?
+ *
+ *
*
*/
opts = opts || {};
var chartinst = this,
- chart = paper.set(),
- top = opts.top || 50,
- bottom = opts.bottom || 50,
- left = opts.left || 20,
- right = opts.right || 20,
- borderColor = opts.bordercolor || '#CCCCCC',
- borderStyle = opts.borderstyle || '--',
- barWidth = opts.barwidth || 100,
- Color = opts.color || '#0A2BC4',
- indicatorWidth = opts.indicatorwidth || barWidth / 2,
- indicatorHeight = opts.indicatorheight || 30,
- indicatorColor = opts.indicatorcolor || '#0C014D',
- labelFont = opts.labelfont || "'Fontin Sans', Fontin-Sans, sans-serif",
- labelSize = opts.labelsize || 16,
- labelWeight = opts.labelweight || 'bold',
- labelColor = opts.labelcolor || '#FFFFFF',
- legendFont = opts.legendfont || "'Fontin Sans', Fontin-Sans, sans-serif",
- legendFontSize = opts.legendfontsize || 22,
- legendFontWeight = opts.legendfontweight || 'bold',
- legendFontColor = opts.legendfontcolor || '#0C024B';
+ chart = paper.set();
+
+ opts.top = opts.top || 50;
+ opts.bottom = opts.bottom || 50;
+ opts.left = opts.left || 20;
+ opts.right = opts.right || 20;
+ opts.barwidth = opts.barwidth || 100
+ opts.color = opts.color || '#0A2BC4';
paper.rect(0, 0, width, height).attr({ stroke: "none", fill: (opts.background || "#F0F4F7") });
- var cw = width - left - right,
- ch = height - top - bottom;
+ var cw = width - opts.left - opts.right,
+ ch = height - opts.top - opts.bottom;
- paper.rect(left, top, barWidth, ch).attr({ stroke: borderColor, "stroke-dasharray": borderStyle });
- paper.rect(left + cw / 2, top, barWidth, ch).attr({ stroke: borderColor, "stroke-dasharray": borderStyle });
+ paper.rect(opts.left, opts.top, opts.barwidth, ch).attr({ stroke: "#CCCCCC", "stroke-dasharray": "--" });
+ paper.rect(opts.left + cw / 2, opts.top, opts.barwidth, ch).attr({ stroke: "#CCCCCC", "stroke-dasharray": "--" });
values.forEach(function(v,k) {
v = Math.min(100, v);
var bh = v * ch / 100,
- bx = (k == 0) ? left : left + cw / 2,
- by = top + ch - bh;
+ bx = (k == 0) ? opts.left : opts.left + cw / 2,
+ by = opts.top + ch - bh;
- paper.rect(bx, by, barWidth, bh).attr({ stroke: "none", fill: Color });
-
- paper.rect(bx + (barWidth - indicatorWidth) / 2 , by - 20 - indicatorHeight, indicatorWidth, indicatorHeight, 5).attr({ stroke: "none", fill: indicatorColor });
- paper.path(["M", bx + (barWidth - indicatorWidth) / 2 + (indicatorWidth - 10) / 2, by - 20, "l", 5, 10, "l", 5, -10]).attr({ stroke: "none", fill: indicatorColor });
+ paper.rect(bx, by, opts.barwidth, bh).attr({ stroke: "none", fill: opts.color });
+
+ paper.rect(bx + opts.barwidth / 4 , by - 42, opts.barwidth / 2, 30, 5).attr({ stroke: "none", fill: "#0C014D" });
+ paper.path(["M", bx + opts.barwidth / 4 + 10, by - 12, "l", 5, 10, "l", 5, -10]).attr({ stroke: "none", fill: "#0C014D" });
- paper.text(bx + barWidth / 2, by - 20 - indicatorHeight / 2, v + '%').attr({
- "font-size": labelSize,
- "font-family": labelFont,
- "font-weight": labelWeight,
- "text-anchor": "middle",
- fill : labelColor
+ paper.text(bx + opts.barwidth / 4 + 25, by - 28, v + '%').attr({
+ "font-size": "16",
+ "font-family": "'Fontin Sans', Fontin-Sans, sans-serif",
+ "font-weight": "bold",
+ fill : "#fff"
});
- paper.text(bx + barWidth + 25, top + 50, opts.legend[k]).attr({
- "font-size": legendFontSize,
- "font-family": legendFont,
- "font-weight": legendFontWeight,
+ paper.text(bx + opts.barwidth + 25, opts.top + 50, opts.legend[k]).attr({
+ "font-size": "22",
+ "font-family": "'Fontin Sans', Fontin-Sans, sans-serif",
+ "font-weight": "bold",
"text-anchor": "start",
- fill : legendFontColor
+ fill : "#0C024B"
});
});
* @param {int} r - radius
* @param {Array} values
* @param {Object} opts options
- * background (string) : background color
- * colors (array) : colors of the pies
- * borderwidth (number) : width of circle border
- * labelfont (string) : font family of labels
- * labelsize (number) : font size of labels
- * labelweight (string) (number) : font weight of labels
- * labelcolor (string) : font color of the labels
- * linewidth (number) : width of the lines connecting the legend and the circles
- * lineheight (number) : height of the lines connecting the legend and the circles
- * legend (array) : legend
- * legendfont (string) : font family of the legend labels
- * legendfontsize (number) : font size of the legend labels
- * legendfontcolor (string) : font color of the legend colors
+ * cut : after this meany items - do not show a pie element?
+ *
+ *
*
*/
var chartinst = this,
chart = paper.set(),
len = values.length;
- borderWidth = typeof(opts.borderwidth) != 'undefined' ? opts.borderwidth : 2, // width can be 0 (no border)
- labelFont = opts.labelfont || "'Fontin Sans', Fontin-Sans, sans-serif",
- labelSize = opts.labelsize || 18,
- labelWeight = opts.labelweight || 'bold',
- labelColor = opts.labelcolor || '#FFFFFF',
- lineWidth = opts.linewidth || 200,
- lineHeight = opts.lineheight || 2,
- lineColor = opts.linecolor || '#FFFFFF',
- legendFont = opts.legendfont || "'Fontin Sans', Fontin-Sans, sans-serif",
- legendFontSize = opts.legendfontsize || 18,
- legendFontColor = opts.legendfontcolor || '#0C024B';
+
+ opts.linewidth = opts.linewidth || 200;
paper.rect(0, 0, width, height).attr({ stroke: "none", fill: (opts.background || "#F0F4F7") });
return b.value - a.value;
});
- // dx, dy: position of the center of the circle
- // dr: radius of the circle
var dx = cx,
dy = cy,
dr = r;
for (i = 0; i < len; i++) {
- paper.circle(dx, dy, dr).attr({ fill: opts.colors && opts.colors[i] || chartinst.colors[i] || "#3E66BC", stroke: "#fff", "stroke-width": borderWidth });
+ paper.circle(dx, dy, dr).attr({ fill: opts.colors && opts.colors[i] || chartinst.colors[i] || "#3E66BC", stroke: "#fff", "stroke-width": 2 });
- // nx, ny: position of the label
var nx = dx,
ny = dy - dr + 20;
}
paper.text(nx, ny, Roo.util.Format.number(values[i], 0)).attr({
- "font-size": labelSize,
- "font-family": labelFont,
- "font-weight": labelWeight,
- "text-anchor": "middle",
- fill : labelColor
+ "font-size": "18",
+ "font-family": "'Fontin Sans', Fontin-Sans, sans-serif",
+ "font-weight": "bold",
+ fill : "#fff"
});
- paper.path(["M", dx, dy - dr, "l", lineWidth, 0]).attr({ stroke: lineColor, "stroke-width": lineHeight });
-
- paper.text(dx + lineWidth + 10, dy - dr, opts.legend[values[i].origin]).attr({
- "font-size": legendFontSize,
- "font-family": legendFont,
+ paper.path(["M", dx, dy - dr, "l", opts.linewidth, 0]).attr({ stroke: "#fff", "stroke-width": 2 });
+ paper.text(dx + opts.linewidth + 10, dy - dr, opts.legend[values[i].origin]).attr({
+ "font-size": "18",
+ "font-family": "'Fontin Sans', Fontin-Sans, sans-serif",
"text-anchor": "start",
- fill : legendFontColor
+ fill : "#0C024B"
});
dy = dy + dr / 4 *3;
* @param {int} r - radius
* @param {Array} values
* @param {Object} opts options
- * background (string) : background color
- * start_angle (number) : the angle of the starting position of the first pie
- * barwidth (number) : width of a pie
- * colors (array) : colors of the pies
- * cut (number) : after showing this number of elements using this number of pies, merge and show the rest of the elements using one pie (maximum 'cut' + 1 pies in total)
- * others (string) : legend label labelling the pie for the merged elements (*required if there are merged elements)
- * no_sort (boolean) : sort the values in descending order if it is not set
- * labels (array) : labels on the pie
- * labelfont (string) : font family of the labels
- * labelsize (number) : font size of the labels
- * labelweight (string)(number) : font weight of the labels
- * labelcolor (string) : font color of the labels
- * legend (array) : legend
- * legendpos (string) : position of the legend ('right' / 'bottom')
- * 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
- * legendfontcolor (string) : font color of the legend colors
- * lineheight (number) : distance between two legend labels
+ * cut : after this meany items - do not show a pie element?
+ *
+ *
+ *
*/
function Piesectorchart(paper, width, height, cx, cy, r, values, opts) {
var chartinst = this,
chart = paper.set(),
len = values.length,
+ angle = opts.start_angle || 90,
total = 0,
- angle = opts.start_angle || 90,
+ others = 0,
cut = opts.cut || 9,
- defcut = true,
- labels = opts.labels || false; // default no labels
- labelFont = opts.labelfont || "'Fontin Sans', Fontin-Sans, sans-serif",
- labelSize = opts.labelsize || 18,
- labelWeight = opts.labelweight || 'normal',
- labelColor = opts.labelcolor || '#FFFFFF';
+ defcut = true
+ lineheight = opts.lineheight || 30;
opts.barwidth = opts.barwidth || 80;
return {path: path, stroke: color};
};
-
- for (var i = 0; i < len; i++) {
- total += values[i] * 1;
- values[i] = {
- value: values[i],
- origin: i,
- valueOf: function () { return this.value; }
- };
- }
if (len == 1) {
+ total = values[0];
paper.circle(cx, cy, r + opts.barwidth / 2).attr({ fill: opts.colors && opts.colors[0] || chartinst.colors[0] || "#3E66BC", "stroke": "#fff" });
paper.circle(cx, cy, r - opts.barwidth / 2).attr({ fill: opts.background || "#F0F4F7", "stroke": "#fff" });
} else {
+ for (var i = 0; i < len; i++) {
+ total += values[i] * 1;
+ values[i] = {
+ value: values[i],
+ valueOf: function () { return this.value; }
+ };
+ }
+
if (!opts.no_sort) {
values.sort(function (a, b) {
return b.value - a.value;
}
for (i = 0; i < len; i++) {
- // minimum degree of a pie shown
if (defcut && values[i] * 360 / total <= 1.5) {
cut = i;
defcut = false;
}
len = Math.min(cut + 1, values.length);
-
- var a = angle;
for (i = 0; i < len; i++) {
- paper.path().attr({
+
+ var p = paper.path().attr({
"stroke": "#fff",
"stroke-width": opts.barwidth
- }).attr({sector: [cx, cy, a, a -= 360 * values[i] / total, opts.colors && opts.colors[i] || chartinst.colors[i], r]});
- }
+ }).attr({sector: [cx, cy, angle, angle -= 360 * values[i] / total, opts.colors && opts.colors[i] || chartinst.colors[i], r]});
- }
-
- // labels
- var rad = Math.PI / 180;
-
- var a = angle;
-
- for (i = 0; i < len; i++) {
-
- a -= 360 * values[i] / total;
-
- // show the label only if the values >= 5% of total
- if(labels && values[i] / total >= 0.05) {
- var text = labels[i];
-
- if(text.indexOf('#qty#') !== -1) {
- text = text.replace('#qty#', Math.round(values[i]));
- }
-
- if(text.indexOf('#%#') !== -1) {
- text = text.replace('#%#', Math.round(values[i] / total * 100) + '%');
- }
-
- var tx = cx + r * Math.cos(-(a + 180 * values[i] / total) * rad),
- ty = cy + r * Math.sin(-(a + 180 * values[i] / total) * rad);
-
- paper.text(tx, ty, text).attr({
- "font-size": labelSize,
- "font-family": labelFont,
- "font-weight" : labelWeight,
- "text-anchor": "middle",
- fill : labelColor
- });
}
+
}
-
- legend(paper, cx, cy, r, values, opts, total, len);
-
- chart.cx = cx;
- chart.cy = cy;
- chart.r = r;
- return chart;
- }
-
- // draw legend
- function legend(paper, cx, cy, r, values, opts, total, len)
- {
- var legendPos = opts.legendpos || 'right',
- legendKeyShape = opts.legendkeyshape || 'circle',
- legendKeySize = opts.legendkeysize || 12,
- legendFont = opts.legendfont || "'Fontin Sans', Fontin-Sans, sans-serif",
- legendFontSize = opts.legendfontsize || 18,
- legendFontColor = opts.legendfontcolor || '#0C014F',
- lineHeight = opts.lineheight || 30;
-
- // default 'legendPos' is 'right'
- // ix, iy: center position of legend key
- var ix = cx + r + opts.barwidth / 2 + 30, // 30 pixels away from right of the chart
+ var ix = cx + r + opts.barwidth / 2 + 30,
iy = cy - r - 30;
-
- if(legendPos == 'bottom') {
- ix = cx - r - opts.barwidth / 2 - 30; // 30 pixels away from left of the chart
- iy = cy + r + opts.barwidth / 2 + 30; // 30 pixels away from bottom of the chart
- }
-
-
+
for (var i = 0; i < len; i++) {
- if(legendKeyShape == 'rect') {
- // pass top left position for 'rect'
- paper.rect(ix - (legendKeySize / 2), iy - (legendKeySize / 2), legendKeySize, legendKeySize, 0).attr({ fill: opts.colors && opts.colors[i] || chartinst.colors[i] || "#3E66BC", "stroke": "#fff" });
- }
- else {
- // pass center position for 'circle'
- paper.circle(ix, iy, legendKeySize / 2).attr({ fill: opts.colors && opts.colors[i] || chartinst.colors[i] || "#3E66BC", "stroke": "#fff" });
- }
-
- var text = (values[i].others) ? opts.others : opts.legend[values[i].origin] || values[i];
+ paper.circle(ix, iy, 6).attr({ fill: opts.colors && opts.colors[i] || chartinst.colors[i] || "#3E66BC", "stroke": "#fff" });
+
+ var text = (values[i].others) ? opts.others : opts.legend[i] || values[i];
if(text.indexOf('#qty#') !== -1) {
text = text.replace('#qty#', Math.round(values[i]));
}
-
+
if(text.indexOf('#%#') !== -1) {
text = text.replace('#%#', Math.round(values[i] / total * 100) + '%');
}
- // 12 pixels away from the right of legend key
- // align legend key and text horizontally
- paper.text(ix + legendKeySize / 2 + 12, iy - legendFontSize / 10, text).attr({
- "font-size": legendFontSize,
- "font-family": legendFont,
+ paper.text(ix + 20, iy, text).attr({
+ "font-size": "18",
+ "font-family": "'Fontin Sans', Fontin-Sans, sans-serif",
"text-anchor": "start",
- fill : legendFontColor
+ fill : "#0C014F"
});
- iy += lineHeight;
+ iy += lineheight;
+
}
- }
+ chart.cx = cx;
+ chart.cy = cy;
+ chart.r = r;
+ return chart;
+ };
+
//inheritance
var F = function() {};
F.prototype = Raphael.g;
font: {
family: typeof node.attrs['font-family'] === 'undefined' ? null : node.attrs['font-family'],
size: typeof node.attrs['font-size'] === 'undefined' ? null : (node.attrs['font-size']),
- weight: typeof node.attrs['font-weight'] === 'undefined' ? null : (node.attrs['font-weight']),
- anchor: typeof node.attrs['text-anchor'] === 'undefined' ? null : node.attrs['text-anchor']
+ anchor: typeof node.attrs['text-anchor'] === 'undefined' ? null : node.attrs['text-anchor'],
}
};
}
//Roo.log(JSON.stringify(style));
var r = [
'font-family:' + style.font.family,
+ 'font-weight:normal',
'font-style:normal',
'font-stretch:normal',
'font-variant:normal'
if (style.font.size !== null) {
r.push('font-size: ' + style.font.size + 'px')
}
- if (style.font.weight !== null) {
- r.push('font-weight: ' + style.font.weight);
- }
- else {
- r.push('font-weight: normal');
- }
return r.join(';')
<html lang="en">
<head>
<title>gRaphaël Dynamic Bar Chart</title>
+ <script src="../seed/Roo.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="css/demo.css" type="text/css" media="screen" charset="utf-8">
<link rel="stylesheet" href="css/demo-print.css" type="text/css" media="print" charset="utf-8">
- <script src="/roojs1/roojs-all.js" type="text/javascript" charset="utf-8"></script>
- <script src="../raphael-min.js" type="text/javascript" charset="utf-8"></script>
- <script src="../g.raphael.js" type="text/javascript"></script>
- <script src="../g.bar.horizontal.js" type="text/javascript" charset="utf-8"></script>
- <script src="../g.bar.overlay.js" type="text/javascript" charset="utf-8"></script>
- <script src="../g.pie.sector.js" type="text/javascript" charset="utf-8"></script>
+ <script src="../seed/importz.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
+ importz.path = '../seed/';
</script>
<script type="text/javascript" charset="utf-8">
-;
+
+ importz("../g.bar.0.51",'__null__');
+ importz('Raphael');
window.onload = function () {
- var r = new Raphael("holder",1300,600);
-
- // r.mhbarchart(1300, 600, [31,10,5,4,4,4,4,4,4,4], {
- // colors : ["#FF36C5","#FF36C5","#FF36C5","#FF36C5","#FF36C5","#FF36C5","#FF36C5","#FF36C5","#FF36C5","#FF36C5"],
- // axis : '0 0 1 1',
- // leftaxislabels : ["South China Morning Post\n(Hong Kong S.A.R.)","The Standard\n(Hong Kong S.A.R.)","Dainik Tribune\n(India)","Bloomberg\n(Hong Kong S.A.R.)","HK01\n(Hong Kong S.A.R.)","Hong Kong Economic Journal\n(Hong Kong S.A.R.)","Hong Kong Economic Times\n(Hong Kong S.A.R.)","Nikkei Asian Review\n(Hong Kong S.A.R.)","Macau Daily Times\n(Macao S.A.R.)","Chinese Media Group\n(Singapore)"]
- // });
-
- // r.mbarchart(50, 10, 1300, 700, [[0,269,0,0,0,0,0,0,0,0,0,0,0,0],[0,21,0,0,0,0,0,0,0,0,0,0,0,0]], {
- // gutter: 10,
- // barsteps: 14,
- // barfill: '#F2F6FF',
- // baroffset: 60,
- // background: '#FFFFFF',
- // colors : ["#D1DEFF","#1E47DA"],
- // axis : '0 1 1 0',
- // axisxlabels : ["Jul\n01","Jul\n08","Jul\n15","Jul\n22","Jul\n29","Aug\n05","Aug\n12","Aug\n19","Aug\n26","Sep\n02","Sep\n09","Sep\n16","Sep\n23","Sep\n30"],
- // axisystep : 5,
- // asixywidth: 100,
- // asixxheight: 80,
- // axislinecolor: '#ACACAC',
- // axisfont: 'Work Sans',
- // axisfontsize: 18,
- // axisfontweight: 600,
- // axisfontcolor: '#606060',
- // labelfont: 'Work Sans',
- // labelsize: 18,
- // labelweight: 600,
- // labelcolors: ["#323232","#FFFFFF"],
- // legends: ["Guaranteed online news postings: 269","Media write-up by journalists (Earned): 21"],
- // legendheight: 120,
- // legendkeyshape: 'rect',
- // legendkeysize: 18,
- // legendfont: 'Work Sans',
- // legendfontsize: 22,
- // legendfontweight: 600,
- // legendfontcolor: '#606060'
- // });
-
- // console.log(r);
-
- // r.piesectorchart(400, 450, 200, 150, 105, [3], {
- // background: '#FFFFFF',
- // barwidth : 70,
- // colors: ["#83DBFF","#F9C80A","#1E47DA","#B21ADF","#FF11BA","#FF8C30"],
- // cut: 5,
- // others: 'Others - #qty# (#%#)' ,
- // labels: ["#%#"],
- // labelfont: 'Work Sans',
- // labelsize: 20,
- // labelweight: 600,
- // legend: ["English - #qty# (#%#)"],
- // legendpos: 'bottom',
- // legendkeyshape: 'rect',
- // legendkeysize: 14,
- // legendfont: 'Work Sans',
- // legendfontsize: 14,
- // legendfontcolor: '#323232',
- // lineheight : 23
- // });
-
- r.piesectorchart(400, 450, 200, 150, 105, [33,52,198,4], {
- background: '#FFFFFF',
- barwidth : 70,
- colors: ["#83DBFF","#F9C80A","#1E47DA","#B21ADF","#FF11BA","#FF8C30"],
- cut: 5,
- others: 'Others - #qty# (#%#)',
- labels: ["#%#","#%#","#%#","#%#"],
- labelfont: 'Work Sans',
- labelsize: 20,
- labelweight: 600,
- legend: ["International - #qty# (#%#)","Hong Kong S.A.R. - #qty# (#%#)","Regional - #qty# (#%#)","Macao S.A.R. - #qty# (#%#)"],
- legendpos: 'bottom',
- legendkeyshape: 'rect',
- legendkeysize: 14,
- legendfont: 'Work Sans',
- legendfontsize: 14,
- legendfontcolor: '#323232',
- lineheight : 23
- });
+ var r = new Raphael("holder")
+
+ r.text(340, 290, 'Date').attr( { 'font-size': 12, 'font-family': "'Fontin Sans', Fontin-Sans, sans-serif" });
+
+ r.barchart(30, 30, 560, 250, ["1"], {
+ labels : ["1"],
+ axis : '0 0 1 1',
+ axisxlabels : ["20\/Jun"],
+ axisystep : 10,
+ ymin : 0
+ });
+ console.log(r.toSVG());
};
</script>
</head>
<body class="raphael" id="g.raphael.dmitry.baranovskiy.com">
- <div id="holder" style='width:1300px !important; height:600px!important'></div>
+ <div id="holder"></div>
<p>
Demo of <a href="http://g.raphaeljs.com/">gRaphaël</a> JavaScript library.
</p>
projects / g.raphael / commitdiff