added option "markerShow" and "lineWidth"

mojoaxel · Mar 1, 2015 · 2955623 · 2955623
1 parent 2dc136e
commit 2955623
Show file tree

Hide file tree

Showing 3 changed files with 91 additions and 73 deletions.
diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "flot-events",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "homepage": "http://mojoaxel.github.io/flot-events",
   "authors": [
     "Alexander Wunschik",

diff --git a/example/index.html b/example/index.html
@@ -41,14 +41,17 @@
 		var series = [serie1];
 
 		var types = [{
-			eventType: "Info",
-			color: "blue"
+			eventType: "Simple",
+			color: "blue",
+			markerShow: false, // [true], false
 		}, {
 			eventType: "CriticalPoint",
-			color: "red", // e.g red, #F00, #FF0000
-			markerSize: 10, //in px
+			color: "green", // e.g red, #F00, #FF0000
+			markerSize: 10, //[5]px
+			markerShow: true, // [true], false
 			position: 'BOTTOM', //[TOP], BOTTOM
-			lineStyle: 'solid' //dotted, [dashed], solid
+			lineStyle: 'solid', //dotted, [dashed], solid
+			lineWidth: 2 //[1]px
 		}, {
 			eventType: "InflectionPoint",
 			color: "gray"
@@ -57,9 +60,9 @@
 		var events = [{
 			min: 1.5,
 			max: 1.5,
-			eventType: "Info",
-			title: "Near Maxima",
-			description: "This point is near the maxima. The tangent at this point is nearly hotizontal."
+			eventType: "Simple",
+			title: "Hidden",
+			description: "This description is never shown because markerShow is false for this type"
 		}, {
 			min: Math.PI,
 			max: Math.PI*1.5,

diff --git a/jquery.flot.events.js b/jquery.flot.events.js
@@ -2,7 +2,7 @@
  * jquery.flot.events
  * 
  * description: Flot plugin for adding events/markers to the plot
- * version: 0.2.1
+ * version: 0.2.2
  * authors: 
  *    Alexander Wunschik <alex@wunschik.net>
  *    Joel Oughton <joeloughton@gmail.com>
@@ -164,7 +164,6 @@
 			// check if the tooltip reaches outside the window			
 			var width = $tooltip.width();
 			if (x+width > window.innerWidth) {
-				console.log(x, width, window.innerWidth);
 				x = x-width;
 				$tooltip.css({
 					left: x
@@ -198,7 +197,9 @@
 				div, 
 				color,
 				markerSize,
-				lineStyle;
+				markerShow,
+				lineStyle,
+				lineWidth;
 
 			// determine the y axis used
 			if (axes.yaxis && axes.yaxis.used) yaxis = axes.yaxis;
@@ -225,12 +226,24 @@
 				markerSize = this._types[eventTypeId].markerSize;
 			}
 
+			if (this._types == null || !this._types[eventTypeId] || this._types[eventTypeId].markerShow === undefined) {
+				markerShow = true;
+			} else {
+				markerShow = this._types[eventTypeId].markerShow;
+			}
+
 			if (this._types == null || !this._types[eventTypeId] || !this._types[eventTypeId].lineStyle) {
 				lineStyle = 'dashed'; //default line style
 			} else {
 				lineStyle = this._types[eventTypeId].lineStyle.toLowerCase();
 			}
 
+			if (this._types == null || !this._types[eventTypeId] || this._types[eventTypeId].lineWidth === undefined) {
+				lineWidth = 1; //default line width
+			} else {
+				lineWidth = this._types[eventTypeId].lineWidth;
+			}
+
 
 			top = o.top + this._plot.height();
 			left = xaxis.p2c(event.min) + o.left;
@@ -240,76 +253,78 @@
 					"opacity": 0.8,
 					"left": left + 'px',
 					"top": 8,
-					"width": "1px",
+					"width": lineWidth + "px",
 					"height": this._plot.height(),
-					"border-left-width": "1px",
+					"border-left-width": lineWidth + "px",
 					"border-left-style": lineStyle,
 					"border-left-color": color
 				})
 				.appendTo(container)
 				.hide();
 
-			marker = $('<div class="events_marker"></div>').css({
-					"position": "absolute",
-					"left": -markerSize-1+"px",
-					"cursor": "help",
-					"font-size": 0,
-					"line-height": 0,
-					"width": 0,
-					"height": 0, 
-					"border-left": markerSize+"px solid transparent",
-					"border-right": markerSize+"px solid transparent"
-				})
-				.appendTo(line);
-
-			if (this._types[eventTypeId] && this._types[eventTypeId].position && this._types[eventTypeId].position.toUpperCase() === 'BOTTOM') {
-				marker.css({
-					"top": top-markerSize-8 +"px",
-					"border-top": "none",
-					"border-bottom": markerSize+"px solid " + color,
-				});
-			} else {
-				marker.css({
-					"top": "0px",
-					"border-top": markerSize+"px solid " + color,
-					"border-bottom": "none"
-				});
-			}
-
-			marker.data({
-				"event": event
-			});
-
-			var mouseenter = function(){
-				var pos = $(this).offset();
-				if (that._types[eventTypeId] && 
-					that._types[eventTypeId].position && 
-					that._types[eventTypeId].position.toUpperCase() === 'BOTTOM') {
-					pos.top -= 150;
-				}
-
-				that._createTooltip(pos.left, pos.top, $(this).data("event"));
+			if (markerShow) {
+				marker = $('<div class="events_marker"></div>').css({
+						"position": "absolute",
+						"left": (-markerSize-Math.round(lineWidth/2)) + "px",
+						"cursor": "help",
+						"font-size": 0,
+						"line-height": 0,
+						"width": 0,
+						"height": 0, 
+						"border-left": markerSize+"px solid transparent",
+						"border-right": markerSize+"px solid transparent"
+					})
+					.appendTo(line);
 
-				if (event.min != event.max) {
-					that._plot.setSelection({
-						xaxis: {
-							from: event.min,
-							to: event.max
-						},
-						yaxis: {
-							from: yaxis.min,
-							to: yaxis.max
-						}
+				if (this._types[eventTypeId] && this._types[eventTypeId].position && this._types[eventTypeId].position.toUpperCase() === 'BOTTOM') {
+					marker.css({
+						"top": top-markerSize-8 +"px",
+						"border-top": "none",
+						"border-bottom": markerSize+"px solid " + color,
+					});
+				} else {
+					marker.css({
+						"top": "0px",
+						"border-top": markerSize+"px solid " + color,
+						"border-bottom": "none"
 					});
 				}
-			};
-
-			var mouseleave = function(){
-				that._deleteTooltip();
-				that._plot.clearSelection();
-			};
-
-			marker.hover(mouseenter, mouseleave);
+
+				marker.data({
+					"event": event
+				});
+
+				var mouseenter = function(){
+					var pos = $(this).offset();
+					if (that._types[eventTypeId] && 
+						that._types[eventTypeId].position && 
+						that._types[eventTypeId].position.toUpperCase() === 'BOTTOM') {
+						pos.top -= 150;
+					}
+
+					that._createTooltip(pos.left, pos.top, $(this).data("event"));
+
+					if (event.min != event.max) {
+						that._plot.setSelection({
+							xaxis: {
+								from: event.min,
+								to: event.max
+							},
+							yaxis: {
+								from: yaxis.min,
+								to: yaxis.max
+							}
+						});
+					}
+				};
+
+				var mouseleave = function(){
+					that._deleteTooltip();
+					that._plot.clearSelection();
+				};
+
+				marker.hover(mouseenter, mouseleave);
+			}
 
 			var drawableEvent = new DrawableEvent(
 				line,
@@ -405,6 +420,6 @@
 		init: init,
 		options: defaultOptions,
 		name: "events",
-		version: "0.2.1"
+		version: "0.2.2"
 	});
 })(jQuery);