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