%PDF-
%PDF-
Mini Shell
Mini Shell
/*
* jquery.flot.tooltip
*
* description: easy-to-use tooltips for Flot charts
* version: 0.6.7
* author: Krzysztof Urbas @krzysu [myviews.pl]
* website: https://github.com/krzysu/flot.tooltip
*
* build on 2014-03-14
* released under MIT License, 2012
*/
(function ($) {
// plugin options, default values
var defaultOptions = {
tooltip: false,
tooltipOpts: {
content: "%s | X: %x | Y: %y",
// allowed templates are:
// %s -> series label,
// %lx -> x axis label (requires flot-axislabels plugin https://github.com/markrcote/flot-axislabels),
// %ly -> y axis label (requires flot-axislabels plugin https://github.com/markrcote/flot-axislabels),
// %x -> X value,
// %y -> Y value,
// %x.2 -> precision of X value,
// %p -> percent
xDateFormat: null,
yDateFormat: null,
monthNames: null,
dayNames: null,
shifts: {
x: 10,
y: 20
},
defaultTheme: true,
// callbacks
onHover: function (flotItem, $tooltipEl) {
}
}
};
// object
var FlotTooltip = function (plot) {
// variables
this.tipPosition = {x: 0, y: 0};
this.init(plot);
};
// main plugin function
FlotTooltip.prototype.init = function (plot) {
var that = this;
// detect other flot plugins
var plotPluginsLength = $.plot.plugins.length;
this.plotPlugins = [];
if (plotPluginsLength) {
for (var p = 0; p < plotPluginsLength; p++) {
this.plotPlugins.push($.plot.plugins[p].name);
}
}
plot.hooks.bindEvents.push(function (plot, eventHolder) {
// get plot options
that.plotOptions = plot.getOptions();
// if not enabled return
if (that.plotOptions.tooltip === false || typeof that.plotOptions.tooltip === 'undefined') return;
// shortcut to access tooltip options
that.tooltipOptions = that.plotOptions.tooltipOpts;
// create tooltip DOM element
var $tip = that.getDomElement();
// bind event
$(plot.getPlaceholder()).bind("plothover", plothover);
$(eventHolder).bind('mousemove', mouseMove);
});
plot.hooks.shutdown.push(function (plot, eventHolder) {
$(plot.getPlaceholder()).unbind("plothover", plothover);
$(eventHolder).unbind("mousemove", mouseMove);
});
function mouseMove(e) {
var pos = {};
pos.x = e.pageX;
pos.y = e.pageY;
that.updateTooltipPosition(pos);
}
function plothover(event, pos, item) {
var $tip = that.getDomElement();
if (item) {
var tipText;
// convert tooltip content template to real tipText
tipText = that.stringFormat(that.tooltipOptions.content, item);
$tip.html(tipText);
that.updateTooltipPosition({ x: pos.pageX, y: pos.pageY });
$tip.css({
left: that.tipPosition.x + that.tooltipOptions.shifts.x,
top: that.tipPosition.y + that.tooltipOptions.shifts.y
})
.show();
// run callback
if (typeof that.tooltipOptions.onHover === 'function') {
that.tooltipOptions.onHover(item, $tip);
}
}
else {
$tip.hide().html('');
}
}
};
/**
* get or create tooltip DOM element
* @return jQuery object
*/
FlotTooltip.prototype.getDomElement = function () {
var $tip;
if ($('#flotTip').length > 0) {
$tip = $('#flotTip');
}
else {
$tip = $('<div />').attr('id', 'flotTip');
$tip.appendTo('body').hide().css({position: 'absolute'});
if (this.tooltipOptions.defaultTheme) {
$tip.css({
'background': '#fff',
'z-index': '1040',
'padding': '0.4em 0.6em',
'border-radius': '0.5em',
'font-size': '0.8em',
'border': '1px solid #111',
'display': 'none',
'white-space': 'nowrap'
});
}
}
return $tip;
};
// as the name says
FlotTooltip.prototype.updateTooltipPosition = function (pos) {
var totalTipWidth = $("#flotTip").outerWidth() + this.tooltipOptions.shifts.x;
var totalTipHeight = $("#flotTip").outerHeight() + this.tooltipOptions.shifts.y;
if ((pos.x - $(window).scrollLeft()) > ($(window).innerWidth() - totalTipWidth)) {
pos.x -= totalTipWidth;
}
if ((pos.y - $(window).scrollTop()) > ($(window).innerHeight() - totalTipHeight)) {
pos.y -= totalTipHeight;
}
this.tipPosition.x = pos.x;
this.tipPosition.y = pos.y;
};
/**
* core function, create tooltip content
* @param {string} content - template with tooltip content
* @param {object} item - Flot item
* @return {string} real tooltip content for current item
*/
FlotTooltip.prototype.stringFormat = function (content, item) {
var percentPattern = /%p\.{0,1}(\d{0,})/;
var seriesPattern = /%s/;
var xLabelPattern = /%lx/; // requires flot-axislabels plugin https://github.com/markrcote/flot-axislabels, will be ignored if plugin isn't loaded
var yLabelPattern = /%ly/; // requires flot-axislabels plugin https://github.com/markrcote/flot-axislabels, will be ignored if plugin isn't loaded
var xPattern = /%x\.{0,1}(\d{0,})/;
var yPattern = /%y\.{0,1}(\d{0,})/;
var xPatternWithoutPrecision = "%x";
var yPatternWithoutPrecision = "%y";
var x, y;
// for threshold plugin we need to read data from different place
if (typeof item.series.threshold !== "undefined") {
x = item.datapoint[0];
y = item.datapoint[1];
} else {
x = item.series.data[item.dataIndex][0];
y = item.series.data[item.dataIndex][1];
}
// I think this is only in case of threshold plugin
if (item.series.label === null && item.series.originSeries) {
item.series.label = item.series.originSeries.label;
}
// if it is a function callback get the content string
if (typeof(content) === 'function') {
content = content(item.series.label, x, y, item);
}
// percent match for pie charts
if (typeof (item.series.percent) !== 'undefined') {
content = this.adjustValPrecision(percentPattern, content, item.series.percent);
}
// series match
if (typeof(item.series.label) !== 'undefined') {
content = content.replace(seriesPattern, item.series.label);
}
else {
//remove %s if label is undefined
content = content.replace(seriesPattern, "");
}
// x axis label match
if (this.hasAxisLabel('xaxis', item)) {
content = content.replace(xLabelPattern, item.series.xaxis.options.axisLabel);
}
else {
//remove %lx if axis label is undefined or axislabels plugin not present
content = content.replace(xLabelPattern, "");
}
// y axis label match
if (this.hasAxisLabel('yaxis', item)) {
content = content.replace(yLabelPattern, item.series.yaxis.options.axisLabel);
}
else {
//remove %ly if axis label is undefined or axislabels plugin not present
content = content.replace(yLabelPattern, "");
}
// time mode axes with custom dateFormat
if (this.isTimeMode('xaxis', item) && this.isXDateFormat(item)) {
content = content.replace(xPattern, this.timestampToDate(x, this.tooltipOptions.xDateFormat));
}
if (this.isTimeMode('yaxis', item) && this.isYDateFormat(item)) {
content = content.replace(yPattern, this.timestampToDate(y, this.tooltipOptions.yDateFormat));
}
// set precision if defined
if (typeof x === 'number') {
content = this.adjustValPrecision(xPattern, content, x);
}
if (typeof y === 'number') {
content = this.adjustValPrecision(yPattern, content, y);
}
// change x from number to given label, if given
if (typeof item.series.xaxis.ticks !== 'undefined') {
var ticks;
if (this.hasRotatedXAxisTicks(item)) {
// xaxis.ticks will be an empty array if tickRotor is being used, but the values are available in rotatedTicks
ticks = 'rotatedTicks';
}
else {
ticks = 'ticks';
}
// see https://github.com/krzysu/flot.tooltip/issues/65
var tickIndex = item.dataIndex + item.seriesIndex;
if (item.series.xaxis[ticks].length > tickIndex && !this.isTimeMode('xaxis', item))
content = content.replace(xPattern, item.series.xaxis[ticks][tickIndex].label);
}
// change y from number to given label, if given
if (typeof item.series.yaxis.ticks !== 'undefined') {
for (var index in item.series.yaxis.ticks) {
if (item.series.yaxis.ticks.hasOwnProperty(index)) {
var value = (this.isCategoriesMode('yaxis', item)) ? item.series.yaxis.ticks[index].label : item.series.yaxis.ticks[index].v;
if (value === y) {
content = content.replace(yPattern, item.series.yaxis.ticks[index].label);
}
}
}
}
// if no value customization, use tickFormatter by default
if (typeof item.series.xaxis.tickFormatter !== 'undefined') {
//escape dollar
content = content.replace(xPatternWithoutPrecision, item.series.xaxis.tickFormatter(x, item.series.xaxis).replace(/\$/g, '$$'));
}
if (typeof item.series.yaxis.tickFormatter !== 'undefined') {
//escape dollar
content = content.replace(yPatternWithoutPrecision, item.series.yaxis.tickFormatter(y, item.series.yaxis).replace(/\$/g, '$$'));
}
return content;
};
// helpers just for readability
FlotTooltip.prototype.isTimeMode = function (axisName, item) {
return (typeof item.series[axisName].options.mode !== 'undefined' && item.series[axisName].options.mode === 'time');
};
FlotTooltip.prototype.isXDateFormat = function (item) {
return (typeof this.tooltipOptions.xDateFormat !== 'undefined' && this.tooltipOptions.xDateFormat !== null);
};
FlotTooltip.prototype.isYDateFormat = function (item) {
return (typeof this.tooltipOptions.yDateFormat !== 'undefined' && this.tooltipOptions.yDateFormat !== null);
};
FlotTooltip.prototype.isCategoriesMode = function (axisName, item) {
return (typeof item.series[axisName].options.mode !== 'undefined' && item.series[axisName].options.mode === 'categories');
};
//
FlotTooltip.prototype.timestampToDate = function (tmst, dateFormat) {
var theDate = new Date(tmst * 1);
return $.plot.formatDate(theDate, dateFormat, this.tooltipOptions.monthNames, this.tooltipOptions.dayNames);
};
//
FlotTooltip.prototype.adjustValPrecision = function (pattern, content, value) {
var precision;
var matchResult = content.match(pattern);
if (matchResult !== null) {
if (RegExp.$1 !== '') {
precision = RegExp.$1;
value = value.toFixed(precision);
// only replace content if precision exists, in other case use thickformater
content = content.replace(pattern, value);
}
}
return content;
};
// other plugins detection below
// check if flot-axislabels plugin (https://github.com/markrcote/flot-axislabels) is used and that an axis label is given
FlotTooltip.prototype.hasAxisLabel = function (axisName, item) {
return (this.plotPlugins.indexOf('axisLabels') !== -1 && typeof item.series[axisName].options.axisLabel !== 'undefined' && item.series[axisName].options.axisLabel.length > 0);
};
// check whether flot-tickRotor, a plugin which allows rotation of X-axis ticks, is being used
FlotTooltip.prototype.hasRotatedXAxisTicks = function (item) {
return ($.grep($.plot.plugins, function (p) {
return p.name === "tickRotor";
}).length === 1 && item.series.xaxis.rotatedTicks !== 'undefined');
};
//
var init = function (plot) {
new FlotTooltip(plot);
};
// define Flot plugin
$.plot.plugins.push({
init: init,
options: defaultOptions,
name: 'tooltip',
version: '0.6.7'
});
})(jQuery);
Zerion Mini Shell 1.0