With all the Google Closure news recently, I thought I would play around a little more with what Google has to offer. I’ve been impressed with their charting options that have been available in Google Docs and noticed that they are also available to use outside of Google Docs.
After looking through the Google Visualization API Gadget Gallery I decided upon playing around with the WordCloud chart.
I thought I would use jQuery AJAX to pull the recentl 20 tweets from a user name and then create a Word Cloud using Google’s API.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Sandbox</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="http://visapi-gadgets.googlecode.com/svn/trunk/wordcloud/wc.css"/>
<script type='text/javascript' src='http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js'></script>
<script type="text/javascript">
firebug.env.debug = false; // open minimized
firebug.env.detectFirebug = true; // do not initialize if Firebug is active
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://visapi-gadgets.googlecode.com/svn/trunk/wordcloud/wc.js"></script>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
$(function() {
$('#twitterCloud').click(function() {
draw($('#userName').val());
});
});
google.load("visualization", "1");
function draw(userName) {
var url = 'http://twitter.com/status/user_timeline/' + userName + '.json?count=20&callback=?';
$.getJSON(url, function(data) {
console.log('data: %o', data);
var dataTable = new google.visualization.DataTable();
dataTable.addColumn('string', 'Tweet');
dataTable.addRows(20);
$.each(data, function(i, item) {
console.log('i: ' + i);
console.log('item.Text: ' + item.text);
dataTable.setCell(i, 0, item.text);
});
var outputDiv = $('#wordCloud').css({
'border-width': '1px',
'border-color': '#cccccc',
'border-style': 'solid',
'margin': '10px',
'padding': '10px'
});
var wc = new WordCloud(outputDiv.get(0));
wc.draw(dataTable, null);
});
}
</script>
</head>
<body>
<div>Twitter Username: <input id="userName" type="text" /> <button id="twitterCloud">Twitter Cloud</button></div>
<div id="wordCloud"></div>
<a href="http://jsbin.com/alubi/edit" target="_blank">View, Run, & Edit Source Code</a>
</body>
</html>
No comments:
Post a Comment