XML FeedsVisualize Your Data with Google Visualization API
By MD on May 30, 2008 | In Ease Of Use | 1 feedback »
Today, here at Google I/O 2nd day, a new Google Visualization API was announced.
What's new?
1. events
2. gadget.draw()
Google Visualization Gadget supports selection events so that a developer can respond to end users.
With draw() method, a gadget can draw any tables only if a table supports pre-defined DataTable APIs.
Let's try the new draw() method with the JSON example.
Instead of writing tables with HTML tags, simply pass DataTable object to Table gadget.
Here's the code.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> | |
<html> | |
<head> | |
<script type="text/javascript" src="http://www.google.com/jsapi"></script> | |
<script type="text/javascript"> | |
| |
google.load("visualization", "1", {packages:["table"]}); | |
| |
var xhr; | |
try { xhr = new ActiveXObject('Msxml2.XMLHTTP'); } | |
catch (e) | |
{ | |
try { xhr = new ActiveXObject('Microsoft.XMLHTTP'); } | |
catch (e2) | |
{ | |
try { xhr = new XMLHttpRequest(); } | |
catch (e3) { xhr = false; } | |
} | |
} | |
| |
xhr.open("GET", DATASOURCE_URL, true); | |
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); | |
xhr.send(null); | |
| |
xhr.onreadystatechange = function() | |
{ | |
if(xhr.readyState == 4) | |
{ | |
if(xhr.status == 200){ | |
the_object = eval( "(" + xhr.responseText + ")" ); | |
handleQueryResponse(the_object.table); | |
}else{ | |
| |
} | |
} | |
}; | |
| |
// Query response handler function. | |
function handleQueryResponse(table) { | |
var data = new google.visualization.DataTable(); | |
| |
// convert to Google.DataTable | |
// column | |
for (var col = 0; col < table.cols.length; col++) { | |
data.addColumn('string', table.cols[col].label); | |
} | |
// row | |
for (var row = 0; row < table.rows.length; row++) { | |
data.addRow(); | |
for (var col = 0; col < table.cols.length; col++) { | |
data.setCell(row, col, table.rows[row][col].v); | |
} | |
} | |
| |
var vis_table = new google.visualization.Table(document.getElementById('table_div')); | |
vis_table.draw(data, {showRowNumber: false}); | |
| |
} | |
| |
</script> | |
</head> | |
| |
<body> | |
<div id="table_div">Loading...</div> | |
</body> | |
</html> |
Thanks a lot, Google Visualization Team! Now that our own data can be easily integrated with Gadget!
1 comment
Comment from: Radu [Visitor] · http://www.radupoenaru.com
Enlarge those code divs, otherwise your code will be useful!
2009/08/14 @ 01:12
Leave a comment
| « Google Visualization API On Your Site Example | Inspiration encouraged by blanks » |
