15

I have an issue I can't seem to track down. I am using Flot to graph some data, super easy. I want to add the hover effect you see here: Flot Example

Unfortunately, under no circumstance can I get the 'plothover' event to fire. This is a brief snippet from the code:

$.plot($chartArea, eventData, eventOptions);

$chartArea.bind("plothover", function (event, pos, item) {
    console.log('hovering!');
});

Is there something you need to set in the options object to enable this behavior? Thanks!

gabaum10
  • 3,769
  • 3
  • 48
  • 89
  • could you show us a workable example of your code on jsfiddle perhaps? It's much easier to spot problems that way. – Aidanc Apr 16 '12 at 21:17
  • You're right, but as soon as I posted this, I realized I forgot something, check out my answer... – gabaum10 Apr 16 '12 at 21:18

2 Answers2

43

Like an idiot, I forgot to include the grid option. Check out the object:

eventOptions = {
   points: {
        show: true
    },
    lines: {
        show: true
    },
    grid: { hoverable: true, clickable: true },
    xaxis: {
        min:earliestMessage.timestamp,
        max:currentTime,
        mode:"time",
        ticks:10
    }
};

notice the grid parameter. That's what was missing. Duh!

:)

gabaum10
  • 3,769
  • 3
  • 48
  • 89
  • Thanks, had the same issue with "plotclick" event, until I realised that I had set grid clickable to false! – Jerry Jan 20 '15 at 12:14
2

I'm not sure what $chartArea is in your code, but lets try something like this:

var chartArea = $("#placeholder"); // your chart div

$.plot(chartArea, eventData, eventOptions);

$(chartArea).bind("plothover", function (event, pos, item) {
    console.log('hovering!');
});
hagope
  • 5,523
  • 7
  • 38
  • 52
  • is works for me,what is the difference between giving id name and giving the element name. – bula Nov 11 '14 at 19:59