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

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"
	}]);
});
});