// utility - generates random color
function getColor() {
    var rgb = [];
    for (var i = 0; i < 3; i++) {
        rgb[i] = Math.round(100 * Math.random() + 155) ; // [155-255] = lighter colors
    }
    return 'rgb(' + rgb.join(',') + ')';
}


// source data table and canvas tag
var data_table = document.getElementById('votedata');
var canvas = document.getElementById('canvas');
var td_index = 1; // which TD contains the data

var tds, data = [], color, colors = [], value = 0, total = 0;
var trs = data_table.getElementsByTagName('tr'); // all TRs
for (var i = 0; i < trs.length; i++) {
    tds = trs[i].getElementsByTagName('td'); // all TDs

    if (tds.length === 0) continue; //  no TDs here, move on

    // get the value, update total
    value  = parseFloat(tds[td_index].innerHTML);
    data[data.length] = value;
    total += value;

    // random color
    color = getColor();
    colors[colors.length] = color; // save for later
    trs[i].style.backgroundColor = color; // color this TR
}


// get canvas context, determine radius and center
var ctx = canvas.getContext('2d');
var canvas_size = [canvas.width, canvas.height];
var radius = Math.min(canvas_size[0], canvas_size[1]) / 2;
var center = [canvas_size[0]/2, canvas_size[1]/2];

var sofar = 0; // keep track of progress
// loop the data[]
for (var piece in data) {

    var thisvalue = data[piece] / total;

    ctx.beginPath();
    ctx.moveTo(center[0], center[1]); // center of the pie
    ctx.arc(  // draw next arc
        center[0],
        center[1],
        radius,
        Math.PI * (- 0.5 + 2 * sofar), // -0.5 sets set the start to be top
        Math.PI * (- 0.5 + 2 * (sofar + thisvalue)),
        false
    );

    ctx.lineTo(center[0], center[1]); // line back to the center
    ctx.closePath();
    ctx.fillStyle = colors[piece];    // color
    ctx.fill();

    sofar += thisvalue; // increment progress tracker
}