Visual Timeline Gadget

Timeline Gadget for Google Spreadsheets written by David Huynh and enhanced by JR

This gadget is used with Google spreadsheets to create an interactive timeline of date driven information - such as historic events, milestones, schedules, and

other items defined in terms of dates. Check out a preview of this gadget on a published spreadsheet or create your own timeline now using your own copy of a sample spreadsheet (clicking the prior link will immediately create a copy of the sample spreadsheet on your Google Docs list if you are logged in to your Google account)


This gadget was built using the following components:

  • Google Spreadsheet gadgets API: gives access to spreadsheet data from within a Google gadget.
  • Simile Timeline Visualization Library: provides interactive presentation of items which are categorized by dates. Originally produced as part of the MIT Simile Open Source program, the Timeline component is a highly customizable, easy to use visualization of events which uses basic browser capabilities (javascript). The component was invented and developed by David Huynh.

Purpose of the Timeline Gadget:

The Timeline is a great way to present date-driven information in a concise, visual and interactive way. It provides the viewer the ability to change the scope of time displayed by simply dragging the timeline left or right as well as the ability to see details of events by clicking on them. Most importantly, the Timeline gadget enables visualization of the data outside the spreadsheet itself. Once a Timeline is created and connected to data in a spreadsheet, it may be published to iGoogle or other sites which allow Gadgets, iFrames or full web pages. As spreadsheet data changes, the Timeline can reflect those changes automatically for all viewers.

How to add the Timeline Gadget to your spreadsheet:

  • Within the Google spreadsheet editor, click the chart icon and select "Gadget..." or use the "Insert" menu and select "Gadget...".
  • Select the "Chart..." category in the left hand side of that dialog
  • Find the Timeline Gadget in the list on the right side of the dialog and click "Add to Spreadsheet". If you cannot find the Timeline Gadget in the gadget picker, use the "Custom..." category, and enter the XML spec of this Gadget:
    http://hosting.gmodules.com/ig/gadgets/file/114448529270295376137/timeline-gadget-v1-r4.xml

How to set up the Timeline Gadget:

The Timeline Gadget has several settings for customizing the appearance of the timeline:

  • Range: an input range of spreadsheet cells to include in the timeline. The range can be any reasonable size - but keep it small, since the gadget is small. This gadget DOES expect the following specific information in that range:
    • TITLE: (mandatory) The text to show on the timeline itself for each dated event. This should be short, as it needs to display in a small space.
    • START: (mandatory) The start date of the event, or the key, single date of the event.
    • END: The end date of the event if the event spans more than a single date. Note: the display of an event which spans a start and end date will appear as a line, whereas an event with only a start date will appear as a more visible "dot".
    • DESCRIPTION: The longer, more complete text describing the event which appears in a "bubble" when the event is clicked in the timeline. This field may contain html links using the <a> tag.
    • IMAGE: The URL of an image which will show in the "bubble" which displays when the event is clicked.
    • LINK: The URL of a link which shows in the "bubble" which displays when the event is clicked.

    • Note: The column headers should be labelled exactly as shown above (e.g. "title", "start", etc), but may appear amongst other columns in the spreadsheet and in any order.

  • Title: The text title to be displayed at the top of the timeline frame.
  • Upper Interval: The time interval to be displayed - select from "week", "month", or "year".
  • Upper Interval Width: The width of each interval - choose any one of 7 settings, from xx-narrow (25 pixels) to xx-wide (1000 pixels per). The "medium" setting is 200 pixels per interval and is the default width.
  • Lower Interval: Same as the Upper Interval described above, but for the lower interval.
  • Lower Interval Width: Same as the Upper Interval Width described above, but for the lower interval width.
  • Upper Background Color: Sets the background color of the Upper band of the timeline. Enter either a color name (e.g. red, blue, white, etc), a 3 digit code (#333, #fff, etc.) or a six-digit octal color code (e.g. #333333, #f2D0C3, etc.)
  • Lower Background Color: Same as the Upper Background Color but for the lower interval.
  • Highlight Color: Sets the base color of the highlighted section in the center of the lowerband using the same color entry rules described in the Upper Background Color described above. Note that this color shows slightly differently than the strict color setting used, as it is semi-transparent on top of the Lower Background Color.

Use the 'edit' link at top left to select a range of cells to include in the Timeline as well as all the other setup settings as described above.

Output of the Gadget:

The Timeline gadget produces a rectangular window with two horizontal sliding time scales (the Upper and Lower Intervals). Each time interval may be "dragged" using the mouse - to the right, to go backward in time, or left, to go forward in time. The highlight section in the lower interval reflects the scope of dates displayed at any one time in the upper interval. Every item displayed in the upper interval may be clicked to see the other associated information from that row in the spreadsheet, such as the title, long description, image, link and start-end time values.

Other Features:

  • The "pop-out" link will display this gadget outside the spreadsheet on it's own web page. Using the URL of that page, you can display the timeline itself outside the spreadsheet, and as the spreadsheet data changes, that separate web page will reflect updated timeline (when refreshed in the browser).
  • The "help" link will display simple help information, similar to the information on this page for quick access within the gadget.
  • Comments