My favorites | English | Sign in

Google Visualization API

Code Examples

Here are some code samples to demonstrate using the Google Visualization API.

Table Example

function drawTable() {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Name');
  data.addColumn('number', 'Salary');
  data.addColumn('boolean', 'Full Time');
  data.addRows(5);
  data.setCell(0, 0, 'John');
  data.setCell(0, 1, 10000, '$10,000');
  data.setCell(0, 2, true);
  data.setCell(1, 0, 'Mary');
  data.setCell(1, 1, 25000, '$25,000');
  data.setCell(1, 2, true);
  data.setCell(2, 0, 'Steve');
  data.setCell(2, 1, 8000, '$8,000');
  data.setCell(2, 2, false);
  data.setCell(3, 0, 'Ellen');
  data.setCell(3, 1, 20000, '$20,000');
  data.setCell(3, 2, true);
  data.setCell(4, 0, 'Mike');
  data.setCell(4, 1, 12000, '$12,000');
  data.setCell(4, 2, false);

  var table = new google.visualization.Table(document.getElementById('table_div'));
  table.draw(data, {showRowNumber: true});

  google.visualization.events.addListener(table, 'select', function() {
    var row = table.getSelection()[0].row;
    alert('You selected ' + data.getValue(row, 0));
  });
}

Customized Table Example


<style type='text/css'>
  .bold-green-font {
    font-weight: bold;
    color: green;
  }

  .bold-font {
    font-weight: bold;
  }

  .right-text {
    text-align: right;
  }

  .large-font {
    font-size: 15px;
  }

  .italic-darkblue-font {
    font-style: italic;
    color: darkblue;
  }

  .italic-purple-font {
    font-style: italic;
    color: purple;
  }

  .underline-blue-font {
    text-decoration: underline;
    color: blue;
  }

  .gold-border {
    border: 3px solid gold;
  }

  .deeppink-border {
    border: 3px solid deeppink;
  }

  .orange-background {
    background-color: orange;
  }

  .orchid-background {
    background-color: orchid;
  }

  .beige-background {
    background-color: beige;
  }

</style>

...

function drawTable() {
  var cssClassNames = {
    'headerRow': 'italic-darkblue-font large-font bold-font',
    'tableRow': '',
    'oddTableRow': 'beige-background',
    'selectedTableRow': 'orange-background large-font',
    'hoverTableRow': '',
    'headerCell': 'gold-border',
    'tableCell': '',
    'rowNumberCell': 'underline-blue-font'};

  var options = {'showRowNumber': true, 'allowHtml': true, 'cssClassNames': cssClassNames};

  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Name');
  data.addColumn('number', 'Salary');
  data.addColumn('boolean', 'Full Time');
  data.addRows(5);
  data.setCell(0, 0, 'John');
  data.setCell(0, 1, 10000, '$10,000', {'className': 'bold-green-font large-font right-text'});
  data.setCell(0, 2, true, {'style': 'background-color: red;'});
  data.setCell(1, 0, 'Mary', null, {'className': 'bold-font'});
  data.setCell(1, 1, 25000, '$25,000', {'className': 'bold-font right-text'});
  data.setCell(1, 2, true, {'className': 'bold-font'});
  data.setCell(2, 0, 'Steve', null, {'className': 'deeppink-border'});
  data.setCell(2, 1, 8000, '$8,000', {'className': 'deeppink-border right-text'});
  data.setCell(2, 2, false, null);
  data.setCell(3, 0, 'Ellen', null, {'className': 'italic-purple-font large-font'});
  data.setCell(3, 1, 20000, '$20,000');
  data.setCell(3, 2, true);
  data.setCell(4, 0, 'Mike');
  data.setCell(4, 1, 12000, '$12,000');
  data.setCell(4, 2, false);
  var conatiner = document.getElementById('table');
  var table = new google.visualization.Table(conatiner);
  table.draw(data, options);
  table.setSelection([{'row': 4}]);
}

Gauge Example

Temperature:

<script>
var gaugeData = new google.visualization.DataTable();
gaugeData.addColumn('number', 'Engine');
gaugeData.addColumn('number', 'Torpedo');
gaugeData.addRows(2);
gaugeData.setCell(0, 0, 120);
gaugeData.setCell(0, 1, 80);
var gaugeOptions = {min: 0, max: 280, yellowFrom: 200, yellowTo: 250,
    redFrom: 250, redTo: 280, minorTicks: 5};
