https://github.com/mojoaxel/flot-events

Show (Event) Markers. Plugin for flot charts.
https://github.com/mojoaxel/flot-events

flot flot-charts flot-events hacktoberfest markers

Last synced: 3 months ago
JSON representation

Show (Event) Markers. Plugin for flot charts.

• Host: GitHub
• URL: https://github.com/mojoaxel/flot-events
• Owner: mojoaxel
• Created: 2015-02-10T14:30:19.000Z (almost 10 years ago)
• Default Branch: master
• Last Pushed: 2019-11-15T10:27:35.000Z (about 5 years ago)
• Last Synced: 2024-10-14T14:58:48.177Z (3 months ago)
• Topics: flot, flot-charts, flot-events, hacktoberfest, markers
• Language: JavaScript
• Homepage: http://mojoaxel.github.io/flot-events
• Size: 67.4 KB
• Stars: 4
• Watchers: 3
• Forks: 3
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml

Awesome Lists containing this project

README

        
# flot-events

Flot Charting Library Plugin to show Events-Markers

## Interactive Example

* [Open Demo](./example/)

* [Show example source](https://github.com/mojoaxel/flot-events/blob/master/example/index.html)

## Docs

```javascript

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](http://opensource.org/licenses/MIT) and [GPLv2](http://opensource.org/licenses/gpl-2.0.php)

This plugin is based on [Joel Oughtons](https://github.com/oughton) ["Event Graphics" plugin](http://joeloughton.com/blog/web-applications/flot-plugins-event-graphics/) from his [flot-plugin-collection](https://github.com/oughton/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