Question

I have a scenario where I want to toggle series based on checkbox selection. I have added the checkbox to the legend using labelFormatting in legend option like:

     var otherOptions = {
                           legend: {
                                     container: legend,
                                     labelFormatter: function (label, series) {
                                        var cb = '<input type="checkbox" name="' + label + '" checked="checked" id="id' + label + '"> ' + label;
                                        return cb;
                                     }
                            },
                         };  

And I have added the click event for the legend so that I can manipulate the series based on checked items. It all works fine except when I uncheck a label in legend, on re-draw it removes that series line from the legend as well. So for ex., below is the before and after image:

Before

After

Notice that in after image "USA" checkbox is missing.
Is there any way I can still show the unchecked "USA" checkbox in legend?

I looked at the suggestion here: flot graph, use legend to turn on/off series

But the only problem is that I don’t want to have legend AND checkbox legend separate. The question on the given link was answered 1+ year ago so I thought I am gonna take a chance and ask the question again in case someone knows a way to do this.

Please let me know.

Thanks!

Answer 1

Instead of removing the series all together if the checkbox is unchecked, add it with empty data.

Something like this:

function plotByChoice(doAll)
{
  $('#legend .legendCB').each(
   function(){
     if (this.checked)
     {         
       data.push(datasets[someLabel]);
     }
     else
     {
       data.push({label: someLabel, data: []})
     }        
   }
 );

 // plot call etc...
}  

Working fiddle is here.