1 / 18

Google Visualization

Google Visualization. ISYS 650. Google Visualization API http://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.

marin
Download Presentation

Google Visualization

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  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.

More Related