Day 23: TimelineJS–Build Beautiful Timelines - Archived

Today it took me a lot of time to find the right topic that I was comfortable with. I started with brain, then looked at Twitter Server and finally zeroed in on TimelineJS. So, today for the 30 day challenge, we will learn how to build a beautiful timeline for this blog series using TimelineJS.

TimelineJS logo

What is TimelineJS?

TimelineJS is an open source library which helps to build beautiful and interactive timelines. It uses a Google spreadsheet or JSON based REST backend as its datasource. TimelineJS handles a variety of content types and pulls in media from a variety of sources. Some of the sources that are currently supported include the following:

  1. Twitter
  2. Google Plus
  3. Flickr
  4. Youtube , Vimeo , DailyMotion
  5. Google Maps

TimelineJS Demo

The demo application that I have build for today shows 30 days blog series as a timeline. View the live application running on OpenShift here.

When a user goes to the ‘/’ url of the application, they will see a timeline consisting of all the blogs published in the series. Behind the curtain, we make a REST(/api/v1/stories) call to fetch all the stories in a format TimelinsJS expects.

TimelineJS logo

Github Repository

The code for today’s demo application is available on github: day23-timelinejs-demo.

App up and running in under two minutes

This step assumes you have already installed the OpenShift client tools. Please refer to the OpenShift documentation for information on installing the client tools.

We will start by creating the demo application. The name of the application is day23demo.

$ rhc create-app day23demo tomcat-7 mongodb-2 --from-code=

This will create an application container for us, called a gear, and setup all of the required SELinux policies and cgroup configuration. OpenShift will also setup a private git repository for us using the code from github application repository. Then it will clone the repository to the local system. Finally, OpenShift will propagate the DNS to the outside world. The application is accessible at http://day23demo-{domain-name} Replace {domain-name} with your own unique OpenShift domain name (also sometimes called a namespace).

After the application is deployed use

curl</curl> to create new stories.
<blockcode language="">$ curl -i -X POST -H "Content-Type: application/json" -d '{"url":"","startDate":"2013,11,18"}' http://day23demo-{domain-name}
## Under the hood##
This application consists of two parts -- REST backend built using Spring framework and Front end built using TimelineJS and jQuery. In my yesterday's post, I covered in detail how to build a RESTful backend using Spring framework and MongoDB. Please refer to [day 22 blog](/day-22-developing-single-page-applications-with-spring-mongodb-and-angularjs) for more information.
The only information that is specific to this post is the format of the JSON expected by TimelineJS. TimelineJS expects data in the format shown below.
<blockcode language="">{
        "headline":"30 Technologies in 30 Days -- By Shekhar Gulati",
        "text":"Learn 30 Technologies in 30 Days","startDate":"2013,10,29",
                "headline":"Day 1: Bower--Manage Your Client Side Dependencies",
                    "media":"                        logo.png"
                "headline":"Day 2: AngularJS--Getting My Head Around AngularJS",
The id and url fields are not required by TimelineJS.
The index.html specifies the application user interface. On document ready, we make GET request using jQuery. The data from the GET call is given to TimelineJS which renders the timeline in div with id ***timeline***. The <code>createStoryJS

function initialize a new timeline.

<!DOCTYPE html>
<html lang="en">
    <title>30 Technology in 30 Days Timeline</title>
    <meta charset="utf-8">
    <meta name="description" content="30 Technology in 30 Days Timeline">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-touch-fullscreen" content="yes">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <!-- Style-->
      html, body {
       padding: 0px;
       margin: 0px;
    <!-- HTML5 shim, for IE6-8 support of HTML elements--><!--[if lt IE 9]>
    <script src=""></script><![endif]-->
    <script type="text/javascript" src="lib/jquery-min.js"></script>
    <script type="text/javascript" src="js/storyjs-embed.js"></script>
      $(document).ready(function() {
                type:   'timeline',
                width:    '100%',
                height:   '600',
                source:   result,
                embed_id: 'timeline',
                debug:    true
      <div id="timeline"></div>

That’s it for today. Keep giving feedback.

Next Steps

Comments are closed.