Working with dates
The first four spreadsheet columns (A-D) are the date of your timeline entry. You can just enter the year, or you can get down to details such as month, day and even time of an event. You must enter at least the year, except for a 'title' slide. (To enter BCE dates, use a negative year, such as -500)
You have the option to add end dates (columns E-H). Again, you can just enter the year, or you can get as detailed as you like. End dates will cause TimelineJS to display spans of time (a.k.a. eras) in the bottom portion of the timeline. If your event doesn't have an "end date", leave these blank—you don't need to repeat the start date.
If you need more flexibility about how dates are shown in a slide, you can use column I to specify a "display date," which will override any decisions TimelineJS makes about how to show the date. This can be helpful if the actual date is not known, but you need to specify the date so that TimelineJS know how to display it relative to other events. The display date is used on the slide where it is specified, and on labels for the "next" and "previous" buttons which lead to that slide.
Columns J and K of the spreadsheet contain the headline and the body text that will be displayed on each slide of your timeline.
Adding media (optional)
TimelineJS can pull in media from a variety of sources and has built-in support for Twitter, Instagram, Flickr, Google Maps, DropBox, DocumentCloud, Wikipedia, SoundCloud, Storify, iframes, major video sites (YouTube, Vimeo, etc.) and more. Read more about the media types TimelineJS works with.
You have the option to add media to your slides in columns L-O. Under the Media column (L) enter the link (URL) to the media you wish to display. TimelineJS supports multiple media types. In the next column (M), you can credit the media's original source, and in column N you can include a short caption.
If TimelineJS doesn't support the media type you want on your slide, you can often make do by entering
<iframe> markup in the Media column (L) instead of a URL. You can also enter
<blockquote> markup in column L.
Markers for slides that contain media show a small icon representing the type of media used. If you'd like, you can show a thumbnail of the media there, instead. Simply add the URL of the image you'd like to use to column O.
Titles and Eras
The Type column (P) can be used to activate a few more specialized features in Timeline. In most cases, you'll leave it blank.
If you use the word
title in this column, then Timeline will use the row as a "title slide," which is shown before all others, and which does not require a date. Title
slides do not appear in the markers in the navigation component of the Timeline. You should only have one row with "title" in the Type column.
If you use the word
era in this column, then Timeline will use the row to label a span of time in the "axis" area of the timeline navigation component. Each era gets
a distinct color, which is not currently configurable. At this time, overlapping eras are not well-supported, but we are investigating design strategies for that use case.
TimelineJS automatically orders slides according to their start date, and always puts the title slide first, no matter how the rows in your spreadsheet are ordered. If you need to have two slides with exactly the same start date, then the row which appears first in the spreadsheet will be shown first in the timeline.
Using the Group column (Q), you can organize your slides by groups (formerly known as "tags"). You can put any values you want in the Group column. Events with the same group will be put in the same row or adjacent rows, and TimelineJS will use the text from the Group colum as a label at the left edge of the row(s) containing those events. The group text will also be displayed on each slide. If you like, you can have a mix of slides in groups and slides with a blank value in the Group column.
Publishing your Timeline
Now that you have your spreadsheet set up, you can turn it into a timeline in a couple easy steps.
Publish to Web
Go to the File menu of your Google spreadsheet and select "Publish to the Web." In the window that pops up make sure you are under Link (it should place you there by default), then make sure that "Automatically republish when changes are made" is checked and that "Entire Document" is selected.
If you are using Google Apps for Work or Google Apps for Education, this may not work without the cooperation of your local Google Apps administrator, even if you follow the steps exactly.
Copy the link.Copy the link.
Open the TimelineJS site. Paste your copied link into the "Google spreadsheet URL" box. There you are also given some styling options to play around with if you desire.
Grab the embed code
Copy the embed code displayed and paste it on your site wherever you'd like it to appear.
Congratulations! You should be well on your way to creating a simple timeline and playing within the Google spreadsheet boundaries. If you have any specific questions, please email us.