Flot Plugins – X Gap Threshold

Live Example
Github Code

You can insert breaks/gaps into a line graph drawn using Flot by inserting coordinate pairs that are set to null.

For example, from the Flot API:

If a null is specified as a point or if one of the coordinates is null or couldn’t be converted to a number, the point is ignored when drawing. As a special case, a null value for lines is interpreted as a line segment end, i.e. the points before and after the null value are not connected.

This works fine at breaking line graphs when the data has a detectable gap in it. That is, when x values have a greater distance between them that is predictable through the data measurement procedures.  For example, say we are polling networking data every 3 minutes, if there is a 6 minute gap between two x values then we should break the line graph at this point to indicate data loss.

While using Flot over summer, I found that breaking line graphs in this way is quite a common requirement. Particularly when working with time series data.

I developed plugin that automates adding null coordinates into the data series based on a given, x gap threshold value. The Flot plugin also allows the gaps to be highlighted in a given color to make them more obvious. Here is a screenshot of the ‘Hello World!’ example.

There is a small amount of configuration that is worth mentioning.

The plugin must be configured in the global x-axis options as well as for each individual series that a threshold needs to be set for. The global options enable the plugin and set the gap color. It may make sense to move all the options to the series in future versions so that gaps can be turned on and off and different colors can be used for each series. I leave this up to the reader to change if they require it

Global X-Axis Options:

xaxis: {
   insertGaps: true,  // enable or disable this plugin
   gapColor: rgba(100,100,100,0.2) // the color to use for gaps
}

Per-Series Options:

var series1 = {
  data: [ ... ],
  label: 'Series 1',
  xGapThresh: 300 // A value of 300 here indicates that a x-gap > 300 will insert a gap
}

Ask in the comments if you have any further questions and be sure to check the basic example.