Clickable event support for Flot

I am in the process of developing a plugin for ‘Flot’ – the pure Javascript plotting library for jQuery.

The plugin needs to add functionality to Flot that allows clickable (or hoverable) events to be overlaid on the graph. An event is a certain occurrence that occurs at a specific time or range of time.

This is what I have so far:

The event pins and tooltip currently are divs overlaid on flot’s div after it has been drawn. JQuery UI has a nice bounce feature that lets you bounce the red pins as a one liner:

$('#someDiv').effect("bounce", { times:3 }, 300);

This bounces ‘someDiv’ 3 times in the period of 300ms. I came across an issue with firefox using this code. When the div finishes bouncing, the ‘mouseenter’ and ‘mouseover’ events are again triggered. This leads to the bounce animation being repeated if you place this code inside a mouse over event as I did. Interestingly enough, this does not happen in Chrome and Safari.

Here is the workaround I used for firefox.

div.hover(
   // mouseenter
   function () {
      // check if the mouse is not already over the event
      if ($(this).data("bouncing") == false ||
          $(this).data("bouncing") == undefined) {

          // check the div is not already bouncing
            $(this).effect("bounce", { times:3 }, 300);
            $(this).data("bouncing", true);
      }
    },
    // mouseleave
    function () {
      $(this).data("bouncing", false);
    }
);

Oh the joys of cross browser support.

This is working well so far. The problem is that I need some way of visualizing many more events on the same size graph. I am not sure how I will tackle this yet. I have set up a hierarchical structure to allow only events of specific importance to be shown at one point in time. I need to reduce the size of the red pins, or more likely, look at a different way of visualizing the events.

About oughton

A software / web applications developer, living in Hamilton and currently studying at Waikato University.
This entry was posted in Web Applications. Bookmark the permalink.

2 Responses to Clickable event support for Flot

  1. Madhu says:

    Hello,

    Is there a way to draw those pins on the lines vs the axis

    • oughton says:

      Yes. The current version on Github doesn’t do this, but it wouldn’t be hard to add in support yourself.

      It would just be a matter of altering the drawing to happen at the right y-coordinate as well as x-coordinate.

      If you want to support graphs with multiple series, then you will also need to modify the data structure to include the series each event relates to.

      Eg:

      series: flotDataSeries
      min: startTime,
      max: endTime,
      eventType: “type”,
      title: “event title”,
      description: “event description”

Leave a Reply

Your email address will not be published. Required fields are marked *


× one = 8

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>