Google Visualization

Document Sample
Google Visualization Powered By Docstoc
					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 <div> to your page. Your page must have an HTML element
  that will hold your visualization; typically you'll use a <div> in your
• 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.
            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
• 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.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);
• GeoMap
  – Adding two other countries:
     • China, 100
     • Vietnam: 80
  – DataTable
• Gauge
• Motion Chart
• 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
• 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).
• 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
   – Then somehow combines the needed code from both
• Note 1: The PieChartChart is part of the basic charts
     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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "">
<html xmlns="">
   <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
     Google Visualization API Sample
     <script type="text/javascript" src=""></script>
    <script type="text/javascript">
 google.load('visualization', '1', {packages: ['corechart']});
    <script type="text/javascript">
   function drawYear(MyYear) {
      // To see the data that this visualization uses, browse to
     if (MyYear==2010)
     { query = new google.visualization.Query(
        query.send(handleQueryResponse); }
     { query = new google.visualization.Query(
       query.send(handleQueryResponse); }
  function handleQueryResponse(response) {
      if (response.isError()) {
        alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
  var data = response.getDataTable();
  visualization = new google.visualization.PieChart(document.getElementById('visualization'));
  visualization.draw(data, null);
  <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)" />
  Create a Chart from a Query in Data
• 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.

Shared By: