Dynamic Pentagonal Chart

by achudars

HTML

<div id="pentagon"></div>
<img src="http://i.stack.imgur.com/65BOu.jpg" style="position:absolute;z-index:-1;top:10px;left:10px" />

CSS

#pentagon {
    width: 226px;
    height: 227px;
    border: 1px solid red;
    background: #fff;
    background: rgba(255, 255, 255, 0.8)
}

JavaScript

var paper = Raphael("pentagon"),
    fullNum = [40, 53],
    borderColours = ['#329342', '#9e202c', '#f47933', '#811f5a', '#11496c'],
    fillColours = ['#74ae3d', '#d01f27', '#eaa337', '#32133f', '#2c7aa1'],
    triangles = [],
    border, fill, st, i;

for (i = 0; i < 5; i++) {
    border = paper.path(getPercentPath(0)).attr({
        'fill': borderColours[i],
            'stroke-width': 0
    }),
    fill = paper.path(["M", 116, 123] + "l-44,61 88,0z").attr({
        'stroke': fillColours[i],
            'stroke-width': 6
    });
    triangles.push(border);

    st = paper.set();
    st.push(border, fill);
    st.rotate(i * 72, 116, 113);

    setPercent(i, 30 + Math.floor(Math.random() * 70));
}

function getPercentPath(percent) {
    var ratio = percent / 100;
    return ["M", 116, 128] + "l-" + ratio * fullNum[0] + "," + ratio * fullNum[1] + " " + ratio * fullNum[0] * 2 + ",0z";
}

function setPercent(i, percent) {
    triangles[i].attr({
        path: getPercentPath(percent)
    });
}


setInterval(function () {
    for (var i = 0; i < 5; i++) {
        setPercent(i, 30 + Math.floor(Math.random() * 70));
    }
}, 2000);