content: package com.chap.links.client;
  
  import java.util.Date;
  
  import com.chap.links.client.Timeline;
  import com.google.gwt.core.client.EntryPoint;
  import com.google.gwt.i18n.client.DateTimeFormat;
  import com.google.gwt.user.client.ui.RootPanel;
  import com.google.gwt.visualization.client.DataTable;
  import com.google.gwt.visualization.client.VisualizationUtils;
  
  /**
   * Entry point classes define <code>onModuleLoad()</code>.
   */
  public class TimelineDemo3 implements EntryPoint {
  	Timeline timeline = null;
  	
    /**
     * This is the entry point method.
     */
    public void onModuleLoad() {;
      // Create a callback to be called when the visualization API
      // has been loaded.
    Runnable onLoadCallback = new Runnable() {
        public void run() {
      	// create a data table
      	DataTable data = DataTable.create();
  	    data.addColumn(DataTable.ColumnType.DATETIME, "start");
  	    data.addColumn(DataTable.ColumnType.DATETIME, "end");
  	    data.addColumn(DataTable.ColumnType.STRING, "content");
  	    data.addColumn(DataTable.ColumnType.STRING, "group");
  
          DateTimeFormat dtf = DateTimeFormat.getFormat("yyyy-MM-dd HH:mm:ss");
  
          // fill the table with some random data
          int row = 0;
          for (int truck = 11; truck < 15; truck++) {
            Date date = dtf.parse("2010-12-14 08:00:00");
            for (int i = 0; i < 8; i++) {
              int diffHour = 1 * 4 * (Math.random() < 0.2 ? 1 : 0);
              date.setTime(date.getTime() + diffHour * 60 * 60 * 1000);
              
              Date start = new Date(date.getTime());
              
              diffHour = 2 + (int)Math.floor(Math.random()*4);
              date.setTime(date.getTime() + diffHour * 60 * 60 * 1000);
  
              Date end = new Date(date.getTime());
  
              String orderText = "Order " + row;
              if (Math.random() < 0.25) 
                orderText = "<img src='img/product-icon.png' style='width:24px; height:24px; vertical-align: middle'> " + orderText;
              orderText = "<div title='Order " + row + "' class='order'>" + orderText + "</div>";
              
              String truckText = "<img src='img/truck-icon.png' style='width:24px; height:24px; vertical-align: middle'> " + 
                "Truck " + truck;
              
              data.addRow();
              data.setValue(row, 0, start);
              data.setValue(row, 1, end);
              data.setValue(row, 2, orderText);
              data.setValue(row, 3, truckText);
  
              row++;
            }
          }        
          
          // create options
          Timeline.Options options = Timeline.Options.create();
          //options.setWidth("100%");
          //options.setHeight("300px");
          options.setStyle(Timeline.Options.STYLE.BOX);
          options.setEditable(true);
          options.setAnimate(false);
          options.setEventMargin(1);			// minimal margin between events 
          options.setEventMarginAxis(3);		// minimal margin beteen events and the axis
          options.setShowMajorLabels(false);
          options.setAxisOnTop(true);
          //options.setGroupsOnRight(true);
          //options.setGroupsWidth("200px");
          options.setGroupsChangeable(true);
          
          // Note that we have defined custom styles for the timeline
          // in the file public/timelinestyle.css
          
          // create the timeline, with data and options
          timeline = new Timeline(data, options);
  
          RootPanel.get("mytimeline").add(timeline);
        }
      };
  
      
      // Load the visualization api, passing the onLoadCallback to be called
      // when loading is done.
      VisualizationUtils.loadVisualizationApi(onLoadCallback);    
    }
  }