Google Visualization

1. Google Visualization ISYS 650

2. Google Visualization APIhttp://code.google.com/apis/visualization/documentation/index.html • We can use the Google Visualization API to embed an interactive chart, graph, or other graphic onto your web page. • Visualizations are interactive, and also expose events, such as user mouse clicks.

3. Using Visualizationshttp://code.google.com/apis/visualization/documentation/using_overview.html • Add a <div> to your page. Your page must have an HTML element that will hold your visualization; typically you'll use a <div> in your page. • Load your libraries. A visualization requires three libraries to be included or loaded on the page: the Google AJAX API; the Google Visualization API core; and a library for each type of visualization. • Prepare your data. You'll need to prepare the data to visualize; this means either specifying the data yourself in code, or querying a remote site for data. • Create an instance of your visualization. Instantiate your visualization by calling its constructor and passing in a reference to your <div> element. • Draw your visualization. Call draw() on your visualization and pass in your data to draw your visualization on the page.

4. Code PlayGround • Google's Code Playground lets you play around without opening an external editor, and all of the APIs are loaded for you in the Pick an API box.

5. Using the Code Playground • Pick an API • Edit Code • View Docs • Edit HTML • Debug/Run code • Output

6. Example: Pie chart • Change the template and see the result • Click Edit Html to generate html code • Copy the code and paste to an text editor to create a html file

7. DataTable • Two columns. The first column should be a string, and contain the slice label. The second column should be a number, and contain the slice value. • Example: • data.addColumn('string', 'Task');  data.addColumn('number', 'Hours per Day');  data.addRows(5);  data.setValue(0, 0, 'Work');  data.setValue(0, 1, 11);  data.setValue(1, 0, 'Eat');  data.setValue(1, 1, 2);  data.setValue(2, 0, 'Commute');  data.setValue(2, 1, 2);  data.setValue(3, 0, 'Watch TV');  data.setValue(3, 1, 2);  data.setValue(4, 0, 'Sleep');  data.setValue(4, 1, 7);

8. Examples • GeoMap • Adding two other countries: • China, 100 • Vietnam: 80 • DataTable • Gauge • Motion Chart

9. Gadgets http://code.google.com/apis/gadgets/ • Gadgets are simple HTML and JavaScript applications that can be embedded in webpages and other apps.

10. Creating gadget Using Google Spreadsheet • Create the spreadsheet with data for charting • You need Google Doc account to create a Google Spreadsheet • Select the data range for charting • Insert/Gadget • Choose the gadget to create

11. Gadget Command Button

12. To publish a gadget • Gadget/Publish Gadget • Copy and paste code to a web page

13. Data Querieshttp://code.google.com/apis/visualization/documentation/queries.html • Send a request to a data source that supports the Visualization API (such as a Google Spreadsheet). • Step 1: To send a request, create a Query object, specify a URL for the data source, and then send the request. • Step 2:Processing the Response • response handler function • If the request was successful, the response contains a data table. If the request failed, the response contains information about the error, and no DataTable.

14. Using a Google Spreadsheet as a Data Source • Finding out the proper URL to use for a sheet or a range of cells in a spreadsheet to which it has access, and using that URL as a data source URL. • Spreadsheet must set to share

15. Example: Using the Query Language • Copy the spreadsheet’s URL and paste to replace the one in the template. • Use column label as field name: • Select D, E • query.setQuery('SELECT D, E'); • Select A, B Where B > 100

16. Creating a PieChart Gadget with Selected Range in a Spreadsheet •  I use two templates: • 1. The Data Source Quest template to generate the code for defining query object and sending the query. • 2. The PieChart template to generate the code to draw the PieChart. • Then somehow combines the needed code from both templates. • Note 1: The PieChartChart is part of the basic charts package: google.load('visualization', '1', {packages:["corechart"]}); • Note 2: The Data Source Quest example is a Intensitymap and belongs to a different package: google.load('visualization', '1', {packages: ['intensitymap']});

17. Use buttons to select PieChart <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title> Google Visualization API Sample </title> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript"> google.load('visualization', '1', {packages: ['corechart']}); </script> <script type="text/javascript"> function drawYear(MyYear) { // To see the data that this visualization uses, browse to // http://spreadsheets.google.com/ccc?key=pCQbetd-CptGXxxQIG7VFIQ if (MyYear==2010) { query = new google.visualization.Query( 'https://spreadsheets.google.com/ccc?key=0AqysTZOIReRhdHV3dUFNNHlHd3NRWU1BdW5XaGN0LXc&hl=en&authkey=CPy_09wE&range=D11:E14&pub=1'); query.send(handleQueryResponse); } else { query = new google.visualization.Query( 'https://spreadsheets.google.com/ccc?key=0AqysTZOIReRhdHV3dUFNNHlHd3NRWU1BdW5XaGN0LXc&hl=en&authkey=CPy_09wE&range=D2:E5&pub=1'); query.send(handleQueryResponse); } } function handleQueryResponse(response) { if (response.isError()) { alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage()); return; } var data = response.getDataTable(); visualization = new google.visualization.PieChart(document.getElementById('visualization')); visualization.draw(data, null); } google.setOnLoadCallback(drawYear); </script> </head> <body style="font-family: Arial;border: 0 none;"> <div id="visualization" style="height: 400px; width: 400px;"></div> <input type="button" value="2009" onclick="drawYear(2009)" /> <input type="button" value="2010" onclick="drawYear(2010)" /> </body> </html>

18. Create a Chart from a Query in Data Warehouse • 1. Define a yearly sales query to compute the total sales for year 1996, 1997 and 1998 • 2. Export the query to an Excel file. • 3. Upload to Google Docs • 4. Create a column chart for the yearly sales • 5. Choose Publish Chart option to publish the chart with a webpage.