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.
7 Raphael = typeof(Raphael) != 'undefined' ? Raphael : (imports ? imports.seed.Raphael.Raphael : {});
8 Roo = typeof(Roo) != 'undefined' ? Roo: (imports ? imports.seed.Roo.Roo: {});
9 //chartinst = typeof(chartinst) != 'undefined' ? chartinst: (imports ? imports.chartinst.chartinst : {});
16 * @param {Raphael} paper to draw on
17 * @param {int} cx - centre X
18 * @param {int} cy - centre Y
19 * @param {int} r - radius
20 * @param {Array} values
21 * @param {Object} opts options
22 * cut : after this meany items - do not show a pie element?
26 function Circularchart(paper, cx, cy, r, values, opts) {
49 paper.customAttributes.circularPath = function (cx, cy, value, maxvalue, maxangle, color, R) {
50 var alpha = maxangle / maxvalue * value,
51 a = (90 - alpha) * Math.PI / 180,
52 x = cx + R * Math.cos(a),
53 y = cy - R * Math.sin(a),
56 path = [["M", cx, cy - R], ["A", R, R, 0, 1, 1, cx - 1, cy - R]];
58 path = [["M", cx, cy - R], ["A", R, R, 0, +(alpha > 180), 1, x, y]];
61 return {path: path, stroke: color};
64 if (!paper.raphael.is(values, "array")) {
68 var chart = paper.set(),
71 maxangle = opts.maxangle || 270,
76 var barwidth = Math.min(Math.floor(r / cut), 12);
78 for (var i = 0; i < len; i++){
80 maxvalue = (maxvalue > values[i]) ? maxvalue : values[i];
89 valueOf: function () { return this.value; }
94 values[cut].value += values[i];
95 values[cut].others = true;
104 values.sort(function (a, b) {
105 return b.value - a.value;
111 for (var i = 0; i < len; i++){
113 var p = paper.path().attr({
115 "stroke-width": barwidth,
116 "stroke-linecap": "round",
117 "stroke-linejoin": "round"
119 }).attr({circularPath: [cx, cy, values[i], maxvalue, maxangle, colors[i] || chartinst.colors[i], rr]});
121 var alpha = 90 * Math.PI / 180,
122 startX = cx + rr * Math.cos(alpha),
123 startY = cy - rr * Math.sin(alpha),
124 circleWidth = Math.max(Math.floor(barwidth / 2 - 1), 1);
126 paper.circle(startX, startY, circleWidth).attr({stroke: "none", fill: "#fff"});
134 paper.text(cx - r + 20, cy + r + 30, (opts.totalmsg || 'Total:') + ' ' + total ).attr(opts.txtattr || chartinst.txtattr).attr({ fill: "#000", "text-anchor": "start"});
136 var legend = function (labels, otherslabel, mark, dir) {
137 var x = cx + r + r / 3,
139 labels = labels || [];
141 dir = (dir && dir.toLowerCase && dir.toLowerCase()) || "east";
142 mark = paper[mark && mark.toLowerCase()] || "circle";
143 chart.labels = paper.set();
145 // for (var i = 0; i < len; i++) {
146 // var j = values[i].order,
149 // var l = values[i].others ? (otherslabel || "Others") : labels[j];
151 // chart.labels.push(paper.set());
152 // chart.labels[i].push(paper[mark](x + 5, y, 5).attr({ fill: colors[i] || chartinst.colors[i], stroke: "none" }));
153 // chart.labels[i].push(
154 // txt = paper.text(x + 20, y, l || values[i]).attr(opts.txtattr || chartinst.txtattr).attr({ fill: opts.legendcolor || "#000", "text-anchor": "start"}));
156 // y += txt.getBBox().height * 1.2;
159 for (var i = 0; i < len; i++) {
160 var j = values[i].order,
163 if(values[i].others){
167 chart.labels.push(paper.set());
168 chart.labels[i].push(paper[mark](x + 5, y, 5).attr({ fill: colors[i] || chartinst.colors[i], stroke: "none" }));
169 chart.labels[i].push(
170 txt = paper.text(x + 20, y, labels[j] || values[i]).attr(opts.txtattr || chartinst.txtattr).attr({ fill: opts.legendcolor || "#000", "text-anchor": "start"}));
172 y += txt.getBBox().height * 1.2;
175 // for (var i = 0; i < len; i++) {
176 // var j = values[i].order,
179 // if(!values[i].others){
183 // chart.labels.push(paper.set());
184 // chart.labels[len - 1].push(paper[mark](x + 5, y, 5).attr({ fill: colors[i] || chartinst.colors[i], stroke: "none" }));
185 // chart.labels[len - 1].push(
186 // txt = paper.text(x + 20, y, otherslabel || 'Others').attr(opts.txtattr || chartinst.txtattr).attr({ fill: opts.legendcolor || "#000", "text-anchor": "start"}));
188 // y += txt.getBBox().height * 1.2;
191 var bb = chart.labels.getBBox(),
193 east: [0, -bb.height / 2],
194 west: [-bb.width - 2 * r - 20, -bb.height / 2],
195 north: [-r - bb.width / 2, -r - bb.height - 10],
196 south: [-r - bb.width / 2, r + 10]
199 chart.labels.translate.apply(chart.labels, tr);
200 chart.push(chart.labels);
204 legend(opts.legend, opts.legendothers, opts.legendmark, opts.legendpos);
207 chart.sectors = sectors;
215 var F = function() {};
216 F.prototype = Raphael.g;
217 Circularchart.prototype = new F;
220 Raphael.fn.circularchart = function(cx, cy, r, values, opts) {
221 return new Circularchart(this, cx, cy, r, values, opts);