Dynamic Flot graph - show hide series by clicking on legend text or box on graph

Question

I am working on dynamic flot graph with 3 series. My need is to hide/show series when clicked on legend. I have seen different examples that will work fine for static graphs

Answer 1

You can provide legend clicks in a way that survives rerendering the graph like so:

HTML:

JS:

$('#graph').on('click', 'div.legend tr', function() {
    var tr = $(this);
    var index = tr.parent().find('tr').index(tr);
    // Do something with the fact they clicked item (index)
});

There's nothing stored in the legend marking what each row represents, so you'll need to bring that info in from someplace else - all the above code does is get you the index of the legend item clicked.

For usability you should tell the user this is clickable:

CSS:

#graph div.legend tr {
    cursor: pointer;
}