Skip to Main Content

Digital Learning: Timeline JS

Tutorials

  

TimelineJS uses Google Sheets to compile the data for the timelines. Additionally, it recommends using Flickr for pictures that you might want to include. You can also use other picture-sharing sites or Jing. The links below will help you understand the basics to create your TimelineJS project.

Public Domain Pictures

Find public domain pictures at these sites. If you have an image you would like to use that you can't find on these sites, use Dropbox.

Dropbox

Use Dropbox to upload pictures and generate a public url.

  1. Create a Dropbox account
  2. Once you're logged in, enable a public folder here (you will have to verify your email account)
  3. Upload a picture, select it, and click "copy public link."   
  4. Paste this link into the image box on your spreadsheet

Timeline JS

These resources will help explain Timeline JS. If you need assistance using this software or have questions, please contact the library. We have included links to classes that have used this program.

*NOTE: you will need a Google account to use Timeline JS. If you don't have one, you will be asked to create one. It is easy and free.

Getting Started

Timeline JS is a tool for creating interactive timelines using a Google Spreadsheet. Follow these steps:

  • Create a gmail account and sign in
  • Download the Google Spreadsheet Template from the Timeline JS website.
  • Name your spreadsheet by clicking on the existing title (Copy of TimelineJS Template)
  • Click the "Share" button in the upper right corner and change the access setting to "Anyone on the web can view"
  • If you are working in a group, have one group member create the spreadsheet and invite the rest of you in the Share settings.

Adding Content

To add content, replace the information in the sample spreadsheet.  You can add rows if you need to.

  • Dates: There are three types of dates you can enter: a year, (1999) specific date (2/12/1999), or a range (1999-2004)
    • To enter a year: Select the appropriate cell and go to Format -> Number -> Normal.  Enter the year.  Leave the end date cell blank.
    • To enter a specific date: Type in the date.  Leave the end date cell blank.
    • To enter a range: Type the start year or date in the first box and the end year or date in the second box.  Change the number format as necessary.
  • Other information: Type headlines, text, and captions directly into the spreadsheet.  Try to keep text to one or two sentences.
  • Images: Copy the url of the image and paste it into the media cell.
  • Other media: You can add YouTube Videos, Google Maps, and more.  Post a link in the media box.

Publishing Your Timeline

  • Make sure you have shared your spreadsheet as "Public on the Web"
  • Go to File -> Publish to the Web
  • Make sure the "Automatically republish" box is checked and select "Start Publishing"
  • Copy the url and paste it into the spreadsheet generator on the Timeline JS site (scroll down to Step 3)
  • Under more options, select Language - > Spanish
  • Use the Preview button in step 4 to see your timeline.  You will have to do steps 3 and 4 on the Timeline JS website each time you want to preview your work.  Make sure you are previewing frequently as you work.
  • When you are done with your project, you will send the embed code in step 4 to Dr. Vazquez and we will publish your timelines on the library website (see some examples here).  

Information Literacy and Digital Learning Librarian / Assistant Professor

Profile Photo
Anna Mary Williford
Contact:
(205) 665-6108

Tips and Tricks

  • To add a date BCE, enter it in the spreadsheet as a negative number (-200 = 200 BCE)
  • Make sure not to leave any rows blank in your spreadsheet
  • If a picture does not have a url attached to it, you will need to upload it to a public folder in Dropbox and generate a url (we will discuss how to do this)