Chart

Chart with raphael js

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.2.7/raphael.min.js"></script>
<div id="donut-chart"></div>

CSS

#donut-chart {
  position: relative;
  top: -38px;
  letter-spacing: 1px; }

JavaScript

Raphael.fn.donutChart = function(a, b, c, d, e) {
    function k(d, e, g) {
        var i = a + c * Math.cos(-d * h),
            k = b + c * Math.sin(-d * h),
            l = a + c * Math.cos(-e * h),
            m = b + c * Math.sin(-e * h),
            n = a + j * Math.cos(-d * h),
            o = b + j * Math.sin(-d * h),
            p = a + j * Math.cos(-e * h),
            q = b + j * Math.sin(-e * h);
        return f.path(["M", n, o, "L", i, k, "A", c, c, 0, +(e - d > 180), 0, l, m, "L", p, q, "A", j, j, 0, +(e - d > 180), 1, n, o, "z"]).attr(g)
    }

    function l(a, b, c, d, e) {
        var g = {};
        return g.fill = e.fill || "#000", g["font-size"] = e["font-size"] || 28, g["font-weight"] = e["font-weight"] || "bold", g["font-style"] = e["font-style"] || "italic", f.text(a, b, c).attr(g)
    }

    function m(c) {
        var e = d[c],
            h = 360 * e / o,
            j = {
                fill: i.colors[c]
            };
        i.strokeWidth ? (j.stroke = i.strokeColor, j["stroke-width"] = i.strokeWidth) : j.stroke = "none";
        var m = k(n, n + h, j);
        m.click(function() {
            i.onclick(c)
        }), m.mouseover(function() {
            if (m.stop().animate({
                    transform: "s" + i.animationScale + " " + i.animationScale + " " + a + " " + b
                }, i.animationDuration, i.animationEasing), "undefined" !== i.labels[c]) {
                var e = n + h / 2;
                i.label_name = l(a, b - 28, i.labels[c], e, {
                    fill: i.colors[c]
                }), i.label_path = f.rect(a - 40, b, 80, 4).attr({
                    fill: i.colors[c],
                    stroke: 0
                }), i.label_value = l(a, b + 28, d[c] + "%", e, {
                    fill: i.colors[c]
                })
            }
            void 0 !== i.label && g.push(i.label), i.onmouseover(c)
        }).mouseout(function() {
            m.stop().animate({
                transform: ""
         ...