Top 10 Productos + Leyenda

HTML

<script src="https://raw.github.com/DmitryBaranovskiy/raphael/master/raphael-min.js"></script>
<table id="topProductos">
    <thead>
        <tr>
            <th>Producto</th>
            <th>Cantidad</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Chivito</td>
            <td>60</td>
        </tr>
        <tr>
            <td>Cocacola</td>
            <td>45</td>
        </tr>
        <tr>
            <td>Macarrones</td>
            <td>32</td>
        </tr>
        <tr>
            <td>Filete con guarnicion</td>
            <td>30</td>
        </tr>
        <tr>
            <td>Sandwich mixto</td>
            <td>26</td>
        </tr>
        <tr>
            <td>Merluza con guarnicion</td>
            <td>26</td>
        </tr>
        <tr>
            <td>Hamburgesa con patatas</td>
            <td>24</td>
        </tr>
        <tr>
            <td>Cerveza</td>
            <td>24</td>
        </tr>
        <tr>
            <td>Calamares en su tinta</td>
            <td>12</td>
        </tr>
        <tr>
            <td>Gazpacho manchego</td>
            <td>8</td>
        </tr>
    </tbody>
</table>

JavaScript

(function($) {
    Raphael.fn.pieChart = function(cx, cy, r, values, labels, stroke) {
        var paper = this,
            /*Constante para convertir en radianes*/
            rad = Math.PI / 180,
            chart = this.set();

        function sector(cx, cy, r, startAngle, endAngle, params) { /*Cojido de la documentacion*/
            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 = 90,
            total = 0,
            hue = 0,
            draw = function(j) {
                var value = values[j],
                    diffAngle = 360 * value / total,
                    color = Raphael.hsb(hue, .66, .66),
                    dropcolor = Raphael.hsb(hue, 1, 1),
                    p, mark, txt;
                if (j == 0) {
                    angle -= diffAngle / 2
                }
                p = sector(cx, cy, r, angle, angle + diffAngle, {
                    fill: "90-" + dropcolor + "-" + color,
                    stroke: stroke,
                    "stroke-width": 1
                }), mark = paper.circle(20, 50 + (20 * j), 5).attr({
                    fill: color,
                    stroke: "none"
                }), txt = paper.text(30, 50 + (20 * j), (value / total * 100).toFixed(2) + "% - " + labels[j]).attr({
                    fill: color,
                    stroke: "none",
                    "font-size": 18,
                    "text-anchor": "start"
                });
                p.mouseover(function() {
                    p.stop().animate({
                        transform: "s1.05 1.05 " + cx + " " + cy
                    }, 500, "elastic");
                    mark.stop().animate({
           ...