6

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?

pojo
  • 5,892
  • 9
  • 35
  • 47
  • I think I found the answer. http://groups.google.com/group/flot-graphs/browse_thread/thread/8c1e7c2426e47e08/5bd0129a88f92f06?lnk=gst&q=toggle+series#5bd0129a88f92f06 – pojo Nov 12 '09 at 07:54
  • see also http://stackoverflow.com/questions/4230945/flot-graph-use-legend-to-turn-on-off-series – ericslaw Sep 27 '11 at 19:45

2 Answers2

4

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

}
);
P4ul
  • 770
  • 5
  • 15
0

I am just getting back into programming and am not too familiar with ajax and the like, so I implemented my solution with javascript. You may be able to use to logic to do what you are seeking.

<html>
<head>
<script type="text/javascript">
<!--
    function toggle_visibility(id) {
       var e = document.getElementById(id);
       if(e.style.display == 'block')
          e.style.display = 'none';
       else
          e.style.display = 'block';
    }
//-->
</script>
</head>

<body>

<fieldset>
  <legend onclick="toggle_visibility('cm1');">Click Me</legend>
    <div id="cm1">
      <p>I toggle when the legend is clicked.</p>
      <p>But I'm a recalcitrant text node and refuse to toggle.</p>
    </div>
</fieldset>

<fieldset>
  <legend onclick="toggle_visibility('cm2');">Click Me 2</legend>
    <div id="cm2">
      <p>Toggle me too when the legend is clicked.</p>
      <p>But I'm a recalcitrant text node and refuse to toggle.</p>
    </div>
</fieldset>
</body>
</html>
Dr.EMG
  • 159
  • 10