1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
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
*
* released under MIT License, 2012
*/
(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);
|
