2 * g.Raphael 0.5 - Charting library, based on Raphaƫl
4 * Copyright (c) 2009 Dmitry Baranovskiy (http://g.raphaeljs.com)
5 * Licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) license.
11 function finger(x, y, width, height, dir, ending, isPath, paper) {
13 ends = { round: 'round', sharp: 'sharp', soft: 'soft', square: 'square' };
15 // dir 0 for horizontal and 1 for vertical
16 if ((dir && !height) || (!dir && !width)) {
17 return isPath ? "" : paper.path();
20 ending = ends[ending] || "square";
21 height = Math.round(height);
22 width = Math.round(width);
29 var r = ~~(height / 2);
34 "M", x + .5, y + .5 - ~~(height / 2),
36 "a", r, ~~(height / 2), 0, 0, 1, 0, height,
42 "M", x + .5, y + .5 - r,
44 "a", r, r, 0, 1, 1, 0, height,
55 "M", x - ~~(width / 2), y,
57 "a", ~~(width / 2), r, 0, 0, 1, width, 0,
65 "a", r, r, 0, 1, 1, width, 0,
74 var half = ~~(height / 2);
78 "l", 0, -height, mmax(width - half, 0), 0, mmin(half, width), half, -mmin(half, width), half + (half * 2 < height),
85 "l", -width, 0, 0, -mmax(height - half, 0), half, -mmin(half, height), half, mmin(half, height), half,
93 "M", x, y + ~~(height / 2),
94 "l", 0, -height, width, 0, 0, height,
99 "M", x + ~~(width / 2), y,
100 "l", 1 - width, 0, 0, -height, width - 1, 0,
107 r = mmin(width, Math.round(height / 5));
109 "M", x + .5, y + .5 - ~~(height / 2),
111 "a", r, r, 0, 0, 1, r, r,
112 "l", 0, height - r * 2,
113 "a", r, r, 0, 0, 1, -r, r,
118 r = mmin(Math.round(width / 5), height);
120 "M", x - ~~(width / 2), y,
122 "a", r, r, 0, 0, 1, r, -r,
123 "l", width - 2 * r, 0,
124 "a", r, r, 0, 0, 1, r, r,
132 return path.join(",");
134 return paper.path(path);
140 * @param {Raphael} paper The paper to render the graph on
141 * @param {int} x left coord
142 * @param {int} y right coord
143 * @param {int} width width of graph
144 * @param {int} height heigt of graph
145 * @param {Array} values - single = [1,2,3] or multiple [ [1,2,3] , [1,2,3]]
146 * @param {Object} opts - options
147 * type : {String} square | ???
148 * gutter: {Number} percentage width default 20%
149 * vgutter : {Number} vertical gutter?
150 * colors : {Array} list of colours - default chartinst.colors
151 * xvalues : {Array} not sure - this looks like can be single or multi dimensional array
152 * yvalues : {Array} not sure - this looks like can be single or multi dimensional array
154 * axis: {String} eg. "top right bottom left" - which sides to show an axis eg. "0 0 1 1"
157 * axisxlabels: {Array} - note - first element appears left of first bar..
161 * labels : {Array} labels to go above the chart..
164 function VBarchart(paper, x, y, width, height, values, opts) {
168 var chartinst = this,
169 type = opts.type || "square",
170 gutter = parseFloat(opts.gutter || "20%"),
173 // covers = paper.set(),
174 // covers2 = paper.set(),
175 total = Math.max.apply(Math, values),
178 colors = opts.colors || chartinst.colors,
179 len = values.length + 2,
182 opts.xvalues = opts.xvalues|| [];
183 if (!paper.raphael.is(opts.xvalues[0], "array")) {
184 opts.xvalues = [opts.xvalues];
186 opts.yvalues = opts.yvalues|| [];
187 if (!paper.raphael.is(opts.yvalues[0], "array")) {
188 opts.yvalues = [opts.yvalues];
192 var allx = Array.prototype.concat.apply([], opts.xvalues),
193 ally = Array.prototype.concat.apply([], opts.yvalues),
194 xdim = chartinst.snapEnds(
195 Math.min.apply(Math, allx),
196 Math.max.apply(Math, allx),
197 opts.xvalues[0].length - 1
201 ydim = chartinst.snapEnds(
202 Math.min.apply(Math, ally),
203 Math.max.apply(Math, ally),
204 opts.yvalues[0].length - 1
206 miny = typeof(opts.ymin) == 'undefined' ? ydim.from : opts.ymin,
208 kx = (width - gutter * 2) / ((maxx - minx) || 1),
209 ky = (height - gutter * 2) / ((maxy - miny) || 1);
213 if (Raphael.is(values[0], "array") && values.length > 1) {
218 for (var i = values.length; i--;) {
219 bars.push(paper.set());
220 total.push(Math.max.apply(Math, values[i]));
221 len = Math.max(len, values[i].length);
224 for (var i = values.length; i--;) {
225 if (values[i].length < len) {
226 for (var j = len; j--;) {
232 total = Math.max.apply(Math, opts.stacked ? stacktotal : total);
235 for (var i = 0; i < len; i++) {
237 values[i] = { value: values[i], order: i, valueOf: function () { return this.value; } };
240 total = (opts.to) || total;
241 Roo.log([width, len, gutter]);
242 var barwidth = width / (len * (90 + gutter) + gutter) * 100,
243 barhgutter = barwidth * (gutter) / 100,
244 barvgutter = opts.vgutter == null ? 20 : opts.vgutter,
247 Y = (height - 2 * barvgutter) / total;
248 Roo.log([barwidth, X, barhgutter]);
250 barhgutter = Math.round(barhgutter);
251 barwidth = Math.floor(barwidth);
255 var axis = paper.set();
259 // Roo.log(opts.axis);
261 // Value - "top right bottom left". If
262 var ax = (opts.axis + "").split(/[,\s]+/);
272 opts.axisxstep || Math.floor((width - 2 * gutter) / 20),
282 opts.axisystep || Math.floor((height - 2 * gutter) / 20),
287 opts.axisxlabels = opts.axisxlabels || [];
288 // add elements at beginning and end of array...
289 opts.axisxlabels.unshift('');
290 opts.axisxlabels.push('');
291 opts.axisxstep = opts.axisxstep || (opts.axisxlabels ? opts.axisxlabels.length -1 : false ) || len;
295 // x, y, length, from, to, steps, orientation, labels, type, dashsize, paper
299 width - gutter, // total width
304 opts.axisxlabels || false, // labels
317 // opts.axisystep || Math.floor((height - 2 * gutter) / 20),
325 !opts.stacked && (barwidth /= multi || 1);
327 for (var i = 0; i < len; i++) {
333 for (var j = 0; j < (multi || 1); j++) {
334 var h = Math.round((multi ? values[j][i] : values[i]) * Y),
335 top = y + height - barvgutter - h,
336 bar = finger(Math.round(X + barwidth / 2), top + h, barwidth, h, true, type, null, paper).attr({ stroke: "none", fill: colors[multi ? j : i] });
338 // bar = finger(x, Y + barwidth / 2, Math.round(8 * X), barwidth - 1, false, type, null, paper).attr({stroke: "none", fill: colors[multi ? j : i]});
341 if (multi && bars[j]) { // bars[j] did not appear to exist?
348 bar.x = Math.round(X + barwidth / 2);
351 bar.value = multi ? values[j][i] : values[i];
353 if(!isNaN(bar.y) && opts.labels && opts.labels[i]){
354 bar.labels = paper.set();
355 var qtyLbl = paper.text(
361 'text-anchor' : 'start',
365 bar.labels.push(qtyLbl);
375 //X += barhgutter + 25; -- why add 25??
382 * create the legend for Vbarchart
386 // var legend = function (labels, otherslabel, mark, dir) {
389 // labels = labels || [];
390 //// dir = (dir && dir.toLowerCase && dir.toLowerCase()) || "south";
391 // dir = "east"; // default set to east, do not support other position first...
392 // mark = paper[mark && mark.toLowerCase()] || "circle";
393 // chart.labels = paper.set();
395 // for (var i = 0; i < len; i++) {
398 // values[i].others && (labels[i] = otherslabel || "Others");
400 // labels[i] = chartinst.labelise(labels[i], values[i], sum);
401 // chart.labels.push(paper.set());
402 // chart.labels[i].push(paper[mark](x + 5, h, 5).attr({ stroke: "none", fill: colors[i] }));
403 // chart.labels[i].push(txt = paper.text(x + 20, h, labels[i] || values[i]).attr(chartinst.txtattr).attr({ fill: opts.legendcolor || "#000", "text-anchor": "start"}));
404 // covers[i].label = chart.labels[i];
405 // h += txt.getBBox().height * 1.2;
409 // east: [width + 15, - Y +30]
410 //// west: [-bb.width - 2 * r - 20, -bb.height / 2],
411 //// north: [-r - bb.width / 2, -r - bb.height - 10],
412 //// south: [ x - 5, 10]
415 // chart.labels.translate.apply(chart.labels, tr);
416 // chart.push(chart.labels);
419 // if (opts.legend) {
420 // legend(opts.legend, opts.legendothers, opts.legendmark, opts.legendpos);
425 // chart.hover = function (fin, fout) {
428 // covers.mouseover(fin).mouseout(fout);
432 // chart.hoverColumn = function (fin, fout) {
435 // fout = fout || function () {};
436 // covers2.mouseover(fin).mouseout(fout);
440 // chart.click = function (f) {
447 // chart.each = function (f) {
448 // if (!Raphael.is(f, "function")) {
451 // for (var i = covers.length; i--;) {
452 // f.call(covers[i]);
457 // chart.eachColumn = function (f) {
458 // if (!Raphael.is(f, "function")) {
461 // for (var i = covers2.length; i--;) {
462 // f.call(covers2[i]);
467 // chart.clickColumn = function (f) {
474 // chart.push(bars, covers, covers2);
476 // chart.covers = covers;
481 * Horizontal Barchart
483 function HBarchart(paper, x, y, width, height, values, opts) {
486 var chartinst = this,
487 type = opts.type || "square",
488 gutter = parseFloat(opts.gutter || "20%"),
491 covers = paper.set(),
492 covers2 = paper.set(),
493 total = Math.max.apply(Math, values),
496 colors = opts.colors || chartinst.colors,
501 if (Raphael.is(values[0], "array")) {
506 for (var i = values.length; i--;) {
507 bars.push(paper.set());
508 total.push(Math.max.apply(Math, values[i]));
509 len = Math.max(len, values[i].length);
513 for (var i = len; i--;) {
515 for (var j = values.length; j--;) {
516 tot +=+ values[j][i] || 0;
518 stacktotal.push(tot);
522 for (var i = values.length; i--;) {
523 if (values[i].length < len) {
524 for (var j = len; j--;) {
530 total = Math.max.apply(Math, opts.stacked ? stacktotal : total);
533 for (var i = 0; i < len; i++) {
535 values[i] = { value: values[i], order: i, valueOf: function () { return this.value; } };
539 for (i = 0; i < len; i++) {
541 values[opts.cut].value += values[i];
542 values[opts.cut].others = true;
543 others = values[opts.cut].value;
547 len = Math.min(opts.cut + 1, values.length);
549 others && values.splice(len) && (values[opts.cut].others = true);
552 total = (opts.to) || Math.max.apply(Math, values);
554 var barheight = Math.floor(height / (len * (100 + gutter) + gutter) * 100),
555 bargutter = Math.floor(barheight * gutter / 100),
558 X = (width - 1) / total;
560 !opts.stacked && (barheight /= multi || 1);
562 for (var i = 0; i < len; i++) {
565 for (var j = 0; j < (multi || 1); j++) {
566 var val = multi ? values[j][i] : values[i],
567 bar = finger(x, Y + barheight / 2, Math.round(val * X), barheight - 1, false, type, null, paper).attr({stroke: "none", fill: colors[multi ? j : i]});
575 bar.x = x + Math.round(val * X);
576 bar.y = Y + barheight / 2;
577 bar.w = Math.round(val * X);
589 var cvr = paper.rect(x, stack[0].y - stack[0].h / 2, width, barheight).attr(chartinst.shim);
592 cvr.bars = paper.set();
596 for (var s = stack.length; s--;) {
600 for (var s = 0, ss = stack.length; s < ss; s++) {
603 val = Math.round((size + bar.value) * X),
604 path = finger(x, bar.y, val, barheight - 1, false, type, 1, paper);
607 size && bar.attr({ path: path });
610 covers.push(cover = paper.rect(x + size * X, bar.y - bar.h / 2, bar.value * X, barheight).attr(chartinst.shim));
625 for (var i = 0; i < len; i++) {
626 for (var j = 0; j < (multi || 1); j++) {
627 var cover = paper.rect(x, Y, width, barheight).attr(chartinst.shim);
630 cover.bar = multi ? bars[j][i] : bars[i];
631 cover.value = cover.bar.value;
639 chart.label = function (labels, isRight) {
640 labels = labels || [];
641 this.labels = paper.set();
643 for (var i = 0; i < len; i++) {
644 for (var j = 0; j < (multi || 1); j++) {
645 //var label = paper.labelise(multi ? labels[j] && labels[j][i] : labels[i], multi ? values[j][i] : values[i], total),
646 var label = Raphael.g.labelise(multi ? labels[j] && labels[j][i] : labels[i], multi ? values[j][i] : values[i], total),
648 bars[i * (multi || 1) + j].x + 5 : // - barheight / 2 + 3 :
650 A = !isRight ? "end" : "start",
653 this.labels.push(L = paper.text(X, bars[i * (multi || 1) + j].y, label).attr(txtattr).attr({ "text-anchor": A }).insertBefore(covers[0]));
655 if (L.getBBox().x < x + 5) {
656 L.attr({x: x + 5, "text-anchor": "start"});
658 bars[i * (multi || 1) + j].label = L;
666 var axis = paper.set();
669 // Roo.log(opts.axis);
671 // Value - "top right bottom left". If
672 var ax = (opts.axis + "").split(/[,\s]+/);
675 +ax[0] && axis.push(// not in used at the moment
682 opts.axisxstep || Math.floor((width - 2 * gutter) / 20),
686 +ax[1] && axis.push(// not in used at the moment
693 opts.axisystep || Math.floor((height - 2 * gutter) / 20),
698 +ax[2] && axis.push(// not in used at the moment
700 // x, y, length, from, to, steps, orientation, labels, type, dashsize, paper
704 // width - 2 * gutter,
707 width - 20, // total width
712 opts.axisxstep || Math.floor((width - 2 * gutter) / 20), // data length
714 opts.axisxlabels || false,
720 +ax[3] && axis.push(// just hardcode this
731 // opts.axisystep || Math.floor((height - 2 * gutter) / 20),
739 chart.hover = function (fin, fout) {
742 fout = fout || function () {};
743 covers.mouseover(fin).mouseout(fout);
747 chart.hoverColumn = function (fin, fout) {
750 fout = fout || function () {};
751 covers2.mouseover(fin).mouseout(fout);
755 chart.each = function (f) {
756 if (!Raphael.is(f, "function")) {
759 for (var i = covers.length; i--;) {
765 chart.eachColumn = function (f) {
766 if (!Raphael.is(f, "function")) {
769 for (var i = covers2.length; i--;) {
775 chart.click = function (f) {
782 chart.clickColumn = function (f) {
790 * create the legend for Hbarchart
794 var legend = function (labels, otherslabel, mark, dir) {
797 labels = labels || [];
798 // dir = (dir && dir.toLowerCase && dir.toLowerCase()) || "south";
799 dir = "east"; // default set to east, do not support other position first...
800 mark = paper[mark && mark.toLowerCase()] || "circle";
801 chart.labels = paper.set();
803 for (var i = 0; i < len; i++) {
806 values[i].others && (labels[i] = otherslabel || "Others");
807 // Roo.log(values[i]);
808 labels[i] = chartinst.labelise(labels[i], values[i], sum);
809 chart.labels.push(paper.set());
810 chart.labels[i].push(paper[mark](x + 5, h, 5).attr({ stroke: "none", fill: colors[i] }));
811 chart.labels[i].push(txt = paper.text(x + 20, h, labels[i] || values[i]).attr(chartinst.txtattr).attr({ fill: opts.legendcolor || "#000", "text-anchor": "start"}));
812 covers[i].label = chart.labels[i];
813 h += txt.getBBox().height * 1.2;
817 east: [width + 25, - Y +30]
818 // west: [-bb.width - 2 * r - 20, -bb.height / 2],
819 // north: [-r - bb.width / 2, -r - bb.height - 10],
820 // south: [ x - 5, 10]
823 chart.labels.translate.apply(chart.labels, tr);
824 chart.push(chart.labels);
828 legend(opts.legend, opts.legendothers, opts.legendmark, opts.legendpos);
831 chart.push(bars, covers, covers2);
833 chart.covers = covers;
838 var F = function() {};
839 F.prototype = Raphael.g;
840 HBarchart.prototype = VBarchart.prototype = new F;
842 Raphael.fn.hbarchart = function(x, y, width, height, values, opts) {
843 return new HBarchart(this, x, y, width, height, values, opts);
846 Raphael.fn.barchart = function(x, y, width, height, values, opts) {
847 return new VBarchart(this, x, y, width, height, values, opts);