TimelineJS

TimelineJS

Beautifully crafted timelines that are easy, and intuitive to use.

Description

TimelineJS is an open-source tool that enables you to build visually-rich interactive timelines and is available in 40 languages.


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

Twitter, Flickr, Google Maps, YouTube, Vimeo, Vine, Dailymotion, Wikipedia, SoundCloud and more media types are regularly added.

Tips and tricks to best utilize TimelineJS
  1. Keep it short, and write each event as a part of a larger narrative.
  2. Pick stories that have a strong chronological narrative. It does not work well for stories that need to jump around in the timeline.
  3. Include events that build up to major occurrences.Not just the major events.
Sign up for Updates

Get updates, tips and news by email. No Spam.

Stay connected with us on twitter

Make a Timeline

On your site or blog in no time. As easy as 1-2-3 (video tutorial)

Step 1

Create a new Spreadsheet

Create a new Google Spreadsheet using our template. It’s as simple as dropping a date, text, and links into the appropriate columns.

Google Spreadsheet Template

Step 2

Publish to the Web

Under the File menu, select“Publish to the Web.”

In the next window, check the box next to “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 3

Copy/paste URL into the generator

Grab the embed code and paste it on your site where you want your TimelineJS to appear (just like a YouTube video).

Make sure you've published it.

Width
Height
More Options
Optional

Due to recent changes to the Google Maps API, you need a API Key in order to use custom map types.

This will tweak the default zoom level. Equivilent to pressing the zoom in or zoom out button the specified number of times. Negative numbers zoom out.

Slide

You can tell TimelineJS to start at a specific slide number

Copy this code and paste it where you want your TimelineJS to appear.

Examples

Have you made a timeline? Let us know, and we might feature it here.

Le Monde
Chronology of the french presidential race

Radiolab
Color Walking

VH1
Madonna's Most Controversial Moments

ARTE.tv
Comment le progrès nous aura-t-il fait évoluer en l'an 42012 ?

Denver Post: Aurora, Colorado movie theater shooting

GIGAOM
WWDC in the era of the iPhone

Spokesman-Review: A History of Hats

San Antonio Express-News: Money Laundering

History of Electronic & Club Dance Music

History of Ghana

Marketing transmedia: Prometheus

Day & Night Festival

Xieziben

Tutorialzine

Akira Toriyama's World

Austrian Boy Murdered - www.vol.at

Sh*t People Say

Whitney Houston 1963 - 2012

The Republican Run-Up

Revolutionary User Interfaces



Help / FAQ

Have questions? Look below and see if your question is in the FAQ below or search the Google Group. You can also post a question to the Google Group.

Important: Date Formatting Change to TimelineJS (May affect Google Spreadsheet Timelines).

In the latest version of TimelineJS we changed how dates are read so that you have more control over how that date is interpreted. TimelineJS now has precision dating.

For example:
If you enter 2000 in the date column, it will read as 2000.
01/2000 will read as January, 2000 and
01/01/2000 will read as January 1st, 2000.

This might affect some of your existing timelines. The fix is pretty easy though, just fix your dates.

If you're using Google Spreadsheets as your source, you may run into an issue when you try and fix your dates. The date column in the older versions of the template were set to format the dates as mm/dd/yyyy tt:tt. So you type in 2000 and the spreadsheet reformats it to read 01/01/2000 00:00. To fix this, just select the date columns and click "Format > Number > Plain Text".

How do I enter just the year in the Google Spreadsheet?
You need to change the formatting on the date column. Highlight the column and select Format > Number > Plain Text
What browsers does TimelineJS support?

All modern browsers are supported as well as Internet Explorer 8 and above.

If you run into problems with IE8 or IE9 and get a error message saying IE7 is not supported, it may be because you are running the browser in IE7 compatibility mode. Here are directions on how to change the compatibility mode.

Why is my timeline not displaying or why is it stuck at the parsing data screen?
If you're using a Google Spreadsheet as your source, make sure your Google spreadsheet is public and published. Also make sure you don't have any empty rows in the spreadsheet since this can sometimes cause problems.
How many entries will work best in TimelineJS?
Timeline is optimized for up to 100 entries preferably more like 20-30. Anything else may cause a loading issue.
Why is the timeline not showing up when I use 100% height?
100% height means 100% of it's parent's height. If it's parent's height is not set to a pixel value it will be zero pixels. Try using a pixel height instead.
How do I change the height of the timeline?
See here.
How do I embed audio or video?
See here.
Can I change the TimelineJS font?
See here.
How do I hide the bottom timeline?
If this is your end goal it may be easier for you to use a slider tool rather than TimelineJS. Here are some ways you can remove the timeline bar.
How do I use TimelineJS with Wordpress?

There is a plugin for Wordpress.

Here is a link with some coding instructions.

If the Wordpress plugin is out of date you can use the iFrame embed method

Why aren't there thumbnails on my events?
Thumbnails are only shown from Flickr, Youtube, Vimeo etc. That was done for performance reasons. Having a very large image file as a thumbnail really slows down the timeline. Flickr, Youtube etc have actual thumbnail sized images that can be used that don't cause performance issues. You can also create your own thumbnails.
What programing language is TimelineJS written in?
TimelineJS is all javascript, for any php questions please refer to another source.
Can TimelineJS be set up with time denominators other than calendar dates?
Yes. See here for a hacking idea.
Can I change the vertical position of an event in TimelineJS?
Yes. See here for how.
Why does the timeline not show days or hours etc?
The display of the timeline is dynamic. It chooses a time interval that best matches the number of events there are with the amount of time that is covered.
Is it possible to have more than 6 tags?
Not at the moment.
Can I change the number of rows on the timeline?
The default number of rows is 3. If you are using tags and you have more than 3 tags, the number of rows increases to 6.
Can I use an Excel spreadsheet instead of Google Spreadsheets?
No, but it's pretty easy to copy rows into a Google Spreadsheet. TimelineJS uses Google's API to access the data from the Google Spreadsheet and turns it into native TimelineJS json.
Can I use a database as the data source for TimelineJS?
Yes. JSON is the best and safest format for feeding information into TimelineJS from a database. Just use your language of choice to create a json file from your database.
Can my language be added?
Yes! Just grab a copy of the template and replace the language with the language you want to create. You can find your language's two letter code here. Save the file and post it to the Google Group or you can do a pull request on GitHub.
What are tags?
Tags are essentially categories. You can have up to 6 of them to categorize events on the timeline. The events on the timeline will align with their category row. See the screenshot below
How do I add B.C. dates?
You can add dates that are B.C. by using negative years. For example, -100 would be 100 B.C.

About the Project

This project is hosted on GitHub, the largest code host in the world. We encourage you to contribute to the project and we value your feedback. You can report bugs and discuss features on the GitHub issues page, or ask a question on our Google Group

This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0. If a copy of the MPL was not distributed with this file, You can obtain one at http://mozilla.org/MPL/2.0/.

Map tiles by Stamen Design, under CC BY 3.0. Data by OpenStreetMap, under CC BY SA.