Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Toggle data series by clicking legend in flot chart?

Tags:

jquery

flot

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?

like image 616
pojo Avatar asked Nov 11 '09 13:11

pojo


1 Answers

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 }
           }); 

}
); 
like image 123
P4ul Avatar answered Nov 09 '22 00:11

P4ul