Interactive Timelines

Create beautifully crafted timelines by simply filling in a Google Spreadsheet and using TimelineJS

TimelineJS can pull in media from different sources. It has built in support for:

Twitter, Flickr, Google Maps, YouTube, Vimeo, Dailymotion, Wikipedia, SoundCloud and more media types in the future.

Click on the ‘File formats’ link in the top menu to locate the Google Spreadsheet template.

Click on the ‘Google doc Template’ button to open the Google Spreadsheet and start building your timeline.

Once the spreadsheet is open, click on the ‘Use this Template’ button to start editing the template

The spreadsheet is now ready to be edited and your timeline ready to be built. Whilst not every field needs to be completed to have a functioning timeline, the more fields you complete and the more media you add, the more engaging your timeline will be.

To rename your spreadsheet, double click on the title at the top of the page.

Enter the new name into the pop-up window that appears and click ‘OK’ to confirm

You can now begin to add entries for your timeline.

Every entry needs to have a ‘Start Date’ & a ‘Headline’ added for the Timeline to work, all other fields are completed if necessary.

Once you have added all the entries you require to your spreadsheet, you need to publish the file to the web before you can turn it into your timeline.

From the ‘File’ menu, select ‘Publish to the Web’

Click on the ‘Start Publishing’ button

Copy the link that appears at the bottom of the pop-up window.

Back on TimelineJS website, click on the ‘Embed Generator’ option in the menu.

Paste the URL copied from your Google spreadsheet into the ‘Google Spreadsheet or other data source URL’ field.

Click on the ‘Preview’ button to view how your Timeline looks

Once you have viewed how your timeline looks/functions in the preview mode, you can either make adjustments or copy the embed code.

To make adjustments, configure the options in the ‘Optional’ panel.

Once your are happy that your timeline is complete, copy the code from the ‘Enmbed Code’ field and paste it into a ‘Post’ on The Breaker (be sure to always enter the code in the HTML editor)