Part One: Setting Up Your Spreadsheet in Google Docs

We are going to host the data that will populate your timeline within Google Docs. Why this particular application? One reason to use Google is that it is free. Second, it provides a more convenient way to update your data than through a standard javascript file. Third, once you have "published" the spreadsheet, it will provide a constantly updating feed to your timeline. This means that when you make a change to the spreadsheet, your timeline will instantly reflect this change. A fourth reason is that you can share your spreadsheet with others, allowing them to edit the events on the timeline. As such, you will be able to build a timeline collaboratively with as many people as you'd like—all you have to do is give them access to your spreadsheet.

The following seven steps will tell you how to format your spreadsheet to make it readable for the Exhibit script that powers your timeline. After you've done these initial steps, you may occasionally want to refer to Steps 3 and 4 as they tell you how to populate each individual field for your timeline and how to enhance the output of the data, respectively.

1. Title Your Columns

First, you need to create some titles for your spreadsheet's columns. This will tell the Exhibit script where it can find the information it needs to construct the timeline. Each of the column titles must be in braces, like this {label}.

The number of columns that you title will depend on the different types of information that you will want to be included in your timeline. At the very least, you must have columns titled {label}, {start:date}, and {end:date}. You will most likely want to create columns titled {description:single}, {image:url}, and {eventType}. You can define other columns depending on your needs. For example, you might have an {initials} column so students who add events to the timeline can leave their initials, which you can then choose to have represented on the timeline—or not. You should use only single words for column headers or get creative in your capitalization, as I've done with {eventType}.

Your spreadsheet should now look something like this.

Shows the title of columns within the Google Spreadsheet

N.B. The words to the left of the colon is the name of the column, as far as Exhibit is concerned. The word to the right of the colon tells Exhibit what type of information to expect in that field. If you don't have a colon and a second word, Exhibit will default to seeing the information in columns as "text." For example, {label} is the same thing as {label:text}. The "single" that follows "description" tells Exhibit to expect a string of text.

2. Formatting Your Data As Plain Text

This step is very important: Select all the columns. Make sure you don't just click on the title cell of the column. Rather, click on the column's letter and drag until you've selected all your columns. Then click on the "Format" drop-down box and select "Plain text."

Shows how to make all your columns plain text

If you don't set the columns to plain text, the spreadsheet may reformat your information. This frequently happens to date information. If Google reformats your information, it may not be recognizable to Exhibit and your timeline will consequently not function. Setting all of the columns to plain text prevents this from happening.

3. Putting Information Into Your Spreadsheet

Now that you have titled your columns and have formatted the spreadsheet to plain text, you are ready to start adding data for the timeline. What follows is an explanation of what each of the columns does and how your information should be entered. The {label} and {start:date} columns are mandatory. There must be some information in both of them for an event to display on the timeline. The other columns are all optional.

Of course, if you've added additional columns to suit your needs such as the {intials} column, you can simply add text or links into the column by modelling what you've done here.

4. Enhancing Your Timeline's Output

While your spreadsheet now has the data to generate events on your timeline, it will all be in plain text. By selective use of italics, bolded text, and hyperlinks, you can enhance how your data is displayed in the final timeline. You should not use the spreadsheet's text formatting tools as Exhibit will not recognize these edits. Instead, you can write basic HTML within your spreadsheet. Some codes that you might want use include <i>, <b>, and <a>. You can also use basic HTML to include video within your timeline.

Italics and Bolded Text

For your first entry, "Spook Country Published," you might want to italicize the first two words since they are the title of a novel. To italicize "Spook Country" on the main timeline display, you would change the text in the {label} column to read "<i>Spook Country</i> Published". Don't worry about the fact that it doesn't look italicized in the spreadsheet.

Shows how to italicize words in spreadsheet

Follow the same procedure, but with <b> and </b> tags to bold particular text.


Within descriptions, you might want to provide a citation of your source or additional information about the event. Hyperlinks are an easy way to accomplish this. For writing a link, you will need the URL to which you want to point and a phrase that you want to have linked to this URL. Then use this format in the appropriate column of your spreadsheet: <a href="LINKGOESHERE">PHRASE GOES HERE</a>.

