diff --git a/README.md b/README.md index 4ccf16a..a64c07c 100644 --- a/README.md +++ b/README.md @@ -48,6 +48,18 @@ var plot = $.plot($('#plot'), [ data ], { 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: @@ -67,6 +79,9 @@ This plugin is based on [Joel Oughtons](https://github.com/oughton) ["Event Grap ## Versions +### 0.2.5 +* added function "setEvents" to dynamically add events (thx to callicles) + ### 0.2.4 * removed `console.log` diff --git a/bower.json b/bower.json index 93ac6f6..d72f37b 100644 --- a/bower.json +++ b/bower.json @@ -1,10 +1,11 @@ { "name": "flot-events", - "version": "0.2.4", + "version": "0.2.5", "homepage": "http://mojoaxel.github.io/flot-events", "authors": [ "Alexander Wunschik", - "Joel Oughton" + "Joel Oughton", + "Nicolas Joseph" ], "description": "Flot Charting Library Plugin to show Events-Markers", "main": "jquery.flot.events.js", diff --git a/example/index.html b/example/index.html index d8d26a1..2c9ef97 100644 --- a/example/index.html +++ b/example/index.html @@ -114,6 +114,17 @@ cursor: "move" } }); + + /* wait 5 seconds and dynamicaly add a new marker */ + setTimeout(function() { + plot.setEvents([{ + min: 2.5, + max: 2.5, + eventType: "Simple", + title: "dynamically added event", + description: "" + }]); + }, 5000); }); diff --git a/jquery.flot.events.js b/jquery.flot.events.js index 3b3b81d..55ae73f 100644 --- a/jquery.flot.events.js +++ b/jquery.flot.events.js @@ -2,10 +2,11 @@ * jquery.flot.events * * description: Flot plugin for adding events/markers to the plot - * version: 0.2.4 + * version: 0.2.5 * authors: * Alexander Wunschik * Joel Oughton + * Nicolas Joseph * * website: https://github.com/mojoaxel/flot-events * @@ -35,18 +36,18 @@ _position = position; _moveFunc(_object, _position); }; - } + }; /** * Event class that stores options (eventType, min, max, title, description) and the object to draw. */ var VisualEvent = function(options, drawableEvent){ - var _parent, - _options = options, + var _parent, + _options = options, _drawableEvent = drawableEvent, _hidden = false; - this.visual = function() { return _drawableEvent; } + this.visual = function() { return _drawableEvent; }; this.getOptions = function() { return _options; }; this.getParent = function() { return _parent; }; this.isHidden = function() { return _hidden; }; @@ -58,8 +59,7 @@ * A Class that handles the event-markers inside the given plot */ var EventMarkers = function(plot) { - var _events = [], - _eventsEnabled = false; + var _events = []; this._types = []; this._plot = plot; @@ -71,7 +71,7 @@ this.setTypes = function(types) { return this._types = types; - } + }; /** * create internal objects for the given events @@ -97,7 +97,6 @@ this.drawEvents = function() { var that = this; var o = this._plot.getPlotOffset(); - var pleft = o.left, pright = this._plot.width() - o.right; $.each(_events, function(index, event){ // check event is inside the graph range @@ -123,17 +122,17 @@ event.visual().moveTo({ top: top, left: left }); }); }; - + /** * remove all events from the plot */ - this._clearEvents = function(){ + this._clearEvents = function(){ $.each(_events, function(index, val) { val.visual().clear(); }); _events = []; }; - + /** * create a new DOM element for the tooltip */ @@ -155,7 +154,7 @@ "z-index": "999", "font-size": "smaller", "cursor": "move" - }) + }); $('
' + event.title + '
').appendTo($tooltip); $('
Type: ' + event.eventType + '
').appendTo($tooltip); @@ -265,8 +264,7 @@ "border-left-style": lineStyle, "border-left-color": color }) - .appendTo(container) - .hide(); + .appendTo(container); if (markerShow) { marker = $('
').css({ @@ -285,7 +283,7 @@ marker.css({ "top": top-markerSize-8 +"px", "border-top": "none", - "border-bottom": markerSize+"px solid " + color, + "border-bottom": markerSize+"px solid " + color }); } else { marker.css({ @@ -388,6 +386,13 @@ that.eventMarkers.drawEvents(); }; + + // change events on an existing plot + plot.setEvents = function(events){ + if (eventMarkers.eventsEnabled) { + eventMarkers.setupEvents(events); + } + }; plot.hooks.processOptions.push(function(plot, options){ // enable the plugin @@ -396,9 +401,8 @@ } }); - plot.hooks.draw.push(function(plot, canvascontext){ + plot.hooks.draw.push(function(plot){ var options = plot.getOptions(); - var xaxis = plot.getXAxes()[options.events.xaxis - 1]; if (eventMarkers.eventsEnabled) { // check for first run @@ -412,8 +416,7 @@ eventMarkers.drawEvents(); }); - - }; + } var defaultOptions = { events: { @@ -428,6 +431,6 @@ init: init, options: defaultOptions, name: "events", - version: "0.2.4" + version: "0.2.5" }); })(jQuery);