--- /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 vertical chart
+ * support left 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
+ * leftaxisstep (number) : number of steps in left axis
+ * leftaxisfontsize (number) : font size of labels in left 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
+ * legend (array) : 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
+ * legendfontcolor (string) : font color of the legend colors
+ * lineheight (number) : distance between two legend labels
+ */
+
+ function MVBarchart(paper, width, height, values, opts) {
+ opts = opts || {};
+
+ var chartinst = this,
+ chart = paper.set(),
+ len = values.length,
+ max = opts.max ? opts.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 || 16,
+ labelFontWeight = opts.labelfontweight || 'bold',
+ labelFontColors = opts.labelfontcolors || [],
+ gutter = parseFloat(opts.gutter || "20%"),
+ axis = opts.axis || "0 0 0 0",
+ ax = (axis + "").split(/[,\s]+/),
+ leftAxisWidth = 0,
+ leftAxisStep = opts.leftaxisstep || 10;
+ leftAxisFontSize = opts.leftaxisfontsize || 12,
+ axisFont = opts.axisfont || 'Work Sans',
+ axisFontWeight = opts.axisfontweight || 'normal',
+ axisFontColor = opts.axisfontcolor || '#323232';
+ topPadding = 20;
+ bottomPadding = 120; // for legends
+
+ // left axis
+ if(+ax[3]) {
+ leftAxisWidth = opts.leftaxiswidth || 50;
+ max = Math.ceil(max / leftAxisStep) * leftAxisStep;
+ }
+
+ var step = max / leftAxisStep;
+ var factor = 1;
+
+ if(step > 10) {
+ if(step % 10 != 0) {
+ factor = 10;
+ }
+ }
+
+ max = Math.ceil(step / factor) * factor * leftAxisStep;
+
+ if(labelFontColors.length < len) {
+ for(var i = labelFontColors.length; i < len; i++) {
+ labelFontColors.push('#323232');
+ }
+ }
+
+ // background
+ paper.rect(0, 0, width, height).attr({ stroke: "none", fill: background });
+
+ var barWidth = (width - leftAxisWidth) / (len * (100 + gutter) + gutter) * 100;
+ var barHeight = (height - topPadding - bottomPadding); // maximum height of bar
+ var barGutter = barWidth * (gutter / 100);
+
+ // bars
+ var unit = barHeight / max;
+
+ // left axis
+ if(+ax[3]) {
+ chartinst.leftAxis(
+ paper,
+ leftAxisWidth,
+ height - bottomPadding,
+ width,
+ barHeight,
+ max,
+ leftAxisStep,
+ leftAxisWidth,
+ axisFont,
+ leftAxisFontSize,
+ axisFontWeight,
+ axisFontColor
+ )
+ }
+
+
+ values.forEach(function(v,k) {
+ if(v == 0) {
+ return;
+ }
+
+ paper.rect(leftAxisWidth + barGutter + (k * (barWidth + barGutter)), topPadding + barHeight - v * unit, barWidth, v * unit).attr({stroke: "none", fill: colors[k]});
+
+ // bar label
+ // 4 pixels away from top of the bar
+ // align bar label in the center
+ paper.text(leftAxisWidth + barGutter + (k * (barWidth + barGutter)) + barWidth / 2, topPadding + barHeight - v * unit - 4 - labelFontSize / 2, Roo.util.Format.number(v, 0)).attr({
+ "font-size": labelFontSize,
+ "font-family": labelFont,
+ "font-weight": labelFontWeight,
+ "text-anchor": 'middle',
+ fill : labelFontColors[k]
+ });
+
+ });
+
+ chartinst.legend(paper, opts, values, len, height, bottomPadding);
+
+ return chart;
+
+ }
+
+ //inheritance
+ var F = function() {};
+ F.prototype = Raphael.g;
+ MVBarchart.prototype = new F;
+
+ Raphael.fn.mvbarchart = function(width, height, values, opts) {
+ return new MVBarchart(this, width, height, values, opts);
+ };
+
+
+ MVBarchart.prototype.leftAxis = function (paper, x, y, width, length, max, steps, axisWidth, axisFont, axisFontSize, axisFontWeight, axisFontColor)
+ {
+ var path = ["M", x, y, "l", 0, length],
+ d = Math.ceil(max / steps),
+ dl = length / steps;
+
+
+ for(var i = 0; i <= steps; i++) {
+ // 0 pixels away from the left of the graph
+ paper.text(0, y - i * dl, Roo.util.Format.number(Math.round(i * d), 0)).attr({
+ "font-size": axisFontSize,
+ "font-family": axisFont,
+ "font-weight": axisFontWeight,
+ "text-anchor": 'start',
+ fill : axisFontColor
+ });
+
+ // left axis interval
+ paper.path(["M", x, y - i * dl, "l", width - x, 0]).attr({ stroke: '#9E9E9E', "stroke-width": 1 });
+ }
+
+ paper.path(path).attr({ stroke: '#000', "stroke-width": 0 }); // default no axis
+ }
+
+ // draw legend
+ MVBarchart.prototype.legend = function (paper, opts, values, len, height, bottomPadding)
+ {
+ var chartinst = this,
+ legendKeyShape = opts.legendkeyshape || 'rect',
+ legendKeySize = opts.legendkeysize || 14,
+ legendFont = opts.legendfont || "Work Sans",
+ legendFontSize = opts.legendfontsize || 14,
+ legendFontColor = opts.legendfontcolor || '#323232',
+ lineHeight = opts.lineheight || 23;
+
+
+ for (var i = 0; i < len; i++) {
+ // 0 pixels away from left of the graph
+ // 30 pixels away from bottom of the chart
+ if(legendKeyShape == 'rect') {
+ // pass top left position for 'rect'
+ paper.rect(
+ 0,
+ height - bottomPadding + 30 + i * lineHeight - 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(
+ legendKeySize / 2,
+ height - bottomPadding + 30 + i * lineHeight,
+ legendKeySize / 2
+ ).attr({ fill: opts.colors && opts.colors[i] || chartinst.colors[i] || "#3E66BC", "stroke": "#fff" });
+ }
+
+ var text = (opts.legend) ? opts.legend[i] : values[i].toString();
+
+ if(text.indexOf('#qty#') !== -1) {
+ text = text.replace('#qty#', Roo.util.Format.number(Math.round(values[i]), 0));
+ }
+
+ // 12 pixels away from th right of the legend key
+ paper.text(legendKeySize + 12, height - bottomPadding + 30 + i * lineHeight - legendKeySize / 10, text).attr({
+ "font-size": legendFontSize,
+ "font-family": legendFont,
+ "text-anchor": "start",
+ fill : legendFontColor
+ });
+ }
+ }
+ })();
\ No newline at end of file
projects / g.raphael / commitdiff