Geek Answers Handbook

Switch a series of data by clicking on a legendary map?

I played a bit with flot.js to build some data, but I have quite a lot of data series, so the user may want to hide some series. One fleet example shows how to switch data series using checkboxes. I would like to click on a legend a small box or shortcut to switch the visibility of this series. Is it possible?

+6
jquery flot
source share
2 answers

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

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

using something like this in a finished 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 } }); } );
+4
source share

I just go back to programming and am not too familiar with ajax and the like, so I implemented my solution using javascript. You can use logic to do what you are looking for.

 <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>
0
source share

More articles:


All Articles