var gauge;
function drawGauge() {
  gauge = new google.visualization.Gauge(document.getElementById('gauge_div'));
  gauge.draw(gaugeData, gaugeOptions);
}
function changeTemp(dir) {
   gaugeData.setValue(0, 0, gaugeData.getValue(0, 0) + dir * 25);
   gaugeData.setValue(0, 1, gaugeData.getValue(0, 1) + dir * 20);
   gauge.draw(gaugeData, gaugeOptions);
}
</script>
<input type='button' value='Go Faster' onclick='changeTemp(1)' />
<input type='button' value='Slow down' onclick='changeTemp(-1)' />

Intensity Map Example

function drawIntensityMap() {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Country');
  data.addColumn('number', 'Sales');
  data.addColumn('number', 'Expenses');
  data.addRows(4);
  data.setCell(0, 0, 'US');
  data.setCell(0, 1, 10000);
  data.setCell(0, 2, 8000);
  data.setCell(1, 0, 'CA');
  data.setCell(1, 1, 7000);
  data.setCell(1, 2, 5000);
  data.setCell(2, 0, 'CN');
  data.setCell(2, 1, 8000);
  data.setCell(2, 2, 12000);
  data.setCell(3, 0, 'GB');
  data.setCell(3, 1, 7000);
  data.setCell(3, 2, 15000);

  var imap = new google.visualization.IntensityMap(document.getElementById('intensitymap_div'));
  imap.draw(data, {});
}

Interaction example

This example demonstrates how to combine visualizations for more complex interactivity.
It demonstrates the following features:

  • How to use a DataView object to limit and format data in a DataTable,
  • How to link two visualizations to the same data,
  • How to use the Table visualization's 'sort' event,
  • How to use formatters to reformat displayed data.

Click on the table's headers to see the column chart getting sorted also.

function drawSort() {
  var data = new google.visualization.DataTable();
  data.addColumn('string', 'Name');
  data.addColumn('number', 'Salary');
  data.addColumn('boolean', 'Full Time');
  data.addRows(5);
  data.setCell(0, 0, 'John');
  data.setCell(0, 1, 10000);
  data.setCell(0, 2, true);
  data.setCell(1, 0, 'Mary');
  data.setCell(1, 1, 25000);
  data.setCell(1, 2, true);
  data.setCell(2, 0, 'Steve');
  data.setCell(2, 1, 8000);
  data.setCell(2, 2, false);
  data.setCell(3, 0, 'Ellen');
  data.setCell(3, 1, 20000);
  data.setCell(3, 2, true);
  data.setCell(4, 0, 'Mike');
  data.setCell(4, 1, 12000);
  data.setCell(4, 2, false);

  var formatter = new google.visualization.TableNumberFormat({prefix: '$'});
  formatter.format(data, 1); // Apply formatter to second column

  var view = new google.visualization.DataView(data);
  view.setColumns([0, 1]);

  var table = new google.visualization.Table(document.getElementById('table_sort_div'));
  table.draw(view);

  var chart = new google.visualization.BarChart(document.getElementById('chart_sort_div'));
  chart.draw(view);

  google.visualization.events.addListener(table, 'sort',
      function(event) {
        data.sort([{column: event.column, desc: !event.ascending}]);
        chart.draw(view);
      });
}

Get started quickly with an Interactive Code Sample you can edit and save.

Full HTML Page Example

An end-to-end example for creating a web page with visualization charts embedded in it. It also demonstrates a chart connected to Google Spreadsheets and two charts interacting using visualization Events.

The example displays a simple statistics page for popular movies and cinema locations of a make-belief cinema chain company.

The page includes a Map and a Table visualization that interact with each other to display the theater locations. The page includes a column chart displaying the number of tickets each movie sold per location. It derives its data from a Google Spreadsheet. The published version of this Spreadsheet can be viewed for completeness.

Cinematics

