Skip to content
This repository has been archived by the owner on Jul 29, 2019. It is now read-only.

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

Open
Rikk opened this issue Mar 1, 2016 · 19 comments
Open

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

Rikk opened this issue Mar 1, 2016 · 19 comments

Comments

@Rikk
Copy link

Rikk commented Mar 1, 2016

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):
timeline-network
Is this possible? What is needed to implement this?

@josdejong
Copy link
Contributor

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
Copy link
Author

Rikk commented Mar 1, 2016

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
Copy link
Contributor

AlexDM0 commented Mar 1, 2016

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
Copy link
Contributor

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
Copy link
Author

Rikk commented Mar 2, 2016

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
Copy link
Member

There is a jquery plugin for gantt charts:

image

Maybe you can use this instead?

@yotamberk
Copy link
Contributor

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

@mojoaxel
Copy link
Member

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

@yotamberk
Copy link
Contributor

@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
Copy link
Author

Rikk commented Oct 24, 2016

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
Copy link
Member

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:
image

@corycowgill
Copy link

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
Copy link

sihil commented Feb 15, 2018

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
Copy link

frboyer commented Jul 26, 2018

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
Copy link

zivo13 commented Feb 27, 2019

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

@zdenal
Copy link

zdenal commented May 31, 2019

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?

Greg_Young_on_Twitter___Hey_whats_this_new_feature_in__eventstore…__

@JimmyCheng
Copy link

JimmyCheng commented Jun 5, 2019

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.
Screen Shot 2019-06-06 at 10 30 59 am

@javdome
Copy link

javdome commented Jun 6, 2019

@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
Copy link

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

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests