Flot Plugins – Event Graphics

Live Example
Github Code

This flot plugin adds customizable event support. Events graphics contain information that is shown in a popup when the user hovers over them.

This is all done using CSS and div tags.

The following documentation from the script shows the data structures used in the plugin. See it running live for an example of how it works.

 * Events are small icons drawn onto the graph that represent something happening at that time.
 *
 * This plugin adds the following options to flot:
 *
 * options = {
 *      events: {
 *          levels: int   // number of hierarchy levels
 *          data: [],     // array of event objects
 *          types: []     // array of icons
 *          xaxis: int    // the x axis to attach events to
 *      }
 *  };
 *
 *
 * An event is a javascript object in the following form:
 *
 * {
 *      min: startTime,
 *      max: endTime,
 *      eventType: "type",
 *      title: "event title",
 *      description: "event description"
 * }
 *
 * Types is an array of javascript objects in the following form:
 *
 * types: [
 *     {
 *         eventType: "eventType",
 *         level: hierarchicalLevel,
 *         icon: {
               image: "eventImage1.png",
 *             width: 10,
 *             height: 10
 *         }
 *     }
 *  ]

There are a few important points to mention.

The plugin adds two public methods to the flot API.

plot.showEvents(lvlRange)

plot.hideEvents(lvlRange)

Events can be given a hierarchy level. When evens are shown and hidden, a hierarchy range may be passed to the function which only hides or shows events that are in the range.

Event data is added into the flot options file like so:

options = {
…
events: {
data: []
}
}

See the live example to see how it works in more detail.