<html>
  <head>
    <title>
      Cinematics
    </title>
    <style type="text/css">
      .header {
        color: purple;
        background-color: #abc;
        font-size: 40px;
        text-align: center;
      }
    </style>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <!-- Note that you need to replace the key ABCDEF with your Maps API key. -->
    <!-- Sign up for a Maps API key here: http://code.google.com/apis/maps/signup.html -->
    <script src="http://maps.google.com/maps?file=api&v=2&api;key=ABCDEF"
      type="text/javascript"></script>
    <script type="text/javascript">
      google.load('visualization', '1',
          {'packages': ['table', 'map', 'columnchart']});
      google.setOnLoadCallback(initialize);

      function initialize() {
        // The URL here is the URL of the spreadsheet.
        // This is where the data is.
        var query = new google.visualization.Query(
            'http://spreadsheets.google.com/pub?key=pCQbetd-CptF0r8qmCOlZGg');
        query.send(draw);
      }

      function draw(response) {
        if (response.isError()) {
          alert('Error in query')
        }

        var ticketsData = response.getDataTable();
        var chart = new google.visualization.ColumnChart(
            document.getElementById('chart_div'));
        chart.draw(ticketsData, {'isStacked': true, 'legend': 'bottom',
            'titleY': 'Number of tickets'});

        var geoData = new google.visualization.DataTable();
        geoData.addColumn('string', 'City');
        geoData.addColumn('string', 'Name');
        geoData.addColumn('boolean', 'Food');
        geoData.addRows(3);
        geoData.setCell(0, 0, 'London');
        geoData.setCell(1, 0, 'Paris');
        geoData.setCell(2, 0, 'Moscow');
        geoData.setCell(0, 1, 'Cinematics London');
        geoData.setCell(1, 1, 'Cinematics Paris');
        geoData.setCell(2, 1, 'Cinematics Moscow');
        geoData.setCell(0, 2, true);
        geoData.setCell(1, 2, true);
        geoData.setCell(2, 2, false);

        var geoView = new google.visualization.DataView(geoData);
        geoView.setColumns([0, 1]);

        var table =
            new google.visualization.Table(document.getElementById('table_div'));
        table.draw(geoData, {showRowNumber: false});

        var map =
            new google.visualization.Map(document.getElementById('map_div'));
        map.draw(geoView, {showTip: true});

        // Set a 'select' event listener for the table.
        // When the table is selected,
        // we set the selection on the map.
        google.visualization.events.addListener(table, 'select',
            function() {
              map.setSelection(table.getSelection());
            });

        // Set a 'select' event listener for the map.
        // When the map is selected,
        // we set the selection on the table.
        google.visualization.events.addListener(map, 'select',
            function() {
              table.setSelection(map.getSelection());
            });
      }
    </script>
  </head>

  <body>
    <div class="header">Cinematics</div>

    <table align="center">
      <tr valign="top">
        <td style="width: 50%;">
          <div id="map_div" style="width: 400px; height: 300;"></div>
        </td>
        <td style="width: 50%;">
          <div id="table_div"></div>
        </td>
      </tr>
      <tr>
        <td colSpan=2>
          <div id="chart_div" style="align: center; width: 700px; height: 300px;"></div>
        </td>
      </tr>
    </table>

  </body>
</html>

Note that you need to replace the key ABCDEF with your Maps API key. Sign up for a Maps API key

Custom Gadget

This example demonstrates how to write a custom gadget. The gadget encapsulates the exact visualization, options and data source. It wraps the Table visualization in a gadget container and hard-codes the data source and several options. Gadgets allow you to hard-code values in your visualization, just as you can with non-gadget visualizations.

For more information about gadgets, click here.

<?xml version="1.0" encoding="UTF-8"?>
<Module>
  <ModulePrefs title="Custom gadget" 
      author="Google"
      author_email="visualization.api@gmail.com"
      description="Custom gadget"
      thumbnail="http://visapi-gadgets.googlecode.com/svn/trunk/image/thumbnail.png" 
      screenshot="http://visapi-gadgets.googlecode.com/svn/trunk/image/screenshot.png">
    <Require feature="idi" />
    <Require feature="locked-domain" />  
  </ModulePrefs>
  <Content type="html">
  <![CDATA[
  <script type="text/javascript" src="http://www.google.com/jsapi"></script>
  <script type="text/javascript">
    google.load('visualization', '1', {packages: ['table']});
    google.setOnLoadCallback(init);

    function init() {
      var container = document.getElementById('chart');
      sendQuery();
    }

    function sendQuery() {
      var query = new google.visualization.Query('http://google-visualization.appspot.com/python/dynamic_example');
      query.send(handleQueryResponse);  
    }
    
    function handleQueryResponse(response) {
      // Default error message handling
      var gadgetHelper = new google.visualization.GadgetHelper();
      if (!gadgetHelper.validateResponse(response))
        return;
      
      var data = response.getDataTable();
      var visualization = new google.visualization.Table(document.getElementById('visualization'));
      visualization.draw(data, null);
    }   
  </script>
  <div id="visualization">
  <img src="http://visapi-gadgets.googlecode.com/svn/trunk/image/spinner.gif" />
  </div>
  
  ]]>
 </Content>
</Module>

You can take this xml and use it as a gadget.