What method would be best to build this complex graph

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:

<div id="pentagon"></div>

I'd have to recommend RaphaelJS (see http://raphaeljs.com/). It is IE7 compatible, and you can do the triangles just fine: you need to do the math, but quite possible.

EDIT: look at http://www.chittram.com/editor.jsp for a quick sample of some of the shapes that can be done. That site is an interactive editor but the core capabilities you need are demonstrated.

What about <canvas>?You can easily draw one triangle and then draw the others by just rotating the canvas 360/5 degrees.

Example: http://jsfiddle.net/Stijntjhe/dC6kX/

window.onload = function() {    var ce = document.getElementById('ce');    var c = ce.getContext('2d');    c.translate(ce.offsetWidth / 2, ce.offsetHeight / 2);    for(var pie = 0; pie < 5; pie++) {        c.save();        c.rotate(pie/5 * Math.PI * 2);        c.beginPath();        c.moveTo(0, -10);        c.lineTo(-50, -80);        c.lineTo(50, -80);        c.lineTo(0, -10);        c.lineWidth = 5;        c.lineCap = 'square';        c.strokeStyle = colors[pie];        c.stroke();        c.restore();    } }

Becomes:

Cons:Maybe not cross-browser yet.