1 /*

     2  * jquery.flot.tooltip

     3  *

     4  * desc:	create tooltip with values of hovered point on the graph, 

     5  * support many series, time mode, stacking and pie charts

     6  * you can set custom tip content (also with use of HTML tags) and precision of values

     7  * version:	0.4.4

     8  * author: 	Krzysztof Urbas @krzysu [myviews.pl] with help of @ismyrnow

     9  * website:	https://github.com/krzysu/flot.tooltip

    10  * 

    11  * released under MIT License, 2012

    12  */

    13 

    14 (function ($) {

    15 	var options = {

    16 		tooltip: false, //boolean

    17 		tooltipOpts: {

    18 			content: "%s | X: %x | Y: %y.2", //%s -> series label, %x -> X value, %y -> Y value, %x.2 -> precision of X value, %p -> percent

    19 			dateFormat: "%y-%0m-%0d",

    20 			shifts: {

    21 				x: 10,

    22 				y: 20

    23 			},

    24 			defaultTheme: true

    25 		}

    26 	};

    27 

    28 	var init = function (plot) {

    29 

    30 		var tipPosition = {x: 0, y: 0};

    31 		var opts = plot.getOptions();

    32 

    33 		var updateTooltipPosition = function (pos) {

    34 			tipPosition.x = pos.x;

    35 			tipPosition.y = pos.y;

    36 		};

    37 

    38 		var onMouseMove = function (e) {

    39 

    40 			var pos = {x: 0, y: 0};

    41 

    42 			pos.x = e.pageX;

    43 			pos.y = e.pageY;

    44 

    45 			updateTooltipPosition(pos);

    46 		};

    47 

    48 		var timestampToDate = function (tmst) {

    49 

    50 			var theDate = new Date(tmst);

    51 

    52 			return $.plot.formatDate(theDate, opts.tooltipOpts.dateFormat);

    53 		};

    54 

    55 		plot.hooks.bindEvents.push(function (plot, eventHolder) {

    56 

    57 			var to = opts.tooltipOpts;

    58 			var placeholder = plot.getPlaceholder();

    59 			var $tip;

    60 

    61 			if (opts.tooltip === false) return;

    62 

    63 			if ($('#flotTip').length > 0) {

    64 				$tip = $('#flotTip');

    65 			}

    66 			else {

    67 				$tip = $('<div />').attr('id', 'flotTip');

    68 				$tip.appendTo('body').hide().css({position: 'absolute'});

    69 

    70 				if (to.defaultTheme) {

    71 					$tip.css({

    72 								 'background': '#fff',

    73 								 'z-index': '100',

    74 								 'padding': '0.4em 0.6em',

    75 								 'border-radius': '0.5em',

    76 								 'font-size': '0.8em',

    77 								 'border': '1px solid #111'

    78 							 });

    79 				}

    80 			}

    81 

    82 			$(placeholder).bind("plothover", function (event, pos, item) {

    83 				if (item) {

    84 					var tipText;

    85 

    86 					if (opts.xaxis.mode === "time" || opts.xaxes[0].mode === "time") {

    87 						tipText = stringFormat(to.content, item, timestampToDate);

    88 					}

    89 					else {

    90 						tipText = stringFormat(to.content, item);

    91 					}

    92 

    93 					$tip.html(tipText).css({left: tipPosition.x + to.shifts.x, top: tipPosition.y + to.shifts.y}).show();

    94 				}

    95 				else {

    96 					$tip.hide().html('');

    97 				}

    98 			});

    99 

   100 			eventHolder.mousemove(onMouseMove);

   101 		});

   102 

   103 		var stringFormat = function (content, item, fnct) {

   104 

   105 			var percentPattern = /%p\.{0,1}(\d{0,})/;

   106 			var seriesPattern = /%s/;

   107 			var xPattern = /%x\.{0,1}(\d{0,})/;

   108 			var yPattern = /%y\.{0,1}(\d{0,})/;

   109 

   110 			//percent match

   111 			if (typeof (item.series.percent) !== 'undefined') {

   112 				content = adjustValPrecision(percentPattern, content, item.series.percent);

   113 			}

   114 			//series match

   115 			if (typeof(item.series.label) !== 'undefined') {

   116 				content = content.replace(seriesPattern, item.series.label);

   117 			}

   118 			// xVal match

   119 			if (typeof(fnct) === 'function') {

   120 				content = content.replace(xPattern, fnct(item.series.data[item.dataIndex][0]));

   121 			}

   122 			else if (typeof item.series.data[item.dataIndex][0] === 'number') {

   123 				content = adjustValPrecision(xPattern, content, item.series.data[item.dataIndex][0]);

   124 			}

   125 			// yVal match

   126 			if (typeof item.series.data[item.dataIndex][1] === 'number') {

   127 				content = adjustValPrecision(yPattern, content, item.series.data[item.dataIndex][1]);

   128 			}

   129 

   130 			return content;

   131 		};

   132 

   133 		var adjustValPrecision = function (pattern, content, value) {

   134 

   135 			var precision;

   136 			if (content.match(pattern) !== 'null') {

   137 				if (RegExp.$1 !== '') {

   138 					precision = RegExp.$1;

   139 					value = value.toFixed(precision)

   140 				}

   141 				content = content.replace(pattern, value);

   142 			}

   143 

   144 			return content;

   145 		};

   146 	}

   147 

   148 	$.plot.plugins.push({

   149 							init: init,

   150 							options: options,

   151 							name: 'tooltip',

   152 							version: '0.4.4'

   153 						});

   154 })(jQuery);