Unnamed

<!--
  Copyright (c) 2008 Google Inc.

  You are free to copy and use this sample.
  License can be found here: http://code.google.com/apis/ajaxsearch/faq/#license
-->

<!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">
  <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', {packages: ['orgchart', 'table']});
    </script>

    <script type="text/javascript">
    var map;
    var table;
    var data;

    function drawOrgChartAndTable() {
      var data = new google.visualization.DataTable();
      data.addColumn('string', 'Name');
      data.addColumn('string', 'Manager');
      data.addRows(5);
      data.setCell(0, 0, 'Mike');
      data.setCell(1, 0, 'Jim');
      data.setCell(1, 1, 'Mike');
      data.setCell(2, 0, 'Alice');
      data.setCell(2, 1, 'Mike');
      data.setCell(3, 0, 'Bob');
      data.setCell(3, 1, 'Jim');
      data.setCell(4, 0, 'Carol');
      data.setCell(4, 1, 'Bob');
    
      var orgchart = new google.visualization.OrgChart(document.getElementById('orgchart'));
      orgchart.draw(data, null);
    
      var table = new google.visualization.Table(document.getElementById('table'));
      table.draw(data, null);
      
      // When the table is selected, update the orgchart.
      google.visualization.events.addListener(table, 'select', function() {
        orgchart.setSelection(table.getSelection());
      });
    
      // When the orgchart is selected, update the table visualization.
      google.visualization.events.addListener(orgchart, 'select', function() {
        table.setSelection(orgchart.getSelection());
      });  
    }

    google.setOnLoadCallback(drawOrgChartAndTable);
    </script>
  </head>
  <body style="font-family: Arial;border: 0 none;">
    <table>
      <tr>
        <td>
          <div id="orgchart" style="width: 300px; height: 300px;"></div>
        </td>

        <td>
          <div id="table" style="width: 300px; height: 300px;"></div>
        </td>
      </tr>
    </table>
  </body>
</html>