raphael demo pie chart tweak to add custom colors

Question

How can I add custom colors to this raphael pie chart. http://raphaeljs.com/pie.html It grabs values from HTML table and inserts them into a pie chart. Right now it uses the following to fill sectors. I think it uses a randomizer to select hex colours. Im not sure.

bcolor = Raphael.hsb(start, 1, 1),
            p = sector(cx, cy, r, angle, angle + angleplus, {fill: "90-" + bcolor + "-" + color, stroke: stroke, "stroke-width": 2}),

I want to be able to pull in a array of set hex colors. There shouldnt be more than 6 values. Here is the full code. I'd also like to set custom gradient also, but not as essential right now.

Raphael.fn.pieChart = function (cx, cy, r, values, labels, stroke) {
    var paper = this,
        rad = Math.PI / 180,
        chart = this.set();
    function sector(cx, cy, r, startAngle, endAngle, params) {
        var x1 = cx + r * Math.cos(-startAngle * rad),
            x2 = cx + r * Math.cos(-endAngle * rad),
            y1 = cy + r * Math.sin(-startAngle * rad),
            y2 = cy + r * Math.sin(-endAngle * rad);
        return paper.path(["M", cx, cy, "L", x1, y1, "A", r, r, 0, +(endAngle - startAngle > 180), 0, x2, y2, "z"]).attr(params);
    }
    var angle = 0,
        total = 0,
        start = 0,
        process = function (j) {
            var value = values[j],
                angleplus = 360 * value / total,
                popangle = angle + (angleplus / 2),
                color = Raphael.hsb(start, .90, 1),
                ms = 500,
                delta = 30,
                bcolor = Raphael.hsb(start, 1, 1),
                p = sector(cx, cy, r, angle, angle + angleplus, {fill: "90-" + bcolor + "-" + color, stroke: stroke, "stroke-width": 2}),
                txt = paper.text(cx + (r + delta + 2) * Math.cos(-popangle * rad), cy + (r + delta + 5) * Math.sin(-popangle * rad), labels[j]).attr({fill: "#999999", stroke: "none", opacity: 1, "font-size": 13});
            p.mouseover(function () {
                p.stop().animate({transform: "s1.1 1.1 " + cx + " " + cy}, ms, "elastic");
                //txt.stop().animate({opacity: 1}, ms, "elastic");
            }).mouseout(function () {
                p.stop().animate({transform: ""}, ms, "elastic");
                //txt.stop().animate({opacity: 0}, ms);
            });
            angle += angleplus;
            chart.push(p);
            chart.push(txt);
            start += .1;
        };
    for (var i = 0, ii = values.length; i < ii; i++) {
        total += values[i];
    }
    for (i = 0; i < ii; i++) {
        process(i);
    }
    return chart;
};

$(function () {
    var values = [],
        labels = [];
    $("tr").each(function () {
        values.push(parseInt($("td", this).text(), 10));
        labels.push($("th", this).text());
    });
    $("table").hide();
    Raphael("holder-new", 400, 400).pieChart(100, 100, 50, values, labels, "#fff");
});

score 4 · Accepted Answer · answered Jan 09 '13 at 16:16

bcolor = Raphael.hsb(hue,saturation,value)

takes the value of start as hue. so it starts at 0, and increments .1 for each sector. There's nothing random about it. To do what you need, just create your array.

var colors = ['red','green','blue','yellow','#ffaa00','#00ffaa','#aa00ff'];

set the color from the array (the modulus keeps the value of j within the color array length)

bcolor = colors[j%colors.length]

and use it in your segment

p = sector(cx, cy, r, angle, angle + angleplus, 
    {fill: "90-" + bcolor + "-" + bcolor, stroke: stroke, "stroke-width": 1})

the original code I editted this from used two colors (color and bcolor), whereas I'm only bcolor here. If you want a gradient, add back in the other color.

Here's a fiddle that displays the results.

raphael demo pie chart tweak to add custom colors

1 Answers1