Image may be NSFW.
Clik here to view.
Clik here to view.
Barcharts
Image may be NSFW.Clik here to view.
Radar Charts
Image may be NSFW.Clik here to view.
and many more interesting ways.
So, lets see how we can use this great API to display our data in a more informative way. For demonstration purposes, we will create a simple page where some statistics will be presented using the API. The statistics will be pulled from a spreadsheet that we have previously uploaded to the Google Docs service with simple SQL like queries. The application will look like this:
Image may be NSFW.Clik here to view.
We will be able to select the visualization type to use from the dropbox and the visualization will be displayed in the big white box.
Creating the Spreadsheet
Nothing special here. We will just create a simple spreadsheet with some fictional values. Then we will link this spreadsheet to our application. Go to Google Docs and create a new spreadsheet. We will name it vistutorial and it will have 4 columns :- Name
- Age
- Salary
- Programming Language
Clik here to view.
Now we need to get the URL that we will use to our application. Select the cells you want to be visible, go to Insert->Gadget and select any gadget from the list. Any gadget will do. Click on the "Apply and Close" button and the gadget will be displayed in a floating window. On the upper right corner of the gadget window, you can see an arrow, click on it and select "get query data source url". The URL to use in our application will be displayed. Copy this URL and note it somewhere.
Using Visualizations
All you need to use Google visualizations is to: load some JavaScript files provided by Google, create a Div layer in your page and draw the visualization. This can be better shown in a 1-2-3 steps example: 1) Load Libraries: [code lang="javascript"]<script type="text/javascript" src="http://www.google.com/jsapi"></script>[/code] 2) Create the visualization container: [code lang="html"]<div id="chart_div"></div>[/code] 3) Draw the visualization: [code lang="javascript"] //Load the visualization library with the visualization packages that we will use google.load('visualization', '1', {'packages':['piechart','table', 'linechart','motionchart','ImageChart','gauge']}); //Draw the piechart with our data var chart = new google.visualization.PieChart(document.getElementById('vis_chart')); chart.draw(data, {width: 700, height: 340, is3D: true}); [/code]Implementing Visualizations to Our App
The first thing we need to do is to create our application's layout. HTML: [code lang="html"]<html> <title>Google Visualization Tutorial</title> <head> <link rel="stylesheet" type="text/css" href="css/styles.css"> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript" src="js/scripts.js"></script> <script type="text/javascript"> // Load the Visualization API and the piechart package. google.load('visualization', '1', {'packages':['piechart','table', 'linechart','motionchart','ImageChart']}); </script> </head> <body> <div id="container"> <div id="header"> <select onChange="initialize();" id="visualization"> <option value="PieChart">Piechart</option> <option value="Table">Table</option> <option value="LineChart">Linechart</option> <option value="MotionChart">MotionChart</option> <option value="ImageChart">ImageChart</option> </select> <img src="css/logo.png" id="logo" /> </div> <div id="vis_chart"></div> </div> </body> </html>[/code] CSS: [code lang="css"]#container{ width:768px; margin:0 auto; padding:10px; background-color:#C9CFFF; min-height:500px; } select{ width:200px; margin-right:100px; } #header{ margin-bottom:30px; } #logo{ float:right; } #vis_chart{ -moz-border-radius: 5px; -webkit-border-radius: 5px; border: 1px solid #000; padding: 10px; clear:both; background-color:white; min-height:400px; }[/code] On the first part, we are including the API library from Google, after that, we load the visualization library and we specify the packages we want to load: [code lang="javascript"]google.load('visualization', '1', {'packages':['piechart','table', 'linechart','motionchart','ImageChart']});[/code] We also assign a method to the change event of the select element. The function initialize is responsible for our data to be available to our application: [code lang="javascript"]function initialize() { // Replace the data source URL on next line with your data source URL. var query = new google.visualization.Query('http://spreadsheets.google.com/tq?range=A1:D11&headers=-1&key=0AtbpzGdXYTjpdDdkUlNLcjV2ZWNZNUVveFZzdU05dmc&gid=0'); // Send the query with a callback function. query.send(handleQueryResponse); }[/code] In order to use your spreadsheet with the function above, you should replace the URL provided with the one you got from your gadget. We see that the initialize method, will do a : [code lang="javascript"]query.send(handleQueryResponse);[/code] This, tells us that the callback function that will handle the query response is handleQueryResponse which we will use to set the visualization to the one selected from the dropbox: [code lang="javascript"]function handleQueryResponse(response) { var element = document.getElementById('visualization').value; if (response.isError()) { alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage()); return; } var data = response.getDataTable(); //first clear the visualization container document.getElementById('vis_chart').innerHTML = ''; switch(element){ case "Table": var chart = new google.visualization.Table(document.getElementById('vis_chart')); chart.draw(data, {width: 700, height: 340}); break; case "PieChart": var chart = new google.visualization.PieChart(document.getElementById('vis_chart')); chart.draw(data, {width: 700, height: 340, is3D: true}); break; case "LineChart": var chart = new google.visualization.LineChart(document.getElementById('vis_chart')); chart.draw(data, {width: 700, height: 340}); break; case "MotionChart": var chart = new google.visualization.MotionChart(document.getElementById('vis_chart')); chart.draw(data, {width: 700, height: 340}); break; case "ImageChart": var chart = new google.visualization.ImageChart(document.getElementById('vis_chart')); chart.draw(data, {width: 700, height: 340}); break; } }[/code] This is it! Our application is able to get data from our spreadsheet and present it with the visualization of our choice. You can test the application at this stage and see how it works.Using the Query language to get specific cells
The visualization API supports an SQL like query language that we can use to select, perform actions and data manipulation to our data. For example we could select data based on any cell of our spreadsheet. Lets try to extend our application so that it will be able to display data based on selective criteria. We will add a radio group that will "order" our application to display data by programming language. The first thing to do is add the radio group: [code lang="html"]<form id="languageselect" ><fieldset onChange="filter();"><legend>Filter by:</legend> <label>ASP</label><input type="radio" name="lang" value="ASP"> <label>C</label><input type="radio" name="lang" value="C"> <label>Java</label><input type="radio" name="lang" value="Java"><br /> <label>PHP</label><input type="radio" name="lang" value="PHP"> <label>Ruby</label><input type="radio" name="lang" value="Ruby"> <label>VB</label><input type="radio" name="lang" value="VB"> </fieldset>[/code] and the JavaScript function to handle the query: [code lang="javascript"]function filter(){ var element = document.getElementById('languageselect'); for (var i=0; i<element.length; i++) { if (element[i].checked) { var lang = element[i].value } } var query = new google.visualization.Query('http://spreadsheets.google.com/tq?range=A1:D11&headers=-1&key=0AtbpzGdXYTjpdDdkUlNLcjV2ZWNZNUVveFZzdU05dmc&gid=0'); query.setQuery("select * where D='"+lang+"'"); query.send(handleQueryResponse); }[/code] We set an optional query here: [code lang="javascript"]query.setQuery("select * where D='"+lang+"'");[/code] This selects all rows from our spreadsheet that the programming language (the D column) equals the language we chosen. For an example of this new feature you can check here.Handling Events
You can handle events generated from user actions on your visualizations too. For example we can display the logo of the programming language the person codes in upon selection of a person. To handle events, we have to listen to the events generated by the visualization and handle the data. This can be done by doing this: [code lang="javascript"]google.visualization.events.addListener(table, 'select', selectHandler);[/code] The above code will add a listener to the select event of the table visualization and it will call the selectHandler method to handle the event. So, based on this line of code, lets add the feature described above (display language logo) to our application. We need a placeholder for our logo: [code lang="html"]<div id="langlogo"></div>[/code] and we should also modify our handleQueryResponse method and add the listener to our visualization. Our function now looks like this: [code lang="javascript"]function handleQueryResponse(response) { var element = document.getElementById('visualization').value; if (response.isError()) { alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage()); return; } var data = response.getDataTable(); //first clear the visualization container document.getElementById('vis_chart').innerHTML = ''; switch(element){ case "Table": var chart = new google.visualization.Table(document.getElementById('vis_chart')); chart.draw(data, {width: 700, height: 340,title: 'Jeez Tech Visualization Demo'}); break; case "PieChart": var chart = new google.visualization.PieChart(document.getElementById('vis_chart')); chart.draw(data, {width: 700, height: 340, is3D: true,title: 'Jeez Tech Visualization Demo'}); break; case "LineChart": var chart = new google.visualization.LineChart(document.getElementById('vis_chart')); chart.draw(data, {width: 700, height: 340,title: 'Jeez Tech Visualization Demo'}); break; case "MotionChart": var chart = new google.visualization.MotionChart(document.getElementById('vis_chart')); chart.draw(data, {width: 700, height: 340,title: 'Jeez Tech Visualization Demo'}); break; case "ImageChart": var chart = new google.visualization.ImageChart(document.getElementById('vis_chart')); chart.draw(data, {width: 700, height: 340,title: 'Jeez Tech Visualization Demo'}); break; } //Here we add the listener: google.visualization.events.addListener(chart, 'select', selectHandler); //We set 2 global vars to be available for our handler : window['data'] = data; window['chart'] = chart; }[/code] Now, the only thing to do, is to add the selectHandler method. Just a simple method that will switch case on the programming language value and display the appropriate image: [code lang="javascript"]var selectHandler = function(){ var chart = window['chart']; var data = window['data']; //get the selection object var selection = chart.getSelection(); var message = ''; //go through the object for (var i = 0; i < selection.length; i++) { var item = selection[i]; //Select the third column of the selected row var str = data.getFormattedValue(item.row, 3); } document.getElementById('langlogo').innerHTML = "<img src='./css/"+str+".jpg'>"; }[/code] Our application is able to handle select events now. You can check it out. Here is a screenshot of the application : [caption id="attachment_652" align="alignnone" width="600" caption="Our Visualization API demo"]Image may be NSFW.Clik here to view.
[/caption]
We are ready. Our application is now able to display visualizations, filter them and handle user generated events. The Google Visualizations API is a great tool to create awesome presentations of your data to your pages and applications. We will get back on it in a future post, explaining how you can implement your own data source and some other cool uses of the API.