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         paper.customAttributes.circularPath = function (cx, cy, value, maxvalue, maxangle, color, R) {
  46             var alpha = maxangle / maxvalue * value,
  47                 a = (90 - alpha) * Math.PI / 180,
  48                 x = cx + R * Math.cos(a),
  49                 y = cy - R * Math.sin(a),
  50                 path;
  51
  52             path = [["M", cx, cy - R], ["A", R, R, 0, +(alpha > 180), 1, x, y]];
  53
  54             return {path: path, stroke: color};
  55         };
  56
  57         if (!paper.raphael.is(values, "array")) {
  58             values = [values];
  59         }
  60
  61         var chart = paper.set(),
  62             sectors = [],
  63             len = values.length,
  64             maxangle = opts.maxangle || 270,
  65             maxvalue = 0,
  66             total = 0,
  67             cut = opts.cut || 8;
  68
  69         var barwidth = opts.barwidth || Math.min(Math.floor(r / cut), 12);
  70
  71         if(len < 8){
  72             colors = colors.slice(8 - len);
  73         }
  74
  75         if(opts.colors){
  76             colors = opts.colors;
  77         }
  78
  79         var tempVal = [];
  80
  81         for (var i = 0; i < len; i++){
  82
  83             maxvalue = (maxvalue > values[i]) ? maxvalue : values[i];
  84
  85             total += values[i];
  86
  87             if(i <= cut){
  88                 tempVal[i] = {
  89                     value : values[i],
  90                     order : i,
  91                     others : false,
  92                     valueOf: function () { return this.value; }
  93                 };
  94                 continue;
  95             }
  96
  97             tempVal[cut].value += values[i] * 1;
  98             tempVal[cut].others = true;
  99
 100         }
 101
 102         values = tempVal;
 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) {
 139             var x = cx + r  + r / 3,
 140                 y = cy - r,
 141                 labels = labels || [];
 142
 143             mark = paper[mark && mark.toLowerCase()] || "circle";
 144
 145             for (var i = 0; i < len; i++) {
 146                 var j = values[i].order,
 147                     txt;
 148
 149                 if(values[i].others){
 150                     continue;
 151                 }
 152
 153                 paper[mark](x + 5, y, 5).attr({ fill: colors[i] || chartinst.colors[i], stroke: "none" })
 154                 txt = paper.text(x + 20, y, labels[j] || values[i]).attr(opts.txtattr || chartinst.txtattr).attr({ fill: opts.legendcolor || "#000", "text-anchor": "start"})
 155
 156                 y += txt.getBBox().height * 1.2;
 157             }
 158
 159             for (var i = 0; i < len; i++) {
 160                 var j = values[i].order,
 161                     txt;
 162
 163                 if(!values[i].others){
 164                     continue;
 165                 }
 166
 167                 paper[mark](x + 5, y, 5).attr({ fill: colors[i] || chartinst.colors[i], stroke: "none" })
 168                 txt = paper.text(x + 20, y, otherslabel || 'Others').attr(opts.txtattr || chartinst.txtattr).attr({ fill: opts.legendcolor || "#000", "text-anchor": "start"})
 169
 170                 y += txt.getBBox().height * 1.2;
 171             }
 172
 173         };
 174
 175         if (opts.legend) {
 176             legend(opts.legend, opts.legendothers, opts.legendmark);
 177         }
 178
 179         chart.sectors = sectors;
 180         chart.cx = cx;
 181         chart.cy = cy;
 182         chart.r = r;
 183         return chart;
 184     };
 185
 186     //inheritance
 187     var F = function() {};
 188     F.prototype = Raphael.g;
 189     Circularchart.prototype = new F;
 190
 191     //public
 192     Raphael.fn.circularchart = function(cx, cy, r, values, opts) {
 193         return new Circularchart(this, cx, cy, r, values, opts);
 194     }
 195
 196 })();