git.roojs.org Git - g.raphael/blob - g.circular.js

   1 /*
   2  * g.Raphael 0.5 - Charting library, based on Raphaël
   3  *
   4  * Copyright (c) 2009 Dmitry Baranovskiy (http://g.raphaeljs.com)
   5  * Licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) license.
   6  */
   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 : {});
  10
  11
  12
  13 (function () {
  14
  15     /**
  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?
  23      *
  24      */
  25
  26     function Circularchart(paper, cx, cy, r, values, opts) {
  27
  28         var chartinst = this;
  29
  30         opts = opts || {};
  31
  32         var colors = [
  33             '#5f236c',
  34             '#9336a7',
  35             '#cc8cda',
  36             '#6666b2',
  37             '#9999cc',
  38             '#66d6fb',
  39             '#4795af',
  40             '#93e2fc',
  41             '#e0f6fe',
  42             '#eeeeee'
  43         ];
  44
  45         if(opts.colors){
  46             colors = opts.colors;
  47         }
  48
  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),
  54                 path;
  55             if (total == value) {
  56                 path = [["M", cx, cy - R], ["A", R, R, 0, 1, 1, cx - 1, cy - R]];
  57             } else {
  58                 path = [["M", cx, cy - R], ["A", R, R, 0, +(alpha > 180), 1, x, y]];
  59             }
  60
  61             return {path: path, stroke: color};
  62         };
  63
  64         if (!paper.raphael.is(values, "array")) {
  65             values = [values];
  66         }
  67
  68         var chart = paper.set(),
  69             sectors = [],
  70             len = values.length,
  71             maxangle = opts.maxangle || 270,
  72             maxvalue = 0,
  73             total = 0,
  74             cut = opts.cut || 10;
  75
  76         var barwidth = Math.floor(r / cut);
  77
  78         for (var i = 0; i < len; i++){
  79
  80             maxvalue = (maxvalue > values[i]) ? maxvalue : values[i];
  81
  82             total += values[i];
  83
  84             if(i < cut){
  85                 values[i] = {
  86                     value : values[i],
  87                     order : i,
  88                     others : false,
  89                     valueOf: function () { return this.value; }
  90                 };
  91                 continue;
  92             }
  93
  94             values[cut].value += values[i];
  95             values[cut].others = true;
  96
  97             if(i > cut){
  98                 values.splice(i, 1);
  99             }
 100
 101         }
 102
 103         len = values.length;
 104
 105         if (!opts.no_sort) {
 106             values.sort(function (a, b) {
 107                 return b.value - a.value;
 108             });
 109         }
 110
 111         var rr = r;
 112
 113         for (var i = 0; i < len; i++){
 114
 115             var p = paper.path().attr({
 116                 "stroke": "#fff",
 117                 "stroke-width": barwidth,
 118                 "stroke-linecap": "round",
 119                 "stroke-linejoin": "round"
 120
 121             }).attr({circularPath: [cx, cy, values[i], maxvalue, maxangle, colors[i] || chartinst.colors[i], rr]});
 122
 123             var alpha = 90 * Math.PI / 180,
 124             startX = cx + rr * Math.cos(alpha),
 125             startY = cy - rr * Math.sin(alpha),
 126             circleWidth = Math.max(Math.floor(barwidth / 2 - 1), 1);
 127
 128             paper.circle(startX, startY, circleWidth).attr({stroke: "none", fill: "#fff"});
 129
 130             p.value = values[i];
 131             sectors.push(p);
 132
 133             rr -= barwidth;
 134         }
 135
 136         paper.text(cx - r + 20, cy + r + 30, (opts.totalmsg || 'Total:') + ' ' + total ).attr(opts.txtattr || chartinst.txtattr).attr({ fill: "#000", "text-anchor": "start"});
 137
 138         var legend = function (labels, otherslabel, mark, dir) {
 139             var x = cx + r  + r / 3,
 140                 y = cy,
 141                 labels = labels || [];
 142
 143             dir = (dir && dir.toLowerCase && dir.toLowerCase()) || "east";
 144             mark = paper[mark && mark.toLowerCase()] || "circle";
 145             chart.labels = paper.set();
 146
 147             for (var i = 0; i < len; i++) {
 148                 var j = values[i].order,
 149                     txt;
 150
 151                 var l = values[i].others ? (otherslabel || "Others") : labels[j];
 152
 153                 chart.labels.push(paper.set());
 154                 chart.labels[i].push(paper[mark](x + 5, y, 5).attr({ fill: colors[i] || chartinst.colors[i], stroke: "none" }));
 155                 chart.labels[i].push(
 156                     txt = paper.text(x + 20, y, l || values[i]).attr(opts.txtattr || chartinst.txtattr).attr({ fill: opts.legendcolor || "#000", "text-anchor": "start"}));
 157
 158                 y += txt.getBBox().height * 1.2;
 159             }
 160
 161             var bb = chart.labels.getBBox(),
 162                 tr = {
 163                     east: [0, -bb.height / 2],
 164                     west: [-bb.width - 2 * r - 20, -bb.height / 2],
 165                     north: [-r - bb.width / 2, -r - bb.height - 10],
 166                     south: [-r - bb.width / 2, r + 10]
 167                 }[dir];
 168
 169             chart.labels.translate.apply(chart.labels, tr);
 170             chart.push(chart.labels);
 171         };
 172 //
 173         if (opts.legend) {
 174             legend(opts.legend, opts.legendothers, opts.legendmark, opts.legendpos);
 175         }
 176
 177         chart.sectors = sectors;
 178         chart.cx = cx;
 179         chart.cy = cy;
 180         chart.r = r;
 181         return chart;
 182     };
 183
 184     //inheritance
 185     var F = function() {};
 186     F.prototype = Raphael.g;
 187     Circularchart.prototype = new F;
 188
 189     //public
 190     Raphael.fn.circularchart = function(cx, cy, r, values, opts) {
 191         return new Circularchart(this, cx, cy, r, values, opts);
 192     }
 193
 194 })();