Question

I need a pie chart and found Flot. It looks simple and powerful, but all of the examples I have found describe the “data” using fixed values (e.g. [1,2]) but I need to show dynamic data. I have five variables that must ultimately add up to 100. I want to include only those that have a value > 0, and if they don’t total to 100, I want to add an element that shows the missing percent. The problem is that I don’t know how to dynamically construct the data parameter.

My code is below. There are two problems with it:
1) The $.plot does nothing – no error and no grapy
2) I don’t know how to add the label text

function updatePieChart() {
    var total = 0;
    var data = new Array();
    var verb = "";
    var dataIndex = 0;

    for (var dataIndex = 0; dataIndex < 5; dataIndex++) {
        var duty = "DUTY_" + (dataIndex + 1);
        var d = getData(duty + "_PERCENTAGETIMESPENT");
        if (isNumeric(d)) {
            d = parseInt(d);
            if (d > 0) {
                total += d;
                data[dataIndex] = new Array();
                data[dataIndex].push(d);
                verb = getData(duty + "_SKILL");
                if (verb == "") verb = duty + dataIndex;
                log(duty + dataIndex + ' value: ' + d);
            }
        }
    }

    var count = data.length;
    if (total != 100) {
        if (total < 100) {
            var missingDataNum = 100 - total;
            data[count] = new Array();
            data[count].push(missingDataNum);
            verb = '**MISSING**';
            log(verb + missingDataNum);
        }
    }

    $.plot($('#pieChart'), data,
        {
        series: {
            pie: {
                show: true,
            }
        },
        legend: {
            show: false
        }
    });
}

Answer 1

Fixed. See What is the format of jQuery Flot data when passing in the data as variables. Problem was that I wasn’t formatting the data object as a jSON object correctly.