Code Examples

Use these code exaples to learn more on using the 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));
  });
}

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, {});
}