Timeline: content overflow should create a vertical scrollbar, and keep axis fixed and visible

When stacked items exceed the height of the Timeline, the Timeline should show a vertical scrollbar. The axis should be displayed at a fixed position at top or bottom.

I think that there are cases where I would not help much to see the timeline growing vertically. This is the case with a loaded timeline across a large period. At some point the scale becomes wrong, there are just too many items for the time range. Then I would rather like to see items shrinking, or to merge into bundles, or to vanish away (see below).

The timeline I try to represent ranges across several years, with many events and periods on a daily basis. If I look at one week, it looks very good. If I look at a few months together, it still looks pretty good, but When I look at all the years, it "explodes".

Lets say that within a week range, there are 20 items, it is readable. But now if there are many weeks with as many items, if you zoom out to see, lets say the whole year, you will end up with 50x20 = 1000 items, which makes the timeline unreadable, even though it would grow vertically. Try the performance test with 1000 items, maybe use also random length content text to get also bigger items. The performance is very good (btw, very good job!), however the usability drops severely: I would need a vertically huge timeline to see all the events. But do I want to see all the items in detail at that scale?

The point of shrinking the size of the events, is that at that scale, with that many items, the user is probably not interested in all the detail of each item. But rather he could see an overview, then he would zoom in to see the details.

In such overview, the items could shrink as small as one pixel large, like the SIMILE timeline is doing on the bottom pane (See www.simile-widgets.org/timeline).

An alternative is that the items are merged into bundles, as we zoom out (rather than growing vertically), so the user would see a small bullet with a number on it, that says "there are n items here, if you zoom in you will see the details".

Then we probably want to specify major and minor events, to dictate what can be merged into a bundle and what should stay visible.

Another alternative I can think of, is that, as we zoom out, the minor items would vanish away (loosing size and opacity), like google maps is doing with photos (See https://maps.google.com/, check the "Photos" switch). So at a large scale, some items remain visible in details. The others gain in size and opacity as we zoom in.

Thoughts?

Hi, thanks for your thoughts. Your idea on major and minor items is interesting.

We are indeed planning on adding a clustering solution, which will aggregate items when zooming out. That will ensure that both the amount of visible information remains usable/limited, and will prevent your browser from getting overheated from rendering too much items.

see also issue #11.

(ah, sorry, I did not check the existing issues, my bad. Yes, that's issue #11)

Good point about the browser overheating. The third alternative may look awesome but is probably also very heavy for the browser!

Hello, Just want to ask, is there any progress with this issue, because this will be very nice and needed feature indeed.

Hi opela, I'm sorry, there is currently no progress on this issue from our side. Just a lack of time/priority. We cannot implement this feature on short term ourselves. Who knows someone external can find some left-over Friday afternoon, after all, its an open source project.

Hi, I solved it with a workaround.. not perfect, but it works

use linked timetables. The first timeline with no data as axis only and put the second timeline in an

with scrollbars.

After a little css tweeking it may look quite cool..

Greets, G.

Hi, Thanks for the workaround nick0816, but I'm unable to set up properly the linked timelines- the timeline with the data has groupSize of 150px, which causes the axis to be 150px smaller than the axis of the timeline wit No data, causing different width of the two timeline axis. As a result the two timeline axis are perfectly matching on the right corner, while on the left corner of the axis - about 2 days difference. (without grouping, the two timelines are perfectly matching all over the axis)

Is there a way to apply the groupSize property on timeline with no data?

Whats the latest update on this issue? is there anybody working on it?

in my case im using groups, so all i need is when there are more groups than fit with in the timeline vertically (assuming height is set), then vertical scroll bars appear and scroll everything apart from the top axis.

The project has been put on the back burner last period, and there hasn't been worked on any of the open feature requests. I hope/expect next period will be a better one for this project - at least there is plenty ideas to bring the Timeline and the other visualizations to the next level.

In my case similar to @JonnyGibson 's there are dozens of groups and I need to enable scrolling to be able to work with them. Vertical scrolling is really the only missing feature for us.

+1 for this feature request, it would make the library much more usable than now for mid to large timelines with more events than fit the div height. As said in #77 : I second this request, It would be extremely useful to be able to scroll up and down just as easily as left and right, once the number of event rows does not fit into the timeline height. I am running into exactly the same kind of trouble as described by op in this timeline implementation: http://weboflaw.com/timeline.html

Hope the new revision is going all right, and thanks for creating such great library!

You can find the new library at http://visjs.org. It is currently in early stage and only has half the features of the old library.

Feel free to give fixing this issue a shot yourself, would be great to have this working.

Hi, I've created an example of how to achieve this functionality (based on @nick0816 's suggestion). Please see: example28 in my repo: https://github.com/auwnch/chap-links-library-addition The example is based on example10 in the library, so a diff between the two would show the code I added. @JonnyGibson and @husayt - I also used groups, so maybe you'll find it useful, but I hope the example is also helpful to @d0840001 and @opela Also associated with Issue #77 I've included the basics of vertical navigation up and down. I know this requirement is quite old, but I hope this helps someone, Cheers, Auwnch

@auwnch great solution. Thank :)

@grigovic glad you found it useful :)

@auwnch I have implemented your suggested code for the vertical scroll which works great, but there is still an issue where upon scrolling you adjust an editable item or drag left/right on the timeline the vertical scroll will go back to the top.

Have you experienced this? If so, did you find a workaround? I've been at it for about 6 hours now and still haven't been able to find a viable solution without completely adjusting the repaint/reflow functions.

I appreciate any assistance =0)

almende / chap-links-library

Timeline: content overflow should create a vertical scrollbar, and keep axis fixed and visible #14