# Timeline sourcecode documentation

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.

## Timeline Javascript

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...