flot-0.7-tooltip-0.4.4flot-0.7

author: Igor Sfiligoi <isfiligoi@ucsd.edu> 2013-11-08 13:00:05 -0500
committer: Igor Sfiligoi <isfiligoi@ucsd.edu> 2013-11-08 13:00:05 -0500
commit: 5bfc5fd33d0ee3d6456ae9a0fd786c60fc578d6f (patch)
tree: 9b214a0074961cbefc6699b440ee3951c1fb4c27
parent: f361d0498d284c6c7f3f366bf88e49b93e1245f0 (diff)
4 files changed, 147 insertions, 51 deletions
diff --git a/examples/index.html b/examples/index.html
deleted file mode 100644
index f24f750..0000000
--- a/examples/index.html
+++ /dev/null
@@ -1,44 +0,0 @@
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
-<html>
- <head>
-    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-    <title>Flot Examples</title>
-    <link href="layout.css" rel="stylesheet" type="text/css">
- </head>
- <body>
-    <h1>Flot Examples</h1>
-
-    <p>Here are some examples for <a href="http://code.google.com/p/flot/">Flot</a>, the Javascript charting library for jQuery:</p>
-
-    <ul>
-      <li><a href="basic.html">Basic example</a></li>
-      <li><a href="graph-types.html">Different graph types</a></li>
-      <li><a href="setting-options.html">Setting various options</a> and <a href="annotating.html">annotating a chart</a></li>
-      <li><a href="ajax.html">Updating graphs with AJAX</a> and <a href="realtime.html">real-time updates</a></li>
-    </ul>
-
-    <p>Being interactive:</p>
-    
-    <ul>
-      <li><a href="turning-series.html">Turning series on/off</a></li>
-      <li><a href="selection.html">Rectangular selection support and zooming</a> and <a href="zooming.html">zooming with overview</a> (both with selection plugin)</li>
-      <li><a href="interacting.html">Interacting with the data points</a></li>
-      <li><a href="navigate.html">Panning and zooming</a> (with navigation plugin)</li>
-      <li><a href="resize.html">Automatically redraw when window is resized</a> (with resize plugin)</li>
-    </ul>
-
-    <p>Various features:</p>
-    
-    <ul>
-      <li><a href="symbols.html">Using other symbols than circles for points</a> (with symbol plugin)</li>
-      <li><a href="time.html">Plotting time series</a> and <a href="visitors.html">visitors per day with zooming and weekends</a> (with selection plugin)</li>
-      <li><a href="multiple-axes.html">Multiple axes</a> and <a href="interacting-axes.html">interacting with the axes</a></li>
-      <li><a href="thresholding.html">Thresholding the data</a> (with threshold plugin)</li>
-      <li><a href="stacking.html">Stacked charts</a> (with stacking plugin)</li>
-      <li><a href="percentiles.html">Using filled areas to plot percentiles</a> (with fillbetween plugin)</li>
-      <li><a href="tracking.html">Tracking curves with crosshair</a> (with crosshair plugin)</li>
-      <li><a href="image.html">Plotting prerendered images</a> (with image plugin)</li>
-      <li><a href="pie.html">Pie charts</a> (with pie plugin)</li>
-    </ul>
- </body>
-</html>
diff --git a/jquery.flot.time.js b/jquery.flot.time.js
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/jquery.flot.time.js
diff --git a/jquery.flot.time.min.js b/jquery.flot.time.min.js
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/jquery.flot.time.min.js
diff --git a/jquery.flot.tooltip.min.js b/jquery.flot.tooltip.min.js
index 6b0461a..0fea51b 100644
--- a/jquery.flot.tooltip.min.js
+++ b/jquery.flot.tooltip.min.js
@@ -1,14 +1,154 @@
 /*
  * jquery.flot.tooltip
  *
- * desc:  create tooltip with values of hovered point on the graph, 
-          support many series, time mode, stacking and pie charts
-          you can set custom tip content (also with use of HTML tags) and precision of values
- * version: 0.4.4
- * author:  Krzysztof Urbas @krzysu [myviews.pl] with help of @ismyrnow
- * website: https://github.com/krzysu/flot.tooltip
+ * desc:	create tooltip with values of hovered point on the graph, 
+					support many series, time mode, stacking and pie charts
+					you can set custom tip content (also with use of HTML tags) and precision of values
+ * version:	0.4.4
+ * author: 	Krzysztof Urbas @krzysu [myviews.pl] with help of @ismyrnow
+ * website:	https://github.com/krzysu/flot.tooltip
  * 
  * released under MIT License, 2012
 */
 
