Graph 2D Tooltip example

[viaceren]

Hi,

I've got question about your work. I see that tooltip function is supported in 3d graph but not supported in 2d graph. What can we do about it to make tooltip function work for 2d graph?

Thank you.

[josdejong]

Thanks for your suggestion.

What can we do about it to make tooltip function work for 2d graph?

ehhh, implement it? ;)

Same holds for Timeline though, which doesn't have support for a tooltip too.

[AlexDM0]

Hi,

Regardless of the names sounding the same, the graph2d runs on a very different code base than the graph3d. It runs on the core of the timeline module actually.

Implementing tool tips (stationary and/or mouse-over) is on my todo list but I don't know when I'll get around to doing this. Rough estimate is within the next 2 months?

Regards,

Alex

[mdxs]

When I hack a local copy of vis.js to add a title attribute for the SVG rect (in drawPoint), I can get a tooltip on a data point in a bar graph (in the Graph2D part).

...
point.setAttributeNS(null, "title", 'wanna title');
return point;

This should go somewhere at https://github.com/almende/vis/blob/dc22bba9b89e787d76942614b15d4b9c2c4a1c72/lib/DOMutil.js#L155

If this would work (and not only shout a useless wanna title in the hover over tooltip...), this would fit https://github.com/almende/vis/issues/311#issuecomment-55612777 (and other comments with #311 while #388 seems related as well).

However, I couldn't get the DataSet based item title make it inside that drawPoint function.

If someone does succeed in doing that, the drawBar function could receive the same.

While it might be too much to have tooltips on bars and on data points, perhaps it could be toggled via some new option setting(s) for the bar graph (and line graph?).

[AlexDM0]

Hi Mdxs,

Though that could work, I'd rather do a proper tooltip integration, not one based on titles.

Regards,

Alex

[mdxs]

Sure, no problem; I was comparing it to the Timeline approach in which the DataSet items can have a title to provide a similar tooltip (see http://visjs.org/docs/timeline.html#items).

[AlexDM0]

Hi,

Over the last year a lot of feature requests have been made. We have just introduced our new website which has a list of the requested features. We have placed this request on that list.

The list can be found here: http://visjs.org/featureRequests.html

An explaination of the new system can be found here: http://visjs.org/blog.html#New\ website\ for\ vis.js!

I would like to stress that this does not mean we abandon this request. Discussion here will continue if needed on this feature but we will close it to keep our Github issue page more of a bug-todo list.

Future feature requests will still be made here and then added to the website by us.

Regards,

Alex

[rsaungc]

Hi, Do you know when tooltip for 2D graph will be ready? Thanks.

[AlexDM0]

Hi,

I can't give you an exact timeframe but my guess would be within the next 4 months.

Regards,

Alex

On 11 mrt. 2015, at 23:47, rsaungc notifications@github.com wrote:

Hi, Do you know when tooltop for 2D graph will be ready? Thanks.

— Reply to this email directly or view it on GitHub.

[NotSqrt]

Is there anything we can do to help ?

This is really the last big missing feature for me.

I see that all the issues listed in the featureRequests page and related to tooltips are closed, so I don't know which issue is relevant in order to be notified of updates on this feature..

[josdejong]

Sure, feel free to implement this feature and do a pull request, it's an open source project :)

here is a minimal guideline for contributions: https://github.com/almende/vis/blob/master/CONTRIBUTING.md

[NotSqrt]

Right.

Any heads up, since you probably had to look at this already ?

[josdejong]

What do you mean?

[NotSqrt]

You probably gave some thoughts on how to implement the hover event and the tooltips. That would be a good starting point !

[AlexDM0]

Hi,

I have a few ideas but I'm out of the office at the moment. I'll respond to this tomorrow when I'm back.

Regards

On 12 mrt. 2015, at 12:25, NotSqrt notifications@github.com wrote:

You probably gave some thoughts on how to implement the hover event and the tooltips. That would be a good starting point !

— Reply to this email directly or view it on GitHub.

[NotSqrt]

Great, thanks.

[AlexDM0]

Hi,

So what I had in mind for the tooltips is the following:

Options: className formatFunction snapToDatapoint delay visible static

the tooltip should be a HTML div, because that can be styled better than an SVG element, that is placed on top of the graph2d. It should be positioned next to the cursor and a line connecting it to the datapoint in question. This can be a curved line or straight. These lines are SVG elements.

The className option denotes the classname of the HTML div. If not supplied it should have a default style.

The format function takes some information on the datapoint relating to the tooltip and can customise the value being shown.

The snapToDatapoint boolean will force the tooltip to only show values on the datapoints. If it is false, it will also show the interpolated value.

The delay is in milliseconds before the tooltip pops up.

The visible argument is to have the tooltip visible or not.

The static boolean denotes if the tooltip moves along with your mouse cursor or not

We could expand the datapoints with an option that will always show the tooltip, regardless of mouse position. This means multiple tooltips can be shown at the same time.

Ideally it will work from a mouseMove event, that will give the position of the cursor which will then be referenced to all graphs, see which one is closest and pick a point. It will then emit an event with the datapoint, group and formatted value that can be used by developers to place the information in a div next to the graph instead of a tooltip.

Maybe the name tooltip becomes inaccurate at this point and we should house this under behaviour or something.

To have this high-performing and clean can be quite a challenge. You can use the binary search (if using sorted) to find the right time or timepoints and you can use the interpolation functions to get a value. The combination of SVG line connecting the datapoint and the DOM div can also be challenging.

What do you think? This is just off the top of my head so any ideas are welcome!

[hrvoj3e]

+1

[mateuszjarzewski]

I find a simple solution. I just make use of item/point label

dataset.add({
    x: '31',
    y: '337',
    label: {
        content: 'tooltip content'
    }
})

One thing You can do is to hide point label

.vis-line-graph {
    text {
        display: none;
    }
} 

or retain it by using JSON

dataset.add({
    x: '31',
    y: '337',
    label: {
        content: JSON.stringify({tooltip: 'lorem', label: 'ipsum'})
    }
})

and parse it while rendering...

The tooltip library Im using is TwBoostrap3.tooltip. Works great!

This require no core patching, so it's the best... If something's not clear or require more explaining, please make a comment cuz francly I feel like nobody cares :>

Trala.

[siben168]

@mateuszjarzewski Could you explain how you stick your tooltip content with bar chart or something? I tried your solution with bootstrap tooltip but have on idea how to show up tooltip with Json.

A sample code you are using now will be good enough.

Thanks Eric

[nickimola]

Yes please, If you can provide a code example it will be really nice :)

