flot.js: Customizing legend

Question

How can I customize the legend on flot.pie.js?

I have the following code:

var options = { 
            series: { 
                pie: {
                    show: true
                },
                legend: {
                    show: true,
                    label: {
                        show: true,
                        formatter: function(label, series){
                            return '<div style="font-size:8pt;text-align:center;padding:2px;">' + label + ' ' + Math.round(series.percent)+'%</div>';
                        }
                    }
                }
            }
        }; 

That's not working though, I think I'm making up the legend part... What I want is to show the values on the legend. How can I do that?

Answer 1

Simply add the data value to your series label. You didn't show your data, so imagine that your data looks like this:

var data = [
    {
    label: "Good",
    data: 10},
{
    label: "Bad",
    data: 30 },
{
    label: "Ugly",
    data: 90},
];

Then you could use this code to append the data value to each label:

for (var i=0;i<data.length;i++){
    data[i].label+=' ('+data[i].data+')'
}

Here is how it would look: http://jsfiddle.net/ryleyb/p8fzS/