g.circular.js

[g.raphael] / g.circular.js

/*
 * g.Raphael 0.5 - Charting library, based on Raphaël
 *
 * Copyright (c) 2009 Dmitry Baranovskiy (http://g.raphaeljs.com)
 * Licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) license.
 */
Raphael = typeof(Raphael) != 'undefined' ? Raphael :  (imports ? imports.seed.Raphael.Raphael : {});
Roo = typeof(Roo) != 'undefined' ? Roo:  (imports ? imports.seed.Roo.Roo: {});
//chartinst = typeof(chartinst) != 'undefined' ? chartinst:  (imports ? imports.chartinst.chartinst : {});
 


(function () {

    /**
     * @param {Raphael} paper to draw on
     * @param {int} cx - centre X
     * @param {int} cy - centre Y
     * @param {int} r - radius
     * @param {Array} values
     * @param {Object} opts options
     *   cut : after this meany items - do not show a pie element?
     *   
     */

    function Circularchart(paper, cx, cy, r, values, opts) {
        
        var chartinst = this;
        
        opts = opts || {};
        
        var colors = [
            '#5f236c',
            '#9336a7',
            '#cc8cda',
            '#6666b2',
            '#9999cc',
            '#66d6fb',
            '#4795af',
            '#93e2fc',
            '#e0f6fe',
            '#eeeeee'
        ];
        
        paper.customAttributes.circularPath = function (cx, cy, value, maxvalue, maxangle, color, R) {
            var alpha = maxangle / maxvalue * value,
                a = (90 - alpha) * Math.PI / 180,
                x = cx + R * Math.cos(a),
                y = cy - R * Math.sin(a),
                path;
            
            path = [["M", cx, cy - R], ["A", R, R, 0, +(alpha > 180), 1, x, y]];

            return {path: path, stroke: color};
        };
        
        if (!paper.raphael.is(values, "array")) {
            values = [values];
        }
        
        var chart = paper.set(),
            sectors = [],
            len = values.length,
            maxangle = opts.maxangle || 270,
            maxvalue = 0,
            total = 0,
            cut = opts.cut || 8;
            
        var barwidth = opts.barwidth || Math.min(Math.floor(r / cut), 12);
        
        var tempVal = [];
        
        for (var i = 0; i < len; i++){
            
            maxvalue = (maxvalue > values[i]) ? maxvalue : values[i];
            
            total += values[i];
            
            if(i <= cut){
                tempVal[i] = {
                    value : values[i],
                    order : i,
                    others : false,
                    valueOf: function () { return this.value; }
                };
                continue;
            }
            
            tempVal[cut].value += values[i] * 1;
            tempVal[cut].others = true;
            
        }
        
        values = tempVal;
        len = values.length;
                
        if (!opts.no_sort) {
            values.sort(function (a, b) {
                return b.value - a.value;
            });
        }
        
        var rr = r;
        
        for (var i = 0; i < len; i++){
            
            var p = paper.path().attr({
                "stroke": "#fff", 
                "stroke-width": barwidth, 
                "stroke-linecap": "round", 
                "stroke-linejoin": "round"
                
            }).attr({circularPath: [cx, cy, values[i], maxvalue, maxangle, colors[i] || chartinst.colors[i], rr]});
            
            var alpha = 90 * Math.PI / 180,
            startX = cx + rr * Math.cos(alpha),
            startY = cy - rr * Math.sin(alpha),
            circleWidth = Math.max(Math.floor(barwidth / 2 - 1), 1);

            paper.circle(startX, startY, circleWidth).attr({stroke: "none", fill: "#fff"});
            
            p.value = values[i];
            sectors.push(p);
            
            rr -= barwidth;
        }
        
        paper.text(cx - r + 20, cy + r + 30, (opts.totalmsg || 'Total:') + ' ' + total ).attr(opts.txtattr || chartinst.txtattr).attr({ fill: "#000", "text-anchor": "start"});
        
        var legend = function (labels, otherslabel, mark) {
            var x = cx + r  + r / 3,
                y = cy - r,
                labels = labels || [];
        
            mark = paper[mark && mark.toLowerCase()] || "circle";
            
            for (var i = 0; i < len; i++) {
                var j = values[i].order,
                    txt;

                if(values[i].others){
                    continue;
                }
                
                paper[mark](x + 5, y, 5).attr({ fill: colors[i] || chartinst.colors[i], stroke: "none" })
                txt = paper.text(x + 20, y, labels[j] || values[i]).attr(opts.txtattr || chartinst.txtattr).attr({ fill: opts.legendcolor || "#000", "text-anchor": "start"})
                
                y += txt.getBBox().height * 1.2;
            }
            
            for (var i = 0; i < len; i++) {
                var j = values[i].order,
                    txt;

                if(!values[i].others){
                    continue;
                }
                
                paper[mark](x + 5, y, 5).attr({ fill: colors[i] || chartinst.colors[i], stroke: "none" })
                txt = paper.text(x + 20, y, otherslabel || 'Others').attr(opts.txtattr || chartinst.txtattr).attr({ fill: opts.legendcolor || "#000", "text-anchor": "start"})
                
                y += txt.getBBox().height * 1.2;
            }

        };

        if (opts.legend) {
            legend(opts.legend, opts.legendothers, opts.legendmark);
        }

        chart.sectors = sectors;
        chart.cx = cx;
        chart.cy = cy;
        chart.r = r;
        return chart;
    };
    
    //inheritance
    var F = function() {};
    F.prototype = Raphael.g;
    Circularchart.prototype = new F;
    
    //public
    Raphael.fn.circularchart = function(cx, cy, r, values, opts) {
        return new Circularchart(this, cx, cy, r, values, opts);
    }
    
})();