raphael donut chart example

by kuyabiye

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
        <table>
            <tbody>
                <tr>
                    <th scope="row">Ruby</th>
                    <td>10%</td>
                </tr>
                <tr>
                    <th scope="row">JavaScript</th>
                    <td>10%</td>
                </tr>
                <tr>
                    <th scope="row">Shell</th>
                    <td>10%</td>
                </tr>
                <tr>
                    <th scope="row">Python</th>
                    <td>10%</td>
                </tr>
                <tr>
                    <th scope="row">PHP</th>
                    <td>10%</td>
                </tr>
                <tr>
                    <th scope="row">C</th>
                    <td>10%</td>
                </tr>
                <tr>
                    <th scope="row">Perl</th>
                    <td>10%</td>
                </tr>
                <tr>
                    <th scope="row">C++</th>
                    <td>10%</td>
                </tr>
                <tr>
                    <th scope="row">Java</th>
                    <td>10%</td>
                </tr>
                <tr>
                    <th scope="row">Objective-C</th>
                    <td>10%</td>
                </tr>
            </tbody>
        </table>
        <div id="holder"></div>

CSS

body {
    background: #333;
    color: #fff;
    font: 300 100.1% "Helvetica Neue", Helvetica, "Arial Unicode MS", Arial, sans-serif;
}
#holder {
    height: 480px;
    left: 50%;
    margin: -240px 0 0 -320px;
    position: absolute;
    top: 50%;
    width: 640px;
}
#copy {
    bottom: 0;
    font: 300 .7em "Helvetica Neue", Helvetica, "Arial Unicode MS", Arial, sans-serif;
    position: absolute;
    right: 1em;
    text-align: right;
}
#copy a {
    color: #fff;
}

JavaScript

//
// expanding donut example
//
Raphael.fn.donutChart = function (cx, cy, r, rin, values, labels, stroke) {
    var paper = this,
        rad = Math.PI / 180,
        chart = this.set();
    function sector(cx, cy, r, startAngle, endAngle, params) {
        //console.log(params.fill);
        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),
            xx1 = cx + rin * Math.cos(-startAngle * rad),
            xx2 = cx + rin * Math.cos(-endAngle * rad),
            yy1 = cy + rin * Math.sin(-startAngle * rad),
            yy2 = cy + rin * Math.sin(-endAngle * rad);
        
        return paper.path(["M", xx1, yy1,
                           "L", x1, y1, 
                           "A", r, r, 0, +(endAngle - startAngle > 180), 0, x2, y2, 
                           "L", xx2, yy2, 
                           "A", rin, rin, 0, +(endAngle - startAngle > 180), 1, xx1, yy1, "z"]
                         ).attr(params);
        
    }
    var colors = ['red','green','blue','yellow','#ffaa00','#00ffaa','#aa00ff'];
    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, .75, 1),
                ms = 500,
                delta = 30,
                bcolor = colors[j%colors.length],
                p = sector(cx, cy, r, angle, angle + angleplus, {fill: "90-" + bcolor + "-" + bcolor, stroke: stroke, "stroke-width": 1}),
                txt = paper.text(cx + (r + delta + 55) * Math.cos(-popangle * rad), cy + (r + delta + 25) * Math.sin(-popangle * rad), labels[j]).attr({fill: bcolor, stroke: "none", opacity: 0, "font-size": 20});
            p.mouseover(function () {
               ...