Timeline JS – open source timeline tool

timelineBelow is an example of a timeline I made using Timeline JS. TimelineJS is an open-source tool that enables anyone to build visually, rich, interactive timelines. Beginners can create a timeline using nothing more than a Google spreadsheet.  For my sample, I created the images in Haiku Deck.  Then I exported them to PowerPoint so I could save each as a jpg.  Then I uploaded them to Flickr so I could get a specific URL for each image (I tried Google Drive but it didn’t give me an URL that ended in *.jpg).  This is a lot of steps so you might consider just using online images instead.  This is what my original Google spreadsheet looks like.

Step One:  Create your spreadsheet

Build a new Google Spreadsheet using their template. Drop dates, text and links to media into the appropriate columns.Note: Don’t change the column headers, don’t remove any columns, and don’t leave any blank rows in your spreadsheet.

Step Two:  Publish your spreadsheet

Under the File menu, select “Publish to the Web.”  In the next window, check “Automatically republish when changes are made.” Uncheck all other boxes. Click “start publishing.” This will give you the URL to embed in your HTML file.

Step Three:  Copy/paste spreadsheet URL into the generator box

Make sure you have published the spreadsheet first, then paste the URL at http://timeline.knightlab.com/ .  Feel free to customize then select PREVIEW.

Step Four:  Embed the code into your website

It will look like this when you are done or you can view it in a new browser:

Leave a Reply

Your email address will not be published. Required fields are marked *

CommentLuv badge