Google Chart API - Answer

Your client, DataSet Corp, has asked for an interactive web based chart showing the change in revenue from 2005 until now. They would also like the overall average revenue to be reflected in the chart. Be sure to add a title, label axes, and reflect the red and black color scheme used by DSC.

HTML

<script src="http://www.google.com/jsapi?ext.js"></script>
<div id="dashboard">
          <div style='font-size: 0.9em;'>
            <div id="control1"></div><br>
            <div id="control2"></div><br>
            <div id="control3"></div>
          </div>
         <br><br>
          <div style='width: 600px'>
            <div style="float: left;" id="chart1"></div>
            <div style="float: left;" id="chart2"></div>
            <div style="float: left;" id="chart3"></div>
          </div>
    </div>

JavaScript

function drawVisualization() {
  var query = new google.visualization.Query(
      'http://spreadsheets.google.com/tq?key=0AnxR7WfXrj7adGEwamJMSXRuTzBBUm1OVkZ1cDh3ZHc&range=A1:D');
  // Send the query with a callback function.
  query.send(handleQueryResponse);
}

function handleQueryResponse(response) {
  if (response.isError()) {
    alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
    return;
  }

  var data = response.getDataTable();
  // Define a StringFilter control for the 'Name' column
  var stringFilter = new google.visualization.ControlWrapper({
    'controlType': 'StringFilter',
    'containerId': 'control1',
    'options': {
      'filterColumnLabel': 'Name'
    }
  });
  // Define a CategoryFilter control for the 'City' column
  var categoryFilter = new google.visualization.ControlWrapper({
    'controlType': 'CategoryFilter',
    'containerId': 'control2',
    'options': {
      'filterColumnLabel': 'City'
    }
  });
  // Define a DateFilter control for the 'City' column
  var dateRangeFilter = new google.visualization.ControlWrapper({
    'controlType': 'DateRangeFilter',
    'containerId': 'control3',
    'options': {
      'filterColumnLabel': 'Birthday'
    }
  });

  // Define a table visualization
  var table = new google.visualization.ChartWrapper({
    'chartType': 'Table',
    'containerId': 'chart1',
    'options': {'height': '13em', 'width': '20em'}
  });

  // Create the dashboard.
  var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard')).
    // Configure the string filter to affect the table contents
    bind([stringFilter, categoryFilter,dateRangeFilter], table).
    // Draw the dashboard
    draw(data);
}
google.load('visualization', '1', {packages: ['controls']});
google.setOnLoadCallback(drawVisualization);