krzysu / flot.tooltip Goto Github PK

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

Avoid an empty tooltip showing up at the end of the body right after loading.

Flot has the ability to change both dayNames and monthNames.
However it seems to me that the plugin uses the default ones.

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].

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.

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

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?

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.

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.

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

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.

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.

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!

I can't get the tooltips to render in Safari or IE9. Chrome and FF work fine. Any thoughts?

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
Visits: %y so I get 0:00 Visits: 12345

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"
<       }

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.

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.

First thing - u use
return $.plot.formatDate(theDate, opts.tooltipOpts.dateFormat);

$.plot.formatDate - is not a part of flot any more.

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.

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.

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 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.

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.

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

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/

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".

    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,})/;

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

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?

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.

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

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

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

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, "");
        }

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.

(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.)

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.

http://jsfiddle.net/awhalen/wsaAn/

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

Received JavaScript error when using latest 0.6.7 version.
No error if older version (0.6.6) is used.

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,})/;

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.

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".

The tooltips either don't show on some of the stacked bars or display NaN. Loving this plugin otherwise :)

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.

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:

• a complex chart (up to 3 shifted and side by side stacked bars each xaxis tick)) where hovering is actually impossible referring to a touch device for example.
• toolttips should be rendered on changing a slider at the bottom of the flot canvas
• for now only one set of series data item should be displayed in one tooltip means ... the user chooses the series (in my case e.g. 1 out of 3) for which the tooltip should be displayed and on changing the slider the tooltip for that specific series should pop up.

Actually I have everthing in my hands:

• I know the slidervalue which is mapped to the xaxis tick
• I know the series datapoints to show the tooltips for

Do you have any suggestions ? Am I missing something ?