Timeline: Navigation up and down possible?

[harpreets]

I tried a quick variation of the Grouping example included with the timeline download to make a ListView grid render. The data I have populates the timeline similar to a list and has approx. 100 rows (each row then has grouped items in that case as in the grouping example)

The navigation buttons do have left and right option. However, when the data grows beyond a certain height, panning up and down would also be good to have.

If something like is not already included, can somebody point to the appropriate code and modification approach for this plugin which I could then have a look at, modify and even push the variation if required.

[josdejong]

That makes sense indeed. What the Timeline is currently lacking at all is a vertical scrollbar when contents do not fit vertically, see also issue #14.

[harpreets]

@josdejong
Thanks for the reply. Would it be possible to point to the approach in a bit detail about how to go about modifying the plugin to add this vertical scroll support? I tried going through the code but with other tasks at hand currently a bit short of time. If somebody who has worked on the code could provide a little detail about the modification, that would make the task easier for me to go forward.

[josdejong]

There is a big revision planned for the visualizations, just started. I hope we can catch up again with all the bug reports and feature requests (amongst them #14 is an important one).

[EnricGTorrents]

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!

[MiikaL]

If a vertical scrollbar was added, how would that interact with the mouse-scroll zoom functionality?

[EnricGTorrents]

They are controlled by different mouse actions. Scroll wheel controls zoom, dragging the timeline right and left moves it in either one of those directions, up and down could move it in the vertical axis. The feature requested is not the addition of a vertical scroll bar, is for the timeline to be draggable in the vertical axis just as it is now in the horizontal one. If anyone has any suggestion on how to implement it please drop me a line.

[JonnyGibson]

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

is there a new revision happening? my understanding was that there wasn't anything happening on this.

[josdejong]

is there a new revision happening? my understanding was that there wasn't anything happening on this.

yep. Have a look at http://visjs.org. It currently has only half the features of the old library but it is going to be awesome.

[ova2]

Amazing. But doesn't work for IE8 :-).

[harpreets]

Had been waiting for long to share this but I had built a couple of variations from this plugin after my request here. Don't have these online right now, but here's a screencap demo I had on YouTube: http://www.youtube.com/watch?v=4Okz-Nf2Tp0 & http://www.youtube.com/watch?v=6HEHRUz_szE . Notice that scrolling the content up/down in the first one is added with mouse drag but there were configurable options to enable scroll bar too in case that is required. Will try to post the code online soon for these variations soon.

[auwnch]

@harpreets
Hi, I'm new to this forum, but I'm looking for exactly the vertical dragging functionality in the YouTube screencap. Can you perhaps share it? It'll save me some work, otherwise I'll look at building it myself and sharing it...
Cheers,
Auwnch

[arthurvaverko-kaltura]

@harpreets This looks great! I have started working on a scroll option myself ... can you please share your code?
Or to be more specific the way to make the timeline header fixed and the major and minor indicators to span till the end of the scrollable area ?

[auwnch]

OK, I have a version of solving this, it is in my git repository -
example28 (https://github.com/auwnch/chap-links-library-addition) - an amended version of example 10 in chap-2.5.0.
Thanks to the excellent almende chaps for the library (please excuse the pun :-),
and I would be happy to submit a version of timeline.js with integrated changes
if requested.

Here is a brief explanation of the example in my respository:
The fun part is in the functions:

    function moveUp() {
        if (vis1.groups.length != 0) {
            vis1.groups.forEach(function (group) {
                group.top += vScrollSize;
                group.labelTop += vScrollSize;
                group.lineTop += vScrollSize;
            });
            vis1.repaintGroups();
        }
        vis1.renderedItems.forEach(function (item) {
            item.top += vScrollSize;
        });
        vis1.repaintItems();
    }
    function moveDown() {
        if (vis1.groups.length != 0) {
            vis1.groups.forEach(function (group) {
                group.top -= vScrollSize;
                group.labelTop -= vScrollSize;
                group.lineTop -= vScrollSize;
            });
            vis1.repaintGroups();
        }
        vis1.renderedItems.forEach(function (item) {
            item.top -= vScrollSize;
        });
        vis1.repaintItems();
    }

I had to use 2 timelines, the top one (axis) without data to get around a
problem of the scrolled items overwriting the timeline axis major and minor
labels.
Anyway, it should be reasonably easy to now integrate the functions into
timeline.js
Hope this helps,
Cheers,
Auwnch