krzysu / flot.tooltip Goto Github PK
View Code? Open in Web Editor NEWtooltip plugin for wonderful Flot plotting library
Home Page: https://github.com/krzysu/flot.tooltip
tooltip plugin for wonderful Flot plotting library
Home Page: https://github.com/krzysu/flot.tooltip
When using the steps option in flot, as below, tooltips are not assigned to the correct datapoints.
lines: {
show: true,
steps: true
}
This is probably due to the fact that flot adds additional datapoints to the graph when steps is set to true. Ideally, flot.tooltip should ignore them, and only show tooltips on the "real" datapoints.
Just noticed that the plugin does not work with threshold plugin. Since threshold plugin splits the data series to multiple series, item.series is not what the plugin supposes that it should be.
Latest commit (8a9ed0e) seems to have broken this, it works when you refer directly to item.datapoint as previous versions.
I think it would be better if it were removed. So there is no need to change content option in tooltipOptions. If there is series label %s is replaced and if not only x,y coordinate is show.
It's just two lines
else{
//remove seriesPattern if label is not defined
content = content.replace(seriesPattern, "");
}
If you have given your xaxis your own label with ticks, the tooltip does not show those ticks.
E.G.
data: [ [0, 450], [1, 550], [2, 320], [3, 700] ],
xaxis: {
ticks: [
[0, "great"],
[1, "greater"],
[2, "greatest"]
]
}
Could you fix this in your next version?
N.B. For those whom need a quick fix, go to your jquery.flot.tooltip to line 181.
There you should see:
if(typeof item.series.xaxis.tickFormatter !== 'undefined') {
Change that line to:
if(typeof item.series.xaxis.tickFormatter !== 'undefined' && item.series.xaxis.ticks.length == 0) {
And add above these line:
// change x from number to given label, if given
if(item.series.xaxis.ticks.length != 0) {
content = content.replace(xPattern, item.series.xaxis.ticks[item.dataIndex].label);
}
Done :D.
I have found that the x-axis values are off when using stepped lines. As flot adds extra points for stepped lines, tooltips isn't accounting for the additional points.
I can offer this diff of the two_chars.html file that demonstrates the issue.
16c16
< lines: { show: true },
---
> lines: { show: true, steps: true },
21a22
> tooltipOpts:{"defaultTheme":false ,"content":"%s: %y -%x","dateFormat":"%m/%0d/%0y %h:%M"},
23,25d23
< tooltipOpts: {
< content: "y: %y"
< }
My code is here-
http://jsfiddle.net/Y4wP4/1/
Stackoverflow - http://stackoverflow.com/questions/22665992/p-for-percent-in-stacked-graph-with-jquery-flot-tooltip-is-not-working
Thanks
On mobile devices, hover doesn't work as expected. It would be great to show the tooltip on click, and let the tooltip stay there.
I can't get the tooltips to render in Safari or IE9. Chrome and FF work fine. Any thoughts?
(1) On a pie chart, I cannot get the %p to work. It simply shows as "%p". %s works just fine. On my label, I can get a percentage with series.percent.
(2) Also on a pie chart, I have a label set up, like this:
label: {
show: true,
radius: 5/8, // where in the pie chart to put the labels; 5/8 from center
threshold: 0.05, // 5% threshold to show the label
formatter: function(label, series)
{
return '
The tooltip does not work over the label, just the rest of the pie chart.
(3) On a bar chart, the series %s does not show anything, only %x and %y. (%p does not work either.)
When displaying a tooltip close to the edge of the browser window it will show outside of the browser window, it may make more sense to calculate the width of the tooltip and ensure that it does not go outside of the browser width.
When you mouseover a piechart the tooltip appears fine, but if you mouseover label text (over the piechart) the tooltip disappears - presumably because the event isn't propagating to the parent? A javascript fix for this would be good, but a quick CSS workaround is:
.pieLabel {
pointer-events: none;
}
but that doesn't work in IE until v11.
There's a check for opts.xaxis.mode, but there should be another check for opts.xaxes[0].mode like this:
if(opts.xaxis.mode === "time" || opts.xaxes[0].mode === "time") {
tipText = stringFormat(to.content, item, timestampToDate);
}
Hi,
This is the problem I'm facing:
Note that, even though there're two bars: Foo
and Bar
, the tooltip calls them Foo
in both cases.
I reproduced this in a fiddle at http://jsfiddle.net/vitorbaptista/vPGH6/1/. It basically creates two series:
var values1 = [ ["Foo", 5] ];
var values2 = [ ["Bar", 10] ];
var options = {
// Set up bars, set mode as category, etc. Nothing special.
};
var plotObj = $.plot( $("#bars"),
[
{ data: values1, label: "Series 1"},
{ data: values2, label: "Series 2"}
],
options );
The problem comes from FlotTooltip.stringFormat
, specially from https://github.com/krzysu/flot.tooltip/blob/master/js/jquery.flot.tooltip.js#L225-L229
// change x from number to given label, if given
if(typeof item.series.xaxis.ticks !== 'undefined') {
if(item.series.xaxis.ticks.length > item.dataIndex && !this.isTimeMode('xaxis', item))
content = content.replace(xPattern, item.series.xaxis.ticks[item.dataIndex].label);
}
What this does, AFAIK, is get the tick indexed at item.dataIndex
's label and replace it at %x
. The problem is that, in this case, item.dataIndex
is always 0
, because both values have a single data array. As the label at the tick indexed at 0
is Foo
, this is what we get.
I couldn't understand why this code exists. At that point, the correct label is already in the x
and y
variables, configured in https://github.com/krzysu/flot.tooltip/blob/master/js/jquery.flot.tooltip.js#L175-L182.
Is this the expected behavior? Am I doing something wrong?
Thanks!
If you add the tooltip plugin to a graph which also uses the threshold plugin, the tooltips don't show, and there are javascript errors in console.
Uncaught TypeError: Cannot read property '0' of undefined
I've assembled an example here:
danielgwood/flot.tooltip@bbf45ccaea6210c33c015e4f8bb1e234c8e8a372
Hi,
on my plot I am using both yaxis and y2axis, one for timing, one for raw numbers. The former is defined mode: time, the latter mode: null. However the plugin shows time for both of them.
Live example https://traffic.integreen-life.bz.it/vtraffic/default/origin_destination, the line called matches uses y2axis.
Hi!
First "thanks" for that plugin - it really helps. I'm using angular JS and quite heavy flot charting. I'm wondering whether or how I can externally trigger a flot tooltip to be rendered. My setup is like:
Actually I have everthing in my hands:
Do you have any suggestions ? Am I missing something ?
I love this plugin's simplicity. The only thing I'm wondering is if it would be possible to either (a) reuse flot's axis-based tickFormatters, or (b) define formatters for the %x, %y, and %p values that are replaced in content strings.
It's definitely not the end of the world not having this feature, but it's nice when you have data sets in the millions and billions. Instead of 42924829, you'd have 42,924,829.
I have a graph in which on the xaxis I have the daily time, while on the yaxis I have the elapsed time, both of them have mode='time'
The tooltip shows correctly the time formated as dateFormat but it shows the milliseconds for the yaxis.
The best would be to have the possibility to spit dateFormat into two different parameters, so I can have two different dateFormat, one for the x, the other for the y.
If I understand correctly it seems that the original data value is not accessible to the plugin - tooltip takes the y value in the same format as the tick value.
I think this will be a problem in common usage. For example, I have currency data like:
123456.1234
On my axis I want to see:
100,000
In my tooltip I want to see:
$123,456.12
What I actually see in the tooltip is:
123,456
So it seems tooltip takes the value after it has been changed by the flot tickFormatter. This means I cannot regain the lost precision, and would have to 'undo' the other formatting.
The following is very odd and I have been trying to debug but unfortunately don't have the time to continue devoting to figuring this out. I'm hoping that maybe you have more knowledge as to why the function is being wiped out for onHover if it is a reference to a function verses an anonymous one.
Here is what doesn't work but I would like to do (much like I do for content):
onHover: setupTooltip()
setupTooltip(flotItem, $tooltipEl) {
...
}
For some reason that get's set to "" in the options.
Doing the following works as expected:
onHover: function(flotItem, $tooltipEl) {
setupTooltip(flotItem, $tooltipEl);
}
Any help would be great.
Greg
Hi,
support of flot.stackpercent from skeleton9 is not assume. may be you could add this line in the source to assum it.
//support for stacked percentage
if(typeof (item.series.percents) !== 'undefined')
{
content = this.adjustValPrecision(percentPattern, content, item.series.percents[item.dataIndex]);
}
regards
The line tracking plugin does not support the stepped lines option - only the default straight style. It would be nice to add support for this in the future.
var xPattern = /%x\.{0,1}(?:\d{0,})/;
var yPattern = /%y\.{0,1}(?:\d{0,})/;
They don't have match group. But adjustValPrecison() require a group:
if(RegExp.$1 !== '') {
precision = RegExp.$1;
value = value.toFixed(precision)
}
It would looks like:
var xPattern = /%x.{0,1}(\d{0,})/;
var yPattern = /%y.{0,1}(\d{0,})/;
Flot has the ability to change both dayNames and monthNames.
However it seems to me that the plugin uses the default ones.
The tooltips either don't show on some of the stacked bars or display NaN. Loving this plugin otherwise :)
First, thanks for the great plugin. It really helps to make my code a little cleaner.
I' like to display multiple charts on one page, and I'd like each of them to display their tooltip content in a different manner. I'm finding that that the last chart to be defined with tooltipOpts.content will override any previously defined format options.
Below is an example where I'd like the first chart to display just the Y data, and the second chart to display X and Y. But, they both display the same X and Y format.
I used flot.stack to create a stacked bar chart. It stacks the bars by changing the data points. The flot.tooltip plugin displayed the modified data point's y value (which is the sum of the heights of the stacked bars) when formatting "%y". Instead, it should show the original data point's y value (the height of a single bar within the stack).
Looks like flot.tooltip is getting the x and y values from item.datapoint, which is the modified data point. The original data point is available in item.series.data[item.dataIndex].
The flot.tooltip library does not unbind listeners, so it leaks memory when repotting with $.plot.
I've profiled this in my fork, and will attach a pull request.
Would you add simple code to support percentage?
For pie chart using flot pie plugin, it is quite easy, only add 2 lines of code in stringFormat
to do this:
var pPattern = /%p\.{0,1}(\d{0,})/;
content = adjustValPrecision(pPattern, content, item.series.percent);
It will be also useful if you can add percentage support for stacked bars, which need to calculate the percentage value.
When doing the styling for the tips, I've added a little arrow and adjust the tooltip offset, but this breaks when the tip offset is adjusted if the tooltip is too close to the edge, so I basically I need a class to be added to indicate the type of offset being implemented.
I have already created a fix, will submit a pull request shortly.
I'd like an option to use tickformatters of the x and y values.
Something like this:
xVal = 0;
yVal = 0;
if(opts.xaxis.mode === "time") {
xVal = timestampToDate(item.datapoint[0]);
yVal = item.datapoint[1];
}
else {
xVal = opts.xaxis.tickFormatter(item.datapoint[0]);
yVal = opts.yaxis.tickFormatter(item.datapoint[1], 0);
}
tipText += to.xValText + xVal + " " + to.yValText + yVal;
The default theme's z-index of '100' is less than the z-index of Bootstrap's modal dialog, causing the tooltip to be hidden when the default theme is used for plots shown in a modal.
The minimum z-index I used to make the tooltip visible was '1040' (which is the z-index of Bootstrap's .modal class).
This issue is easily rectifiable by altering the z-index on either the tooltip or the modal, but, with the popularity of Bootstrap, it might be a good idea to have tooltips in modals "just work".
I tried tooltip for a flot in a modal window of bootstrap 2.x. The tooltip was hidden by the modal window.
Could the tooltip div be appended to the flot's parent, or use a container object like flot's legend container?
When a yaxis is not shown by setting "show: false", the tooltip does not replace %y with the value. As soon as the yaxis is shown, it also replaces %y.
Similar case with two yaxes: When e.g. one yaxis is shown and one is not shown, the series belonging to the shown yaxis has correct tooltips while the other has "%y".
I would like to customize the tooltip content on a per-series basis:
var dataOpts = [{
data: [...],
label: 'Foo'
},{
data: [...],
tooltipOpts: {
content: 'Bar: %y'
}
}];
var plotOpts = {
...
legend: {
show: true
},
grid: { hoverable: true },
tooltip: true,
tooltipOpts: {
content: '%y'
}
}
$.plot($('#plot'), dataOpts, plotOpts);
Basically, I have some series that I want included in the legend, while I have other series that I want to specially format the tooltip content, without the series appearing in the legend.
In the plothover eventhandler, the item has the series data, so it should be possible to change
tipText = that.stringFormat(that.tooltipOptions.content, item);
to some variation of
if (item.series.tooltipOpts !== undefined && item.series.tooltipOpts.content !== undefined){
tipText = that.stringFormat(item.series.tooltipOpts.content, item);
} else {
tipText = that.stringFormat(that.tooltipOptions.content, item);
}
on a pie chart, I have a label set up, like this:
label: {
show: true,
radius: 5/8,
threshold: 0.05,
formatter: function(label, series)
{
return ''+label+''+Math.round(series.data[0][1]) + '';
},...
The tooltip does not work over the label, just the rest of the pie chart.
I could only get the plugin to work after manually changing the updateTooltipPosition
method from $(window).innerWidth()
to $(window).width()
.
I also changed $(window).innerHeight()
to $(window).height()
.
The current version causes jQuery to throw one TypeError
exception per hover event.
I read this:
api.jquery.com/innerwidth/
and applied the changes accordingly.
I'd like to suggest a tooltipOptions
param to select between the two and/or a docs update.
Thanks
As it is for x axis, it may be useful to use custom tick labels for y axis if they are given. Here's my code, feel free to improve it :
// 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)) {
if (item.series.yaxis.ticks[index].v === y) {
content = content.replace(yPattern, item.series.yaxis.ticks[index].label);
}
}
}
}
I have a simple line graph to which I've added tooltip: true
, and the X value updates correctly, but the y value shows by default as %y.2
, and even if I add in tooltipOpts and include a custom string with %y
in it, the %y is not replaced with my y axis data.
A couple notes: For the y axis in the plot, I have a custom minimum value set (instead of 0), and I am using a tickFormatter to put commas into the numbers.
Hi, if I define xDateFormat or yDateFormat the time values shown are wrong, namely they are 1h in advance in my case, I live in Italy which is UTC+1. However if I don't define the two variables the value shown are correct.
On line 122 'display': 'inline-block'
should be 'display': 'none'
otherwise a small circle will appear at the bottom of the page by default. I can see that you hide it, but by setting this in the CSS you are overwriting the hiding of the tooltip.
I have just updated to your final version and nothing seems to work properly.
First of all the xDateFormat
option throws an error undefined is not a function
when hovering over a tick.
Second, I've used a custom function for content
which simply returns %x
so I get
Visits: %y0:00 Visits: 12345
First thing - u use
return $.plot.formatDate(theDate, opts.tooltipOpts.dateFormat);
$.plot.formatDate - is not a part of flot any more.
I've just cloned the repository and am running the examples.
For examples/pie.html, when I hover over a segment, the tooltip content is %p%, Series1
.
If I comment out tooltipOpts.content
in pie.html, the tooltip content is Series1 | X: %x | Y:%y
.
I'm looking into this now, but wondering if you can see anything obvious?
If you hover in the edge of the window the tooltip gets placed outside.
It it possible to integrated something like qtip?
https://github.com/Craga89/qTip2/blob/master/src/viewport/viewport.js
It seems that if I have a tickFormatter defined like so:
tickFormatter: function(val, axis) {
return '$' + val.toLocaleString();
},
And the number (val) that's passed in begins with a 1 (e.g. 17527 or 123), then the leading $1 in the formatted tick is removed, resulting in something like 7,527 or 23 instead of $17,527 or $123...
I was scratching my head over this, as the ticks display correctly on the left side of the flot graph, but they display incorrectly in the hovered tooltip. For tooltipOpts
, I have content: "%y"
.
I'm working with this plugin and, first of all, I have to tell you that It's great!
The code was working fine for the pie precision. But when I tried in the x or y in a bar chart I came across this issue. The precision was not working. I looked at the source code for the plugin and I find out what was the issue.
I just put the following lines in the code, overwriting the existing ones, and it worked. So I'm here to share this with you. The lines are:
164 var xPattern = /%x.{0,1}(\d{0,})/;
165 var yPattern = /%y.{0,1}(\d{0,})/;
instead of
164 var xPattern = /%x.{0,1}(?:\d{0,})/;
165 var yPattern = /%y.{0,1}(?:\d{0,})/;
hi, i'm using this plugin with other plugin (curvedLines) but i cannot display tooltip when i hover no display in the console here is my experiment http://jsfiddle.net/BkruN/3/
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.