What method would be best to build this complex graph

Question

After 15 years doing UI development, there\'s very little I look at and think, \"how on earth do I do that.\" This is one of those times.

A graphic designer has sold

Answer 1

Unless I could find an implementation already written, I'd use Raphaël.

It will take significant work, but the end result should be very good.

Take a look at some of the demos, they're incredibly slick.

Raphaël currently supports Firefox 3.0+, Safari 3.0+, Chrome 5.0+, Opera 9.5+ and Internet Explorer 6.0+.

---

This seemed interesting, so I decided to implement it myself with Raphaël:

See: http://jsfiddle.net/2Tsjy/

It should work in "all browsers". The only part I didn't do was the text.

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);

CSS:

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

HTML: