Tutorial: Knight Lab Timeline JS

Maybe you need to a make a timeline for displaying the history of the Renaissance, or to discuss medias sociological impact throughout the 21st century, or maybe you just want to make a timeline of your life as a kid until now. Hey whichever topic it may be, here is a simple easy step-by-step process on how to create an epic online timeline with only Google Spreadsheets, no other software needed! Knight Lab offers Timeline JS, a simple tool that lays out a process of creating your timeline using Google Sheets and provides all the tools to make it virtually insightful.

Let’s Get Started!

Build a new Google Spreadsheet using Knight Lab Timeline JS template.

TimelineTutorial3 TimelineTutorial4

You’ll need to copy the template to your own Google Drive account by clicking the “Use this template” button.


The window will redirect you to the Google Spreadsheet.


Step 2:

Now you can begin building your own timeline with filling out the template. The format is simple and easy to follow. Please keep in mind, the order of dates do not have to be in chronological order when working in Google Spreadsheets. The dates will automatically arrange in chronological order once the file is inserted into Knight Lab. If you need to add more rows, scroll to the bottom of the spreadsheet, type the number of rows you need, and click “Add”.

TimelineTutorial7 TimelineTutorial8

Referring to media (column L), it is important when inserting the link for your media to insert the media’s address. To copy the image address, left click on the photo and click ” Copy Image Address”. Then paste the link in column L and be sure to match it with the specific row the media is visually representing . Other sources of media may be pasted here as well, such as YouTube, Flicker, Twitter, and/or etc.




Almost There!

Once you are ready to publish your timeline, click on the File Menu and  Select “Publish to the Web”.


Keep the drop down menu selection setting on “Entire Document” and “Web page”. Click “Publish”. Copy the URL provided. Return to the Knight Lab website, scroll to step 3, and paste your URL within the box.


Make it Public!

Scroll to the bottom of the page and Click “Preview”. Your timeline should be displayed below. By clicking on “Get Link to Preview” the timeline will open in a new tab and you can copy the embed URL for your personal timeline, and then use that iframe code to publish on any website or blog.

Congrats, You did it!

Here’s a sample Timeline of the History of Whittier College for reference (below) that the Student Tech Liaisons created using the following spreadsheet.

Also here is a YouTube video from Richard Byrnes of a tutorial for Timeline JS: