flot: zoom, hover and series selection in the same plot

Question

I am trying to plot 3 different series on the same plot. I want to do the following in the plot:

allow the user to select which series are plotted ("Turning series on/off" example on the flot website),
allow the user to zoom in and zoom out ("Rectangular selection with zooming" example),
show the values of the curves when the user hovers the mouse ("Tracking curves" example).

I have been trying to make it work for a long time now, and I can't get everything to work. My current attempt fails to properly turn series on/off. As soon as I check a box, the graph becomes blank. The javascript file which defines all the plotting functions etc., is plot_displacement.js.

The relevant part of the code is:

var choice_container = jQuery("#choices");
choice_container.find("input").change(do_plot);

The HTML is:

<p id="choices">Show:</p> 
<div id="plotdiv" style="width:600px;height:300px;position:static;"></div>

I am using change and not click because of this question's answer. If I use click, then selecting/unselecting the checkboxes doesn't seem to have any effect.

I am sure I am overlooking something simple, but I can't figure out what. I would love to be able to do all the 3 things that I am trying to do in flot.

Thanks!

Ryley · Accepted Answer · 2012-03-27T20:07:05.140

Your problem is simply that do_plot is being called from your change event with xmin being a jQuery Event object. You expect it to be undefined and then set to 0, but instead you're passing xmin: jQuery.Event to flot, which doesn't know what to do with it.

Edit: Since someone asked, the actual code you might want to put in there, when checking if xmin is undefined, additionally check whether it is an object (jQuery.Event has a typeof object):

    if (typeof(xmin) == 'undefined' || typeof(xmin) == 'object') xmin = 0;

score 0 · Answer 2 · answered Oct 02 '13 at 22:44

Click does work for me.

I use the code from the Flot example:

$("#checkboxes").find("input").click(plotAccordingToChoices);

Clicking the checkboxes calls:

function plotAccordingToChoices() {
    var data = [];

    $("#checkboxes").find("input:checked").each(function () {
        var key = $(this).attr("name");
        if (key && datasets[key])
            data.push(datasets[key]);
    });

    if (data.length > 0){
        plot = $.plot($("#chart1"), data, options);
    }
}

datasets is a global array keyed by the set name and was created at initialization.

flot: zoom, hover and series selection in the same plot

2 Answers2