Editor’s note: We found an interesting series of articlesLearn 30 New Technologies in 30 Days, is being translated, an update a day, year-end gift package. Here’s day 23.

It took me a while to decide on today’s topic. I started thinking about learning brain, and then I looked at the Twitter Server, but I decided to learn TimelineJS. This article shows you how to use TimelineJS to create a nice timeline for a series of articles.

What is TimelineJS?

TimelineJS is an open source library that helps you create beautiful, interactive timelines. It can use Google spreadsheets or a JSON-based REST backend as a data source. It can handle different kinds of content and get media files from multiple sources, including:

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

TimelineJS Demo

The sample application I built today presents my Learn 30 New Technologies series in 30 Days as a timeline. It’s deployed on OpenShift and you can access it here.

When the user accesses the application’s /, he or she will see a timeline that includes all published articles. Behind this is REST(/ API /v1/stories) to get the article information.

Making the warehouse

Today’s sample application code is available on GitHub.

Run in two minutes

This assumes that you already have the OpenShift client tool installed. Refer to the OpenShift documentation for installation information.

We’ll start by creating a sample application called 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, Gear, set up the public DNS, create a private Git repository, and deploy the application using code from your GitHub repository. Applications can be accessed at http://day23demo-{domain-name}.rhcloud.com/. Replace {domain-name} with your own OpenShift domain (domain names are sometimes referred to as namespaces).

You can use curl to create a new post after deploying your application:

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

The secret behind it

The application consists of two parts — a back end built using the Spring framework and a front end built using TimelineJS and jQuery. In my article yesterday, I detailed how to build a REST backend using the Spring Framework and MongoDB. See Day 22 for more information

The JSON format used by TimelineJS is as follows:

{ "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 "," date":[{"id":" 528CB57de4b015e760ed06be "," 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" } } ] } }

ID and URL are optional.

Index.html specifies the application’s user interface. We use jQuery to make a GET request. The information obtained by GET request is given to TimelineJS to render in the DIV with the ID of timeline. The createStoryJS function initializes the 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, the 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 all for today. Keep giving feedback

Day 23: TimelineJS–Build Beautiful Timelines for SegmentFault