javascriptjquerygraphflot

Persisting flot legend label checkbox on un-check


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

Before

After

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!


Solution

  • 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.