CODEWITHSUNDEEP
javascriptjqueryflot
Alok Singhal
Alok Singhal

Reputation: 96131

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

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

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!

Upvotes: 0

Views: 2043

Answers (2)

Casper S
Casper S

Reputation: 49

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.

Upvotes: 0

Ryley
Ryley

Reputation: 21226

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;

Upvotes: 1

Related Questions