For example, if I wanted to link the description of Spook Country's publication to its Wikipedia entry, I would write in the description, "William Gibson's ninth novel, <a href="">Spook Country</a>, is published in the United Kingdom." I could likewise add italics to the link with additional <i> codes, yielding "...<a href=""><i>Spook Country</i></a>...".

Shows how to add hyperlink to a description

The result is the highlighted portion below:

shows the formatting changes made in the spreadsheet applied to the timeline

Additonal Editing

If you want to have even more control over paragraphing within your description, you can use tags like <p> or <br>. Other useful HTML tags you can use include header codes (i.e., <h1>) and font colors (<font color="pink"> or <font color ="#FF6EB4">). For more font colors, I suggest checking the Hex Hub.


You may also want to add video clips to your description field. These videos can be the sole object in your description field or they can be in addition to a text description. Most video sharing sites like YouTube, Viddler, and Google Video provide code for embedding the video hosted there on another site. YouTube is shown below.

Shows embed code from YouTube

To use a video hosted on one of these sites, just copy the code from this "Embed" field then past it completely into your spreadsheet's description field. In the images below, I am using code from YouTube.

Shows YouTube code embedded in spreadsheet

Tips for Enhancing Timeline Output

For all of these edits (formatting text, adding hyperlinks and video), it will be much easier to see the effect of adding some HTML to your spreadsheet once you have your timeline up and running. You may want to refer back to this section at that time. Also, make sure you do not use HTML tags in the date or image fields.

5. Publishing Your Spreadsheet

Now that you know how to add data to your spreadsheet and enhance it for use in your timeline, you must make the data from your spreadsheet available to outside applications, such as your timeline. To do this, you need to "Publish" your spreadsheet. Publishing creates a stable URL for the spreadsheet that allows you to share a read-only version with others, and it creates a feed from which the Exhibit script in your timeline's web page will get its data.

To publish your spreadsheet, click on the "Publish" tab on the upper right corner of the spreadsheet.

Shows publish tab

The tab will open, and you will see something very similar to what is below.

shows publish now button

Click the "Publish now" button. You can tell that you've successfully published the spreadsheet as the link listed in this box will turn blue and become active.

Since you want your timeline to update every time you add new information to your spreadsheet, you must select the option to have the spreadsheet automatically re-published when changes are made. Check the box, and then click "Re-publish document."

shows how to re-publish documents

Now any changes you or anyone else makes to your spreadsheet will automatically be incorporated into your timeline. (Do not worry about adjusting the drop down box for which sheets are published. You will only use the first sheet for your timeline.)

6. Getting The Feed For Your Timeline

Having published the spreadsheet, you now need to get the address of its feed. This feed provides your timeline with the data from your spreadsheet. As such, you will need the feed when writing the HTML for your timeline.

First, click on the URL in the Publish tab (see the previous image) to open a new tab or window with your spreadsheet in read-only mode. It will look something like this:

shows view only mode of your published spreadsheet

The next step you take depends on which Internet browser you are using.

For Firefox
If you are using Firefox, right-click anywhere on the page and select "View Page Info". Click on the Links tab in the menu you are given. Look for a row in which Name is "alternate", Type is "Related Item", and "Address" looks something like this:

This is the URL of the feed of the spreadsheet. Right click on that row and choose "Copy". Then close the dialog box. You have now copied the feed URL to your clipboard. Once you have copied the feed, paste it somewhere like a Word document so you don't lose it.

For Internet Explorer or Safari
If you are using Internet Explorer or Safari, right-click somewhere on the page and choose "View Source". Then use the source editor's Find command (Ctrl-F in Internet Explorer and Command-F in Safari) to search for the term "feeds". Doing so should land you in the middle of the feed's URL. Copy the entire URL (it should begin with "http" and end with "basic", as in the example above) to the clipboard using Ctrl-C or Command-C and close the window showing you the website's source. You have now copied the feed URL to your clipboard. Once you have copied the feed, paste it somewhere like a Word document so you don't lose it.

7. Your Spreadsheet Is Finished

Your spreadsheet is now complete and ready to provide your web page with the data it needs to produce a timeline. Relax. You're one-third done. To see a complete sample spreadsheet, click here. This sample is in view-only mode, so it looks different than what you will see when you are editing your own spreadshet.

Now that you've relaxed a bit, you'd better write the web page.

Creative Commons License
Timeline Tutorial by Brian Croxall
Exhibit and Timeline Scripts by MIT's Simile Project