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 notifications@github.com 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.