Toggle data series by clicking legend in flot chart?

Question

I have played a bit with flot.js for plotting some data, but I have quite a few data series, so the user might want to hide some series. One of flot's examples shows how to toggle data series by using checkboxes. I would like to make clicking the legend's little color box or the label, to toggle the visibility of that series. Is that possible?

Answer 1

Hi,

Here is an example that uses checkboxes http://people.iola.dk/olau/flot/examples/turning-series.html

It could be modified to place a click event on each legendLabel, but you would only be able to show one legend at a time.

using something like this in the ready function

$('.legendLabel').click(
function(d){
    var country = $(this).html().toLowerCase();
          var data = [  ];
    //alert( country );
    data.push( datasets[country] );

        if (data.length > 0)
            $.plot($("#placeholder"), data, {
                yaxis: { min: 0 },
                xaxis: { tickDecimals: 0 }
           }); 

}
);