jqplot legend control per series. Series showLabel not working with EnhancedLegendRenderer

Question

I wish to selectively hide legends of some serie in a plot. And this http://www.jqplot.com/docs/files/jqplot-core-js.html#Series.showLabel looks to be the correct option for this.

But using series:{showLabel:false} with doesn't seem to work.

An open(old) ticket in this regard : https://bitbucket.org/cleonello/jqplot/issue/100/feature-request-individual-legend-control

Am I using it right? Any other workarounds to achieve this is also appreciated.

Update:

showLabel works fine with normal legendRenderer.

Answer 1

Add this line below your jqplot:

$($("#chartXXX .jqplot-table-legend").get(0)).hide();

Play around with the number inside get(), as I am not exactly sure how the number is mapped to the legend elements. This solution is much more elegant than changing the enhancedLegendRenderer code.

Answer 2

In the draw function in the file jqplot.enhancedLegendRenderer.js we see this at about line 132:

if (idx < series.length && (series[idx].show || series[idx].showLabel)){

For context, this bit of code is part of the functionality that creates the legend table. A row is created if either the series is set to be shown (default is true) or the series label is to be show. This means that to prevent a legend item being created for a series, you would need to hide the entire series itself, as well as setting showLabel to false, which isn't ideal.

Instead, try setting the || to && - this worked in my case. Try making the change on the unminified version first.

Edit:

First thing to do is to make the change I suggested in my original answer.

Next, we need to prevent the tr elements in the legend from being created if showLabel is false. Just prior to the if-statement mentioned above, you will see this code:

tr = $(document.createElement('tr'));
tr.addClass('jqplot-table-legend');
if (reverse){
    tr.prependTo(this._elem);
}
else{
    tr.appendTo(this._elem);
}

Change it to this (all we are doing here is wrapping it in the same if-statement we used before):

if (idx < series.length && (series[idx].show && series[idx].showLabel)){
    tr = $(document.createElement('tr'));
    tr.addClass('jqplot-table-legend');
    if (reverse){
        tr.prependTo(this._elem);
    }
    else{
        tr.appendTo(this._elem);
    }
}

Scroll down some more (about line 212) and you will see the following code:

if (this.showLabels)  {
    console.log(this._elem.find('tr').length - 1);
    td2.bind('click', {series:s, speed:speed, plot: plot, replot:this.seriesToggleReplot }, handleToggle);
    td2.addClass('jqplot-seriesToggle');
}

This is binding the event handler for when one of the series is clicked in the legend. What we need to do is add an additional property to the object literal that encapsulates the data that is passed to the click method:

td2.bind('click', {series:s, speed:speed, plot: plot,
    replot:this.seriesToggleReplot,
    trIndex: this._elem.find('tr').length - 1 }, handleToggle);

trIndex represents the actual index of the row in the HTML table. It is this that ensures the legend will strike off the correct element.

Inside the doLegendToggle declaration, you will see code like this:

if (s.canvas._elem.is(':hidden') || !s.show) {
    // Not sure if there is a better way to check for showSwatches and showLabels === true.
    // Test for "undefined" since default values for both showSwatches and showLables is true.
    if (typeof plot.options.legend.showSwatches === 'undefined' || plot.options.legend.showSwatches === true) {
        plot.legend._elem.find('td').eq(sidx * 2).addClass('jqplot-series-hidden');
    }
    if (typeof plot.options.legend.showLabels === 'undefined' || plot.options.legend.showLabels === true) {
        plot.legend._elem.find('td').eq((sidx * 2) + 1).addClass('jqplot-series-hidden');
    }
}
else {
    if (typeof plot.options.legend.showSwatches === 'undefined' || plot.options.legend.showSwatches === true) {
        plot.legend._elem.find('td').eq(sidx * 2).removeClass('jqplot-series-hidden');
    }
    if (typeof plot.options.legend.showLabels === 'undefined' || plot.options.legend.showLabels === true) {
        plot.legend._elem.find('td').eq((sidx * 2) + 1).removeClass('jqplot-series-hidden');
    }
}

See those four references to the sidx variable, change them so that the code is instead using the trIndex variable. To do this, replace the four sidx references with d.trIndex.