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 my clients on a very complex graph in the shape of a pentagon, made up of 5 individual triangles. The designer has specified that each triangle should be a specific color to match the branding, and each should “fill” based on the percentage of the process that each color represents. You almost have to see the image to understand:

I’ve been racking my brain for a day trying to figure out how to accomplish this task. The client has specified that it must be compatible in all major browsers, which I’m going to tell him will be IE7+ for sanity’s sake. That heavily limits CSS3 techniques, though I’d certainly entertain CSS3 methods for lack of other ideas. I’d prefer not to be up late nights beating on Action Script, so Flash is at the very bottom of my wish list. I’ve actually brainstormed how to do it using Sprites, but the idea of producing 250 or 500 triangles and the associated CSS ranks right up there with trading Chrome for IE6.

The site is built on PHP/MySQL, and we heavily use Jquery. We have a full version of FusionCharts and HighCharts at our disposal as well if necessary. If there’s a commercial product out there that can achieve this, I’m certainly willing to purchase it to make this work.

What is the best method to achieve this difficult task?

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:

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