|
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); |