timeline options

[gluedtot...@gmail.com]

I am implementing your timeline... absolutely beautiful functionality ... and have run into a few hurdles, most likely my lack of understanding precisely how to configure things.  In fact, this component works so well I am convinced the problem is mine, so I'm asking for guidance (and have already checked the doc and examples).

1.  I would like to either right or left align boxes to their date points (vertical line to date bar).  It defaults to "center" but I can't make it go left or right.  Here is what I tried in the options settings:

                'layout': 'box',
                'box.align': 'left',

I've also seen (and tried) using the name "style" instead of layout but that doesn't seem to matter.  What is the exact name to use?
Also, the "box.align" doesn't seem right... is it?

(I even went into the js source code and FORCED it to left/right with no change in output... so I am undoubtedly doing something wrong OR have a conflict with other things I'm doing on the page.)

2.  In one data record, I tried adding this option to the start/end/content fields there:

'className': 'adblock'

Have defined the class but do not see where it is added to the element nor reflected in the style change.  I have no groups or anything (yet).

3.  Aside from identifying it myself and adding the class through programming (using #2), is there an easier way to highlight or focus on the most recent data box?

4.  When I set the timeline to start at the current time, it does so (I have it with the vertical marker)... but it is aligned to the left of the visible area.  Is there a way to align it to the right side instead?  or center?

Sorry for so many questions, just excited about getting this done and showing it off!

Thanks!

[gluedtot...@gmail.com]

I also meant to ask... what is the distinction between the CHAPS library timeline and the vis timeline... they look the same/similar to me.  Is one older? Or seeing ongoing development?  Or what?

Thanks again.

[Jos de Jong]

1. Try this:

{

    'layout': 'box', 

    'box': {

        'align': 'left'

    }

}

2. Maybe example20_custom_class_names.html can be of help.

3. Not sure if this helps but you can select the item.

4. You have to set both start and end time for the visible window, and you can determine/calculate them yourself. If you want to center around current time you can take the current time minus one day as start, and take the current time plus one day as end.

[Jos de Jong]

vis.js is the successor of CHAP-Links-Library but it is in early stage and doesn't yet offer all features of the old library. The old library is reaching the end of what is possible with the chosen architecture.

vis.js is set up in a modular way and is much more flexible and makes it easier to maintain. It can handle dynamic data much better thanks to the DataSet and DataView components, making it easy to monitor data changes and sync them with a server. Also, the former Timeline and Graph will be merged into a single Timeline component which can display all kinds of data: items, ranges, annotations, lines, etc. in a single view.

[gluedtot...@gmail.com]

Thanks very much for your answers... I have resolved all my issues except getting the appearance of the boxes the way I want, and that must be due to some conflict with some other style class I have to trace down.  I'll figure it out but working on actual functionality now.

I'm feeding all data from the server using MySQL/PHP. and getting the JSON date right for the timeline was a special headache, but done now.

I really like the timeline and am already thinking of other possible uses... if you don't mind, more questions:

1. This example shows a current time marker moving from left to right on the page....
http://almende.github.io/chap-links-library/js/timeline/examples/example14_past_and_future.html

... and this example shows the timeline itself scrolling to a specific date:
http://almende.github.io/chap-links-library/js/timeline/examples/example21_animate_visible_range.html

I'm thinking of a hybrid, where the timeline itself scrolls automatically and the current time remains centered.   Can you give any guidance on how it would be best to approach that?  Maybe creating some offset var and changing a reference to it?

2. Is there a way to use the timeline without actual dates?  more of a sequence... just numbers in a row?  (Maybe use dates but label just numbers?) Just thinking outside the box here.

I'll keep an eye on your vis project, sounds like it will provide a growth path for the future.  Do you think there will be some compatibility with "old" stuff when it is finally ready? 

This is all very nice work and much appreciated!

[Jos de Jong]

Yes with a little creativity and some javascript you can do any kind of animation around the Timeline. You can have a look at the code of examples that you mention. It's basically utilizing the function setVisibleChartRange to apply a visible range.

You can't really use the timeline without actual dates. You can do a little bit of a trick by providing dates on millisecond scale so it looks like a sequence of numbers.

[Kevin McCarthy]

I would love to know how you are getting timeline data from mysql could you tell me how you did it please?