Fixing jqPlot chart to toggle (show and hide) slices in Pie charts.

I found a question on stackoverflow where one guy found out that the enhancedLegendRenderer plugin didn’t work with jqPlot Pie Charts. He also posted a jsFiddle example where you can show/hide lines in the Line chart by clicking on legend items, but it doesn’t work with the Pie chart. I decided to investigate why it happens.

By looking at jqPlot source code I found out that the EnhancedLegendRenderer generates items 1:1 to chart series.

    if (idx < series.length) {
        s = series[idx];

Let’s look at the example. The Line chart with 6 lines has 6 series (series.length = 6).

data.push([[1,1.0] , [2,6.0] , [3,9.0] , [4,8.0]]); // #1
data.push([[1,4.0] , [2,3.0] , [3,1.0] , [4,2.0]]); // #2
data.push([[1,6.0] , [2,2.0] , [3,4.0] , [4,1.0]]); // #3
data.push([[1,1.0] , [2,2.0] , [3,3.0] , [4,4.0]]); // #4
data.push([[1,4.0] , [2,3.0] , [3,2.0] , [4,1.0]]); // #5
data.push([[1,8.0] , [2,2.0] , [3,6.0] , [4,3.0]]); // #6

But the Pie chart has only 1 series (series.length = 1).

[['Sony',7], ['Samsung',13.3], ['LG',14.7], ['Vizio',5.2], ['Insignia', 1.2]]; // #1

The EnhancedLegendRenderer would generate only 1 item for the Pie chart. This wouldn’t look good,and jqPlot automatically disabled EnhancedLegendRenderer and applied PieLegendRenderer instead which doesn’t have much functionality.

I rewrote this renderer for Pie charts and called it EnhancedPieLegendRenderer. Here is the final result:

jqplot pie chart with enhanced legend

The link to fixed *.js files will be posted at the end of this article.
Read more of this post