The timeline is written in pure Javascript. There is a GWT wrapper written that enables you to use the Timeline from within GWT (Google Web Toolkit). This page explains how the sourcecode is built up. For detailed information about all functions, one can use the JsDoc reference pages.
The sourcecode of the Timeline is in one javascript file, timeline.js.
The file contains a class Timeline, which is defined in the
namespace links.
All important local variables and constants are defined in the constructor.
The constructor requires a parameter with teh container element inside which
Timeline will be created.
The constructor calls the function create(). This function creates
a frame element. Inside the frame, a canvas is created. The html elements for
the axis and the events are added to the canvas.
After the Timeline is constructed, it can be filled and drawn via the function
draw(data, options). The parameter data is a DataTable which
contains the events. options is an optional name-value map containing
settings for the timeline such as startDate, endDate, widht, height, layout.
The function draw() loads the data, draws the axis, and draws the
events.
The Timeline can be moved by dragging it. When moving the Timeline, the canvas is moved inside the frame. To prevent the user from seeing an undrawn area when moving, the actual with of the canvas is three times the width of the screen, and only the middle part is visible. After the mouse button is up again, the the whole timeline is redrawn again. When zooming, the timeline is redrawn after each zoom action. This is needed because the axis changes and possibly the scale too.
Todo...