From 003de268bc19b84ecc0c76736a102ee8cbef0a8b Mon Sep 17 00:00:00 2001 From: Igor Sfiligoi Date: Wed, 24 Aug 2011 22:00:04 -0400 Subject: flot-0.6-tooltip-0.4.2 --- README.tooltip.txt | 5 ++ jquery.flot.tooltip.js | 1 + jquery.flot.tooltip.min.js | 1 + jquery.flot.tooltip_0.4.2.js | 146 +++++++++++++++++++++++++++++++++++++++ jquery.flot.tooltip_0.4.2.min.js | 3 + 5 files changed, 156 insertions(+) create mode 100644 README.tooltip.txt create mode 120000 jquery.flot.tooltip.js create mode 120000 jquery.flot.tooltip.min.js create mode 100644 jquery.flot.tooltip_0.4.2.js create mode 100644 jquery.flot.tooltip_0.4.2.min.js diff --git a/README.tooltip.txt b/README.tooltip.txt new file mode 100644 index 0000000..79f5457 --- /dev/null +++ b/README.tooltip.txt @@ -0,0 +1,5 @@ +Tooltip is a plugin that is provided outside the standard Flot package. + +More details can be found at +https://github.com/krzysu/flot.tooltip/ + diff --git a/jquery.flot.tooltip.js b/jquery.flot.tooltip.js new file mode 120000 index 0000000..70ecb05 --- /dev/null +++ b/jquery.flot.tooltip.js @@ -0,0 +1 @@ +jquery.flot.tooltip_0.4.2.js \ No newline at end of file diff --git a/jquery.flot.tooltip.min.js b/jquery.flot.tooltip.min.js new file mode 120000 index 0000000..77201bf --- /dev/null +++ b/jquery.flot.tooltip.min.js @@ -0,0 +1 @@ +jquery.flot.tooltip_0.4.2.min.js \ No newline at end of file diff --git a/jquery.flot.tooltip_0.4.2.js b/jquery.flot.tooltip_0.4.2.js new file mode 100644 index 0000000..d29085e --- /dev/null +++ b/jquery.flot.tooltip_0.4.2.js @@ -0,0 +1,146 @@ +/* + * jquery.flot.tooltip + * + * desc: create tooltip with values of hovered point on the graph, + support many series, time mode, + you can set custom tip content (also with use of HTML tags) and precision of values + * version: 0.4.2 + * author: Krzysztof Urbas @krzysu [myviews.pl] + * website: https://github.com/krzysu/flot.tooltip + * + * released under MIT License, 2011 +*/ + +(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 + dateFormat: "%y-%0m-%0d", + shifts: { + x: 10, + y: 20 + }, + defaultTheme: true + } + }; + + function init(plot) { + + var tipPosition = {x: 0, y: 0}; + var opts = plot.getOptions(); + + function updateTooltipPosition(pos) { + tipPosition.x = pos.x; + tipPosition.y = pos.y; + }; + + function onMouseMove(e) { + + var pos = {x: 0, y: 0}; + pos.x = e.pageX; + pos.y = e.pageY; + + updateTooltipPosition(pos); + }; + + function timestampToDate(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 = $('
').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); + }); + + function stringFormat(content, item, fnct) { + + var seriesPattern = /%s/; + var xPattern = /%x\.{0,1}(\d{0,})/; + var yPattern = /%y\.{0,1}(\d{0,})/; + + //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.datapoint[0]) ); + } + else { + content = adjustValPrecision(xPattern, content, item.datapoint[0]); + } + // yVal match + content = adjustValPrecision(yPattern, content, item.datapoint[1]); + + return content; + }; + + function adjustValPrecision(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' + }); +})(jQuery); diff --git a/jquery.flot.tooltip_0.4.2.min.js b/jquery.flot.tooltip_0.4.2.min.js new file mode 100644 index 0000000..a817a95 --- /dev/null +++ b/jquery.flot.tooltip_0.4.2.min.js @@ -0,0 +1,3 @@ +(function(c){c.plot.plugins.push({init:function(g){var h,i;function l(a){var b=0,d=0,b=a.pageX,d=a.pageY;h=b;i=d}function m(a){return c.plot.formatDate(new Date(a),f.tooltipOpts.dateFormat)}function j(a,b,d){var c=/%s/,e=/%x\.{0,1}(\d{0,})/;typeof b.series.label!=="undefined"&&(a=a.replace(c,b.series.label));a=typeof d==="function"?a.replace(e,d(b.datapoint[0])):k(e,a,b.datapoint[0]);return a=k(/%y\.{0,1}(\d{0,})/,a,b.datapoint[1])}function k(a,b,d){var c;if(b.match(a)!=="null"){if(RegExp.$1!=="")c= +RegExp.$1,d=d.toFixed(c);b=b.replace(a,d)}return b}h=0;i=0;var f=g.getOptions();g.hooks.bindEvents.push(function(a,b){var d=f.tooltipOpts,g=a.getPlaceholder(),e;f.tooltip!==!1&&(c("#flotTip").length>0?e=c("#flotTip"):(e=c("
").attr("id","flotTip"),e.appendTo("body").hide().css({position:"absolute"}),d.defaultTheme&&e.css({background:"#fff","z-index":"100",padding:"0.4em 0.6em","border-radius":"0.5em","font-size":"0.8em",border:"1px solid #111"})),c(g).bind("plothover",function(a,b,c){c?(a=f.xaxis.mode=== +"time"||f.xaxes[0].mode==="time"?j(d.content,c,m):j(d.content,c),e.html(a).css({left:h+d.shifts.x,top:i+d.shifts.y}).show()):e.hide().html("")}),b.mousemove(l))})},options:{tooltip:!1,tooltipOpts:{content:"%s | X: %x | Y: %y.2",dateFormat:"%y-%0m-%0d",shifts:{x:10,y:20},defaultTheme:!0}},name:"tooltip",version:"0.4"})})(jQuery); \ No newline at end of file -- cgit v1.2.3-2-g168b