flot-events

Flot Charting Library Plugin to show Events-Markers

Interactive Example

• Open Demo
• Show example source

Docs

var types = [{
  eventType: "Info",
  color: "blue"
}, {
  eventType: "Critical",
  color: "red", // e.g red, #F00, #FF0000, [gray]
  position: 'BOTTOM', //[TOP], BOTTOM
  lineStyle: 'solid', //dotted, [dashed], solid
  lineWidth: 2, //[1]px
  markerSize: 10, //in px, [5]
  markerShow: true, // [true], false
  markerTooltip: true // [true], false 
}];

var events = [{
  min: 1,
  max: 1,
  eventType: "Info",
  title: "Info Event",
  description: "At position x=1 something happend!"
}, {
  min: 2,
  max: 3,
  eventType: "Critical",
  title: "Critical region",
  description: "Between x=2..3 something is critical"
}];

var plot = $.plot($('#plot'), [ data ], {
  /* this activates the events plugin and sets options */
  events: {
    data: events,
    types: types
  },
  /* optional for range highlighting; depends on jquery.flot.selection.*/
  selection: {
    color: "#e8cfac"
  },
});

/* It is also possible to add events dynamically 
 * after initialization by using the setEvents function 
 */
$('button').click(function() {
	plot.setEvents([{
		min: 2.5,
		max: 2.5,
		eventType: "Simple",
		title: "dynamically added event"
	}]);
});

This plugin is tested to work together with these plugins:

• jquery.flot.axislabels
• jquery.flot.canvas
• jquery.flot.downsample
• jquery.flot.tooltip
• jquery.flot.time
• jquery.flot.selection
• jquery.flot.navigate

License

Dual licensed under MIT and GPLv2 This plugin is based on Joel Oughtons "Event Graphics" plugin from his flot-plugin-collection witch is also licensed under MIT and GPLv2.

Versions

0.2.5

• added function "setEvents" to dynamically add events (thx to callicles)

0.2.4

• removed console.log

0.2.3

• added option "markerTooltip" with default true

0.2.2

• added option "markerShow" with default true
• added option "lineWidth" with default 1

0.2.1

• registered with bower

0.2.0

• first release