Add a Timeline to Your Website with Google Charts

Originally published at: http://www.sitepoint.com/add-timeline-website-google-charts/

To grab a reader’s attention, it is a good idea to display your datasets in the form of charts instead of tables. If you are talking about a lot of events on your blog, displaying those events in a chronological order on a timeline will communicate the message in a more effective and interesting manner.

In this tutorial, I’ll teach you how to use Google Charts to add professional looking timelines to your web pages.

Loading Google Charts

Since I’m going to make use of Google API Loader to load Google Charts, I’ll add the following script tag to the header of the page that’s going to display the timeline:

<script type="text/javascript" src="https://www.google.com/jsapi"></script>

I can now use the google.load method to load any Google API. For Google Charts, I’ll need to load the Visualization API along with the timeline package of the API. I’ll also add a callback to know when the API is ready.

google.load('visualization', '1.0', { packages:["timeline"] });
google.setOnLoadCallback(start);

function start() {
  /* This method will be called when the
     Visualization API has been loaded. */
}

Adding an Element to Hold the Chart

The Charts API needs an HTML element to draw its charts. I’ll add an empty div to the body of the page and call it timelineHolder. I can set the dimensions of your timeline by setting the width and height properties of in the CSS. Let’s create a timeline with dimensions of 600px x 300px.

.timelineHolder {
  width: 600px;
  height: 300px;
}

Defining the Timeline’s Data

For this tutorial, let us represent a year in the life of an imaginary traveler, named Alice, on a timeline. Here’s what Alice did that year:

Continue reading this article on SitePoint

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.