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 = -180 * 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 || 8;
  75
  76         var barwidth = Math.min(Math.floor(r / cut), 12);
  77
  78         var tempVal = [];
  79
  80         for (var i = 0; i < len; i++){
  81
  82             maxvalue = (maxvalue > values[i]) ? maxvalue : values[i];
  83
  84             total += values[i];
  85
  86             if(i <= cut){
  87                 tempVal[i] = {
  88                     value : values[i],
  89                     order : i,
  90                     others : false,
  91                     valueOf: function () { return this.value; }
  92                 };
  93                 continue;
  94             }
  95
  96             tempVal[cut].value += values[i] * 1;
  97             tempVal[cut].others = true;
  98
  99         }
 100
 101         values = tempVal;
 102         len = values.length;
 103
 104         if (!opts.no_sort) {
 105             values.sort(function (a, b) {
 106                 return b.value - a.value;
 107             });
 108         }
 109
 110         var rr = r;
 111
 112         for (var i = 0; i < len; i++){
 113
 114             var p = paper.path().attr({
 115                 "stroke": "#fff",
 116                 "stroke-width": barwidth,
 117                 "stroke-linecap": "round",
 118                 "stroke-linejoin": "round"
 119
 120             }).attr({circularPath: [cx, cy, values[i], maxvalue, maxangle, colors[i] || chartinst.colors[i], rr]});
 121
 122             var alpha = 90 * Math.PI / 180,
 123             startX = cx + rr * Math.cos(alpha),
 124             startY = cy - rr * Math.sin(alpha),
 125             circleWidth = Math.max(Math.floor(barwidth / 2 - 1), 1);
 126
 127             paper.circle(startX, startY, circleWidth).attr({stroke: "none", fill: "#fff"});
 128
 129             p.value = values[i];
 130             sectors.push(p);
 131
 132             rr -= barwidth;
 133         }
 134
 135         paper.text(cx - r + 20, cy + r + 30, (opts.totalmsg || 'Total:') + ' ' + total ).attr(opts.txtattr || chartinst.txtattr).attr({ fill: "#000", "text-anchor": "start"});
 136
 137         var legend = function (labels, otherslabel, mark) {
 138             var x = cx + r  + r / 3,
 139                 y = cy - r,
 140                 labels = labels || [];
 141
 142             mark = paper[mark && mark.toLowerCase()] || "circle";
 143
 144             for (var i = 0; i < len; i++) {
 145                 var j = values[i].order,
 146                     txt;
 147
 148                 if(values[i].others){
 149                     continue;
 150                 }
 151
 152                 paper[mark](x + 5, y, 5).attr({ fill: colors[i] || chartinst.colors[i], stroke: "none" })
 153                 txt = paper.text(x + 20, y, labels[j] || values[i]).attr(opts.txtattr || chartinst.txtattr).attr({ fill: opts.legendcolor || "#000", "text-anchor": "start"})
 154
 155                 y += txt.getBBox().height * 1.2;
 156             }
 157
 158             for (var i = 0; i < len; i++) {
 159                 var j = values[i].order,
 160                     txt;
 161
 162                 if(!values[i].others){
 163                     continue;
 164                 }
 165
 166                 paper[mark](x + 5, y, 5).attr({ fill: colors[i] || chartinst.colors[i], stroke: "none" })
 167                 txt = paper.text(x + 20, y, otherslabel || 'Others').attr(opts.txtattr || chartinst.txtattr).attr({ fill: opts.legendcolor || "#000", "text-anchor": "start"})
 168
 169                 y += txt.getBBox().height * 1.2;
 170             }
 171
 172         };
 173
 174         if (opts.legend) {
 175             legend(opts.legend, opts.legendothers, opts.legendmark);
 176         }
 177
 178         chart.sectors = sectors;
 179         chart.cx = cx;
 180         chart.cy = cy;
 181         chart.r = r;
 182         return chart;
 183     };
 184
 185     //inheritance
 186     var F = function() {};
 187     F.prototype = Raphael.g;
 188     Circularchart.prototype = new F;
 189
 190     //public
 191     Raphael.fn.circularchart = function(cx, cy, r, values, opts) {
 192         return new Circularchart(this, cx, cy, r, values, opts);
 193     }
 194
 195 })();