[mojoaxel]

We should provide an example that shows how to use tooltips.

[sunsetjunks]

Hello! graph2d has a wonderful performance, sampling, etc. But I really miss the basic tooltip functionality...

When could we get it working? Thanks!

[jgibson]

I needed basic tooltips (and select, see #311) on my graph so I took a crack at implementing this and ran into a few issues. @mdxs' suggestion worked pretty well. I found that a title attribute didn't work, but that an embedded title element did. The second was more tedious. As an optimization vis.js reuses SVG elements after altering the graph or scrolling a bunch. So the code has to be careful to reset existing titles lest points wind up with incorrect titles.

I also took @mateuszjarzewski's advice and tried a 3rd party tooltip library (qtip2) and it faced the same issue, only instead of clearing out the title element I had to deal with stale event handlers.

However I found a larger problem with both approaches when dealing with multiple groups on the graph. I found that paths from groups that were rendered later would obscure the tooltips on dots from the groups that were rendered earlier. Both Safari and FF were using the bounding box of a path to detect mouse events and thus a single path would grab all of the events instead of any points. To get around the issue I ended up changing the rendering code to render all of the paths before any of the points.

I also explored using SVGSVGElement.getIntersectionList() to handle the mouse events and determine what was being clicked or hovered over. However I found that Firefox simply doesn't support the feature (as of February 2017) and that Safari was matching via bounding box instead of by the actual geometry. I also don't know what the performance impact would be to use this for tooltips given that you'd be continually firing this event as you interacted with the graph. If the goal is to implement @AlexDM0's extensive requirements then I'd guess that this would be the correct approach, but it could be painful to get it work fast and well, especially given the current level of browser support.

[jgorene]

Hello guys, Take a look on this track... very easy to achieve for a really nice result (in my case) I also think that vis.js is a awesome library and tooltip such as found onTimeline is missing for graph2d. Unfortunately, I'm not still rather quite expert to implement this feature ;) Anyway, I often use d3.js a nice library very complementary to vis.js and if this track can be useful to someone else, for now .....

[Nokel81]

Is it possible to know a date when this will become available even in beta form?

[AnushaputtaUI]

is there a tooltip on graph 2D now if not,Is there any solution?