Timeline

The Timeline widget displays a set of chronological events in a timeline. The event data can come from another widget on the mashup page, an Atom or RSS feed, or a file that contains data in comma-separated value (CSV) format.

NOTE: The Timeline widget is currently available on Lotus Greenhouse. You can use it in the version of IBM Mashup Center that is posted there, or you can search for it in the catalog and download the WAR file to your local machine. For additional information about the Timeline widget, see the readme file located in the Timeline/data folder in the WAR file.

You can populate the Timeline widget with events in the the following ways:

• Create an RSS or Atom feed in the catalog, add it to Lotus Mashups, and then drag it onto the Timeline widget to generate an automatic wire.


• Configure the Timeline widget settings directly with the URL of a file that contains data in CSV format in the Data Source URL field


• Configure the Timeline widget settings directly with the URL of an RSS or Atom feed in the Data Source URL field, for example http://rssfeeds.usatoday.com/usatoday-NewsTopStories

In view mode, by default, the events are displayed as dots and bars along a horizontal axis. The widget displays two bands of the same timeline. The main (top) band typically has a shorter interval than the secondary (bottom) band. For example, you can configure the top band to display events in days and the bottom band to display events in months. You can also hide the secondary band and display only one band. Using the buttons at the bottom of each band, you can zoom the time interval in and out, step through each event one by one, and jump to the first or last event.

When you display events in a time line in the Timeline widget, you can hover your cursor over a particular event and see a description of the event.

Configuration tips

When configuring the Timeline widget, use the following tips:

• If you want the Timeline widget to display data from a feed or a CSV file, add the URL to the Data Source URL field. By default, the widget displays data from a sample TXT file called example.txt. The CSV text format is defined by dojo CsvStore and documented on the Dojo Toolkit Web site. The column names go in the first row of data. Cell values are comma-separated, and any cell value containing a comma should be double-quoted, for example "Caine Mutiny, The". Cell values containing double quotes should also be double-quoted, and the interior double-quotes should be doubled, for example "The Sequel to ""Dances With Wolves""".



• Select the type of interval you want to display in both the main and secondary bands. You can select seconds, minutes, hours, days, weeks, months, years, decades, centuries, and even millenniums. To hide the secondary band, clear the Show secondary band check box.



• Use the following tips when filling in the element fields:
  
  
  
  • Modify the start and end dates as needed in the Start date element name and End date element name fields. The element name is the name of the feed element, data item, or table column name that contains either the start or end date. Examples of these values include gd:when.startTime and gd:when.endTime. The Timeline widget can parse dates in many formats, including some locale-specific formats, but we recommend the following international date format: 2009-02-12 16:40:03 EST. Here is another common international date format that you can use: 2009-01-29T16:40:03Z and 2009-01-18T16:40:03+00:00.
  
  
  
  • Modify the event title as needed in the Title element name field. The element name is the name of the feed element, data item, or table column name. An example value for this field is title.
  
  
  • Modify the event description as needed in the Description element name field. The element name is the name of the feed element, data item, or table column name that contains the event description. Example values for this field are content and description.
  
  
  • Modify the event category as needed in the Category element name field. The element name is the name of the feed element, data item, or table column name that contains the event description. An example value for this field is category. The category is optionally used to control the color of the event, with the default being '1' for blue. Other predefined categories and colors are '2' for red, '3' for green, '4' for orange, and '5' for purple. If you have access to the server on which the Timeline widget WAR file is installed, you can add or modify category colors by doing the following steps:
    
    
    
    1. Edit or add the image files in \Timeline\images: event-n.png, event-extended-left-n.png, and event-extended-right-n.png, where n is the category number for that color.
    
    
    2. Edit or add the style classes in \Timeline\timeLine.css: timeline-event-extended-middle-n, where n is the category number for that color.
    
    
    
    
  
  
  • To see which elements are available to use, load the feed URL in your browser and view the page source. If the feed is an Atom feed, you can reference elements within the tag. If the feed is an RSS feed, you can reference elements within the tag. For more information about the element fields, see the readme file located in Mashups_install_root\mm\installedApps\timeline.ear.ear\timeline.war.
    
  
  
• To add new events from other widgets to an existing timeline, select the Add events to existing ones check box. If this check box is not selected (the default), the content of the timeline get replaced when events are received from another widget.

Events

See the following table to learn which events the Portal widget can send and receive:

Send

Receive

Select Event as Table: when clicking on or activating an event, sends event data as table. Title as Text: when clicking on or activating an event, sends event title as text. Description as Text: when clicking on or activating an event, sends event description as text. Start Date as Timestamp: when clicking on or activating an event, sends event start date as timestamp, for example 2009-05-21 19:00:00. End Date as Timestamp: when clicking on or activating an event, sends event end date as timestamp, for example 2009-05-21 23:59:59. Category as Number: when clicking on or activating an event, sends event category as number.

Accept Feed URL using URL: receives event from a feed URL. Accept Data using Any Data: receives event in any format, for example a table, text, object, or array. Center to Date using Timestamp: receives a timestamp to center the timeline on. The timestamp format is YYYY-MM-DD HH:MM:SS, for example 2009-05-21 19:00:00.

Example scenario

Goal: Display a feed timeline by specifying a feed URL in the Timeline widget configuration settings.


Steps required:

1. Hover your cursor over the Timeline widget, click the menu options icon , and select Edit Settings.


2. In the configuration window, in the Data Source URL field, type the URL of the feed, for example http://eventful.com/atom/events/?q=&location_type=metro_id&location_id=8&l=Boston+metro+area&sort_order=Popularity.


3. Leave the default values in the Main band interval and Secondary band interval fields.


4. In the Start date element name field, replace the default value with gd:when.startTime.
   
   

   Note: To see which elements are available to use when configuring additional Timeline widgets, load the feed URL in your browser and view the page source. If the feed is an Atom feed, you can reference elements within the tag. If the feed is an RSS feed, you can reference elements within the tag. For more information about the element fields, see the readme file located in Mashups_install_root\mm\installedApps\timeline.ear.ear\timeline.war.

   
   


5. In the End date element name field, replace the default value with gd:when.endTime.


6. In the Title element name field, replace the default value with title.


7. In the Description element name field, replace the default value with content.


8. Click Save. Now the Timeline widget should display the chronological data from the feed.