battlehorse/index.html

## index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <!--
    You are free to copy and use this sample in accordance with the terms of the
    Apache license (http://www.apache.org/licenses/LICENSE-2.0.html)
  -->
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>
      Google Visualization API Sample
    </title>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load('visualization', '1.1', {packages: ['controls']});
    </script>
    <script type="text/javascript">
      function drawVisualization() {
        // Prepare the data.
        var data = google.visualization.arrayToDataTable([
          ['Name', 'Age'],
          ['Michael' , 12],
          ['Elisa', 20],
          ['Robert', 7],
          ['John', 54],
          ['Jessica', 22],
          ['Aaron', 3],
          ['Margareth', 42],
          ['Miranda', 33]
        ]);

        // Define a StringFilter control for the 'Name' column
        var stringFilter = new google.visualization.ControlWrapper({
          'controlType': 'StringFilter',
          'containerId': 'control1',
          'options': {
            'filterColumnLabel': 'Name'
          }
        });

        // Define a table visualization
        var table = new google.visualization.ChartWrapper({
          'chartType': 'Table',
          'containerId': 'chart1',
          'options': {'height': '13em', 'width': '20em'},
          'view': {'columns': [1, 0, {
            'type': 'string', 'label': 'Uppercase',
            'calc': function(dt, rowNum) {
              return String(dt.getValue(rowNum, 0)).toUpperCase();
            }
            }]}
        });

        // Create the dashboard.
        var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard')).
          // Configure the string filter to affect the table contents
          bind(stringFilter, table).
          // Draw the dashboard
          draw(data);
      }

      google.setOnLoadCallback(drawVisualization);
    </script>
  </head>
  <body style="font-family: Arial;border: 0 none;">
    <div id="dashboard">
      <table>
        <tr style='vertical-align: top'>
          <td style='width: 300px; font-size: 0.9em;'>
            <div id="control1"></div>
            <div id="control2"></div>
            <div id="control3"></div>
          </td>
          <td style='width: 600px'>
            <div style="float: left;" id="chart1"></div>
            <div style="float: left;" id="chart2"></div>
            <div style="float: left;" id="chart3"></div>
          </td>
        </tr>
      </table>
    </div>
  </body>
</html>
	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml">
	<!--
	You are free to copy and use this sample in accordance with the terms of the
	Apache license (http://www.apache.org/licenses/LICENSE-2.0.html)
	-->
	<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
	<title>
	Google Visualization API Sample
	</title>
	<script type="text/javascript" src="http://www.google.com/jsapi"></script>
	<script type="text/javascript">
	google.load('visualization', '1.1', {packages: ['controls']});
	</script>
	<script type="text/javascript">
	function drawVisualization() {
	// Prepare the data.
	var data = google.visualization.arrayToDataTable([
	['Name', 'Age'],
	['Michael' , 12],
	['Elisa', 20],
	['Robert', 7],
	['John', 54],
	['Jessica', 22],
	['Aaron', 3],
	['Margareth', 42],
	['Miranda', 33]
	]);

	// Define a StringFilter control for the 'Name' column
	var stringFilter = new google.visualization.ControlWrapper({
	'controlType': 'StringFilter',
	'containerId': 'control1',
	'options': {
	'filterColumnLabel': 'Name'
	}
	});

	// Define a table visualization
	var table = new google.visualization.ChartWrapper({
	'chartType': 'Table',
	'containerId': 'chart1',
	'options': {'height': '13em', 'width': '20em'},
	'view': {'columns': [1, 0, {
	'type': 'string', 'label': 'Uppercase',
	'calc': function(dt, rowNum) {
	return String(dt.getValue(rowNum, 0)).toUpperCase();
	}
	}]}
	});

	// Create the dashboard.
	var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard')).
	// Configure the string filter to affect the table contents
	bind(stringFilter, table).
	// Draw the dashboard
	draw(data);
	}

	google.setOnLoadCallback(drawVisualization);
	</script>
	</head>
	<body style="font-family: Arial;border: 0 none;">
	<div id="dashboard">
	<table>
	<tr style='vertical-align: top'>
	<td style='width: 300px; font-size: 0.9em;'>
	<div id="control1"></div>
	<div id="control2"></div>
	<div id="control3"></div>
	</td>
	<td style='width: 600px'>
	<div style="float: left;" id="chart1"></div>
	<div style="float: left;" id="chart2"></div>
	<div style="float: left;" id="chart3"></div>
	</td>
	</tr>
	</table>
	</div>
	</body>
	</html>