Google Ajax

This is an example to make annoted timeline chart using google client ajax api
This code do not send your data on cloud, its the javascript that computes at the client side itself.

If you want image visualization then the data is send to the google server for rendering and processing.
So depending on features and business usage, make productive use of lots of google ajax apis provided by google.

google.load(‘visualization’, ‘1’, {‘packages’:[‘annotatedtimeline’]});
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn(‘date’, ‘Date’);
data.addColumn(‘number’, ‘Sold Pencils’);
data.addColumn(‘string’, ‘title1’);
data.addColumn(‘string’, ‘text1’);
data.addColumn(‘number’, ‘Sold Pens’);
data.addColumn(‘string’, ‘title2’);
data.addColumn(‘string’, ‘text2’);
[new Date(2008, 1 ,1), 30000, undefined, undefined, 40645, undefined, undefined],
[new Date(2008, 1 ,2), 14045, undefined, undefined, 20374, undefined, undefined],
[new Date(2008, 1 ,3), 55022, undefined, undefined, 50766, undefined, undefined],
[new Date(2008, 1 ,4), 75284, undefined, undefined, 14334, ‘Out of Stock’,’Ran out of stock on pens at 4pm’],
[new Date(2008, 1 ,5), 41476, ‘Bought Pens’,’Bought 200k pens’, 66467, undefined, undefined],
[new Date(2008, 1 ,6), 33322, undefined, undefined, 39463, undefined, undefined]

var chart = new google.visualization.AnnotatedTimeLine(document.getElementById(‘chart_div’));
chart.draw(data, {displayAnnotations: true});

// Note how you must specify the size of the container element explicitly!


1 Comment (+add yours?)

  1. akku87
    Oct 31, 2010 @ 03:37:05


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s