Day 23: TimelineJS--Build Beautiful Timelines

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, but finally I zeroed down 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 can use either Google spreadsheet or a JSON based REST backend as its datasource. Timelines can handle a variety of content types and can pull 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. You can 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 can expect.

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=https://github.com/shekhargulati/day23-timelinejs-demo.git

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 will be accessible at http://day23demo-{domain-name}.rhcloud.com/. Replace domain-name with your own unique OpenShift domain name (also sometimes called a namespace).

After the application is deployed you can use curl to create new stories.

$ curl -i -X POST -H "Content-Type: application/json" -d '{"url":"https://www.openshift.com/blogs/day-21-docker-the-missing-tutorial","startDate":"2013,11,18"}' http://day23demo-{domain-name}.rhcloud.com/api/v1/stories

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 for more information.

The only information that is specific to this post is the format of the JSON expected by TimelineJS. TimelineJS expects data to be in the format shown below.

{
    "timeline":{
        "headline":"30 Technologies in 30 Days -- By Shekhar Gulati",
        "type":"default",
        "text":"Learn 30 Technologies in 30 Days","startDate":"2013,10,29",
        "date":[
            {
                "id":"528cb57de4b015e760ed06be",
                "url":"https://www.openshift.com/blogs/day-1-bower-manage-your-client-side-dependencies",
                "headline":"Day 1: Bower--Manage Your Client Side Dependencies",
                "text":"<p>...</p>",
                "startDate":"2013,10,29",
                "asset":{
                    "media":"https://www.openshift.com/sites/default/files/bower-                        logo.png"
                }
            },
 
            {
                "id":"528cb5bee4b015e760ed06bf",
                "url":"https://www.openshift.com/blogs/day-2-angularjs-getting-my-head-around-angularjs",
                "headline":"Day 2: AngularJS--Getting My Head Around AngularJS",
                "text":"...",
                "startDate":"2013,10,30",
                "asset":
                    {
                        "media":"https://www.openshift.com/sites/default/files/angularjs-from-30k-feet.png"
                    }
                }
            ]
    }
}

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 createStoryJS function initialize a new timeline.

<!DOCTYPE html>
<html lang="en">
 
  <head>
    <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-->
    <style>
      html, body {
       height:100%;
       padding: 0px;
       margin: 0px;
      }
    </style>
    <!-- HTML5 shim, for IE6-8 support of HTML elements--><!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
 
    <script type="text/javascript" src="lib/jquery-min.js"></script>
    <script type="text/javascript" src="js/storyjs-embed.js"></script>
    <script>
      $(document).ready(function() {
        $.get('/api/v1/stories',function(result){
            createStoryJS({
                type:   'timeline',
                width:    '100%',
                height:   '600',
                source:   result,
                embed_id: 'timeline',
                debug:    true
            });
 
        });
      });    
    </script>
 
 
  </head>
  <body>
      <div id="timeline"></div>
        </body>
</html>

That's it for today. Keep giving feedback.

What's Next