Timeline: How to draw lines/arrows to connect items?

[Rikk]

Hello, I've started looking at vis.js recently. Its graphing capabilities look very promising!
Now, I could not found this in any example. May I've missed it?
I need to create a timeline graph with some networking, or in other words, an way to express relation between items in a timeline.
For example (just a mockup):

Is this possible? What is needed to implement this?

[josdejong]

This is simply not possible right now. Implementing it is possible but a lot of work. We don't have plans for that ourselves but if anyone wants to pick this up would be interesting.

[Rikk]

Does vis.js provide any way to draw arrows in timeline? Or only in network mode? How are they rendered in network mode (canvas, css, ...)?

[AlexDM0]

Hi,

Network is completely separated from the timeline. It's rendered in canvas. I do not think any attempt can be made to merge this into timeline.

Cheers

On 01 Mar 2016, at 22:31, Ricardo [email protected] wrote:

Does vis.js provide any way to draw arrows in timeline? Or only in network mode? How are they rendered in network mode?

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

[josdejong]

Indeed. Network uses HTML5 Canvas, Timeline uses HTML DOM, and Graph2d uses HTML DOM and SVG.

If we extend the Timeline with these sort of arrows, I think the best approach is to add an SVG layer to the Timeline where you can render arrows and stuff.

[Rikk]

If we extend the Timeline with these sort of arrows, I think the best approach is to add an SVG layer to the Timeline where you can render arrows and stuff

This would be great.
Looks like this is what jsPlumb does.

[mojoaxel]

There is a jquery plugin for gantt charts:

Maybe you can use this instead?

[yotamberk]

@Rikk Did the plumpjs solve the issue? Can we close this issue?

[mojoaxel]

@yotamberk I would like to keep this feature-request open until it is implemented.

[yotamberk]

@mojoaxel Sure. I think this issue is extremely difficult to implement... I think it should be implemented with an external library (like plumbjs). I'm considering to pick this feature and see what it actually means.
Although I feel it will be much more complicated than we can handle...

[Rikk]

I think of jsPlumb as a workaround. It's a big lib, too complex, docs are confusing and most of its functions were not used. I couldn't figure out the correct way not to overlap or crossover items (it would need some logic I didn't think about); I used other visual strategies to make this supportable. Whatever, it's root use is to connect html elements on the page; these elements are the items generated by vis.js.

Maybe other than using svg, it could be implemented using invisible elements and css tricks. Possibly svg is easier and performs better, but I don't know how to program svg. It would need to recalculate source and destination points and redraw as timeline redraws and update a <path> inside the <svg>.

The gantt-charts plugins mentioned looks too restrictive, eg. only one item per group, development stopped, any kind of implementation would require deep modifications, and so on. Not good bet.

[mojoaxel]

Maybe other than using svg, it could be implemented using invisible elements and css tricks. Possibly svg is easier and performs better, but I don't know how to program svg

Have a look into d3.js.

There are also more (commercial) players out there:

[corycowgill]

This would be very helpful as we can get 90% of what we want with Timeline but want to connect the items in the timeline with directional arrows similar to above.

[sihil]

Another +1 on having this sort of support. A hybrid timeline-network would be really useful on my current project. It would be interesting to either be able to express relationships in a timeline or be able to align items in a network so as to be able to create a form of timeline.

[frboyer]

I wanted to verify how hard it would be to integrate arrows in vis.js timeline and if it really requires "breaking changes". I made a small example to show that it is possible to add an arrow without touching the source code of vis.js, thus it would not be that "breaking" to integrate some arrows. I used an SVG layer to draw the arrow, and hijacked the "on changed" event to update the arrow with the view.

The source html/js is here and you can view it works here.

[zivo13]

Very interesting approach by frboyer, can it work for multiple items?

[zdenal]

Does anybody found some simple/clever solution for this? Could anybody help me (give me a clue) find some tool by which I could achieve something like this?

[JimmyCheng]

Thanks @frboyer. I have revised @frboyer 's gist and added multiple dependencies in the vis.js project
@zivo13 , @zdenal this may help you.

The source html/js is here and you can view it works here.

[javdome]

@JimmyCheng it's amazing!!!
I have added the selectable and editable options to the timeline and it is even more amazing, since the items can be dragged.
See here

[JimmyCheng]

The best solution to solve this issue is to use visjs + leaderline. I can provide an example later.