-(function(a){var b={tooltip:false,tooltipOpts:{content:"%s | X: %x | Y: %y.2",dateFormat:"%y-%0m-%0d",shifts:{x:10,y:20},defaultTheme:true}};var c=function(b){var c={x:0,y:0};var d=b.getOptions();var e=function(a){c.x=a.x;c.y=a.y};var f=function(a){var b={x:0,y:0};b.x=a.pageX;b.y=a.pageY;e(b)};var g=function(b){var c=new Date(b);return a.plot.formatDate(c,d.tooltipOpts.dateFormat)};b.hooks.bindEvents.push(function(b,e){var i=d.tooltipOpts;var j=b.getPlaceholder();var k;if(d.tooltip===false)return;if(a("#flotTip").length>0){k=a("#flotTip")}else{k=a("<div />").attr("id","flotTip");k.appendTo("body").hide().css({position:"absolute"});if(i.defaultTheme){k.css({background:"#fff","z-index":"100",padding:"0.4em 0.6em","border-radius":"0.5em","font-size":"0.8em",border:"1px solid #111"})}}a(j).bind("plothover",function(a,b,e){if(e){var f;if(d.xaxis.mode==="time"||d.xaxes[0].mode==="time"){f=h(i.content,e,g)}else{f=h(i.content,e)}k.html(f).css({left:c.x+i.shifts.x,top:c.y+i.shifts.y}).show()}else{k.hide().html("")}});e.mousemove(f)});var h=function(a,b,c){var d=/%p\.{0,1}(\d{0,})/;var e=/%s/;var f=/%x\.{0,1}(\d{0,})/;var g=/%y\.{0,1}(\d{0,})/;if(typeof b.series.percent!=="undefined"){a=i(d,a,b.series.percent)}if(typeof b.series.label!=="undefined"){a=a.replace(e,b.series.label)}if(typeof c==="function"){a=a.replace(f,c(b.series.data[b.dataIndex][0]))}else if(typeof b.series.data[b.dataIndex][0]==="number"){a=i(f,a,b.series.data[b.dataIndex][0])}if(typeof b.series.data[b.dataIndex][1]==="number"){a=i(g,a,b.series.data[b.dataIndex][1])}return a};var i=function(a,b,c){var d;if(b.match(a)!=="null"){if(RegExp.$1!==""){d=RegExp.$1;c=c.toFixed(d)}b=b.replace(a,c)}return b}};a.plot.plugins.push({init:c,options:b,name:"tooltip",version:"0.4.4"})})(jQuery)
-\ No newline at end of file
+(function ($) {
+	var options = {
+		tooltip: false, //boolean
+		tooltipOpts: {
+			content: "%s | X: %x | Y: %y.2", //%s -> series label, %x -> X value, %y -> Y value, %x.2 -> precision of X value, %p -> percent
+			dateFormat: "%y-%0m-%0d",
+			shifts: {
+				x: 10,
+				y: 20
+			},
+			defaultTheme: true
+		}
+	};
+
+	var init = function(plot) {
+
+		var tipPosition = {x: 0, y: 0};
+		var opts = plot.getOptions();
+		
+		var updateTooltipPosition = function(pos) {
+			tipPosition.x = pos.x;
+			tipPosition.y = pos.y;
+		};
+		
+		var onMouseMove = function(e) {
+						
+			var pos = {x: 0, y: 0};
+
+			pos.x = e.pageX;
+			pos.y = e.pageY;
+
+			updateTooltipPosition(pos);
+		};
+		
+		var timestampToDate = function(tmst) {
+
+			var theDate = new Date(tmst);
+			
+			return $.plot.formatDate(theDate, opts.tooltipOpts.dateFormat);
+		};
+		
+		plot.hooks.bindEvents.push(function (plot, eventHolder) {
+            
+			var to = opts.tooltipOpts;
+			var placeholder = plot.getPlaceholder();
+			var $tip;
+			
+			if (opts.tooltip === false) return;
+
+			if( $('#flotTip').length > 0 ){
+				$tip = $('#flotTip');
+			}
+			else {
+				$tip = $('<div />').attr('id', 'flotTip');
+				$tip.appendTo('body').hide().css({position: 'absolute'});
+			
+				if(to.defaultTheme) {
+					$tip.css({
+						'background': '#fff',
+						'z-index': '100',
+						'padding': '0.4em 0.6em',
+						'border-radius': '0.5em',
+						'font-size': '0.8em',
+						'border': '1px solid #111'
+					});
+				}
+			}
+			
+			$(placeholder).bind("plothover", function (event, pos, item) {
+				if (item) {					
+					var tipText;
+
+					if(opts.xaxis.mode === "time" || opts.xaxes[0].mode === "time") {
+						tipText = stringFormat(to.content, item, timestampToDate);
+					}
+					else {
+						tipText = stringFormat(to.content, item);						
+					}
+					
+					$tip.html( tipText ).css({left: tipPosition.x + to.shifts.x, top: tipPosition.y + to.shifts.y}).show();
+				}
+				else {
+					$tip.hide().html('');
+				}
+			});
+			
+			eventHolder.mousemove(onMouseMove);
+		});
+		
+		var stringFormat = function(content, item, fnct) {
+		
+			var percentPattern = /%p\.{0,1}(\d{0,})/;
+			var seriesPattern = /%s/;
+			var xPattern = /%x\.{0,1}(\d{0,})/;
+			var yPattern = /%y\.{0,1}(\d{0,})/;
+			
+			//percent match
+			if( typeof (item.series.percent) !== 'undefined' ) {
+				content = adjustValPrecision(percentPattern, content, item.series.percent);
+			}
+			//series match
+			if( typeof(item.series.label) !== 'undefined' ) {
+				content = content.replace(seriesPattern, item.series.label);
+			}
+			// xVal match
+			if( typeof(fnct) === 'function' ) {
+				content = content.replace(xPattern, fnct(item.series.data[item.dataIndex][0]) );
+			}
+			else if( typeof item.series.data[item.dataIndex][0] === 'number' ) {
+				content = adjustValPrecision(xPattern, content, item.series.data[item.dataIndex][0]);
+			}
+			// yVal match
+			if( typeof item.series.data[item.dataIndex][1] === 'number' ) {
+				content = adjustValPrecision(yPattern, content, item.series.data[item.dataIndex][1]);
+			}
+
+			return content;
+		};
+		
+		var adjustValPrecision = function(pattern, content, value) {
+		
+			var precision;
+			if( content.match(pattern) !== 'null' ) {
+				if(RegExp.$1 !== '') {
+					precision = RegExp.$1;
+					value = value.toFixed(precision)
+				}
+				content = content.replace(pattern, value);
+			}
+		
+			return content;
+		};
+	}
+    
+	$.plot.plugins.push({
+		init: init,
+		options: options,
+		name: 'tooltip',
+		version: '0.4.4'
+	});
+})(jQuery);
author	Igor Sfiligoi <isfiligoi@ucsd.edu>	2013-11-08 13:00:05 -0500
committer	Igor Sfiligoi <isfiligoi@ucsd.edu>	2013-11-08 13:00:05 -0500
commit	5bfc5fd33d0ee3d6456ae9a0fd786c60fc578d6f (patch)
tree	9b214a0074961cbefc6699b440ee3951c1fb4c27
parent	f361d0498d284c6c7f3f366bf88e49b93e1245f0 (diff)