Google Visualization ISYS 650

Google Visualization API 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.

Using Visualizations Add a to your page. Your page must have an HTML element that will hold your visualization; typically you'll use a in your page. Add a to 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. Load your libraries 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. Prepare your data Create an instance of your visualization. Instantiate your visualization by calling its constructor and passing in a reference to your element. Create an instance of your visualization Draw your visualization. Call draw() on your visualization and pass in your data to draw your visualization on the page. Draw your visualization

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.

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

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

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);

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

Gadgets Gadgets are simple HTML and JavaScript applications that can be embedded in webpages and other apps.

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

Gadget Command Button

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

Data Queries Send a request to a data source that supports the Visualization API (such as a Google Spreadsheet).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.

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

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

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']});

Use buttons to select PieChart Google Visualization API Sample google.load('visualization', '1', {packages: ['corechart']}); function drawYear(MyYear) { // To see the data that this visualization uses, browse to // if (MyYear==2010) { query = new google.visualization.Query( ' query.send(handleQueryResponse); } else { query = new google.visualization.Query( ' 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);

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 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.