Easy Timelines with Timeline JS

TimelineIt seems a lot of us here at ProfHacker find timelines useful for teaching purposes. Ethan’s covered BeeDocs Timeline, Konrad’s had a look at TimelineSetter, and Billie’s introduced readers to a variety of timeline tools for PC users. Brian’s written an entire tutorial on building a timeline using SIMILE. I’ve even covered timelines myself, taking a look at Dipity a couple of years ago. (And I’m happy to report that Dipity can now handle BCE dates.)

Recently, I’ve had reason to be looking for a timeline tool again, for use in a group project for class. My teammates and I settled on a new (to us, at least) tool that we learned about after searching around for a bit: Timeline JS.

Clicking the “Examples” tab on their site and perusing the timelines listed there provides a good overview of what the timelines look like. Timelines can handle a variety of content types:

  • Simple text
  • Tweets
  • Google Plus statuses
  • Images
  • Videos
  • Sounds
  • Maps

Timeline JS can easily handle BCE dates (though they aren’t necessary for our project).

A key selling point for us was that, if you embed the timeline in a CMS and are using a responsive theme (we dropped the timeline into a WordPress page, just for testing purposes), it resizes just as it should. Our test timeline looked good on a regular-size monitor, on a tablet, and on a mobile phone.

Using Timeline JS to set up a timeline is incredibly easy. Data for the timeline are stored in a Google spreadsheet (it’s possible to use other data sources—see their FAQ—but a Google spreadsheet is probably easiest for most users), and there’s even a handy template provided. Once the data’s been entered, all that’s necessary is to publish the spreadsheet, copy its URL into the Embed Generator linked on the tool’s home page, and set any desired options. An embed code gets generated, and users need only copy and paste that code wherever they want to put the timeline.

That’s it. Simple and elegant. Best of all? It’s free.

If you’ve given Timeline JS a try, let us know what you think of it. If there are other timeline tools that you use and that you think other readers would appreciate learning about, let us know that, too!

[Creative Commons licensed Flickr photo by chanceprojects]

Return to Top