Timeline GWT documentation

There is a GWT wrapper available to use the Timeline inside Google Web Toolkit (GWT). This documentation assumes you have Eclipse installed, and have GWT installed in Eclipse.

Short guide

To use the GWT version of the Timeline, create a GWT project. Put a copy of the modules gwt-links-timeline.jar and gwt-visualization.jar in a subfolder of your project (for example lib), and add both jar-modules to your project via "Build path", "Add external archives...". Then, add the following lines to the module file MyProject.gwt.xml:

<!-- Other module inherits                                      -->
<inherits name='com.google.gwt.visualization.Visualization'/> 
<inherits name='com.chap.links.Timeline'/>

<!-- External stylesheets                                       -->
<!-- Include at least one stylesheet, else the stylesheets in   -->
<!-- external modules like Timeline.jar are not loaded...(bug?) -->
<stylesheet src=""></stylesheet>  
Thats all, now you can use the Timeline.

Getting started

Step 1: Strip the default Web Application Project

First, we start create a new, default Web Application Project, and strip off all unneeded code and files.

Run the application and check if it works. Enter your name, and press the button. See if you get a message window saying "Hello name!". If everything works correct, you are ready to implement a Timeline.

Step 2: Add GWT Visualization

Now we will add everything needed to use the Google Visualization Tools.

Check if your program still compiles after you restart your application (nothing is yet changed in the interface though).

Step 3: Add the Timeline

Start the application. You have your first Timeline working now.

Custom stylesheet

The style of the Timeline can be changed by applying a customized stylesheet. This stylesheet cannot be referenced in the main HTML page of your project, because the stylesheet must be loaded after the timeline is loaded. Therefore, the stylesheet must be placed in a folder public, which must be located in the same folder as the module file MyProject.gwt.xml and the folders client, server, and shared. To let GWT load the stylesheet, add a reference to the stylesheet in the module file MyProject.gwt.xml:

<!-- Other module inherits                                      -->
<inherits name='com.google.gwt.visualization.Visualization'/> 
<inherits name='com.chap.links.Timeline'/>

<!-- Customized stylesheet for the Timeline                     -->
<stylesheet src="myCustomStylesheet.css"></stylesheet>    

Documentation

At the moment there is no documentation available for the GWT version of the Timeline. Please use the javascript documentation, which describes the available methods, data format, options, events, and styles.

Javascript documentation

Reference sites

http://code.google.com/p/gwt-google-apis/wiki/VisualizationGettingStarted