I really like Flot by Ole Laursen and also the Pie chart addition by Sergey Nosenko.

For one project I needed to extend the legend to show the complete data table next to the chart.  Flot already has a labelFormatter option for the legend label so I added a labelColumnFormatter option which returns an array instead of a string.  Each element in the array becomes a table cell to the right of the color square.  Then I added a labelColumnStyler option which returns an array of corresponding styles.

For example, this pie_data is passed to Flot and pie_data_map  is used by labelColumnFormatter:

var pie_data = [

     { label: "Series 1",  data: 25},

     { label: "Series 2",  data: 100},

     { label: "Series 3",  data: 13},

     { label: "Series 4",  data: 43},

];

var pie_data_map {

     "Series 1": 25,

     "Series 2": 100,

     "Series 3": 13,

     "Series 4": 43

};

And these new options:

labelColumnFormatter: function(label) { return [label, pie_data_map[label]]; },

labelColumnStyler: function(label) { return ["", "text-align:right"]; },

Produce the following screenshot:

Here is my patch against FlotPie (flot 0.4 with Pie feature by Sergey):  flot-pie-0.4.patch

In my project the pie_data_map is automatically generated from pie_data but that code is not necessary for the example so I left it out here.

More about JavascriptProgramming