title: Organizational chart using google visualization api that reads names from an CSV file?
body: <p>I'm trying to make an organizational chart using google charts api .. like this </p>
  
  <p><a href="http://jsfiddle.net/hisham91/pbkuok2u/" rel="nofollow">http://jsfiddle.net/hisham91/pbkuok2u/</a> </p>
  
  <p>but i want it to read the names from a <strong>CSV file</strong> that has a big data over a 500 employee >> how can i do this please help ?</p>
  
  <pre><code>Thanks,
  Best Regards, 
  Hisham
  </code></pre>
  
  <p><strong>UPDATE BELOW :</strong></p>
  
  <p>Code for method 1:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  
  &lt;script type="text/javascript" src="https://www.google.com/jsapi"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="https://code.jquery.com/jquery-1.10.1.min.js"&gt;&lt;/script&gt;
  
  &lt;script type="text/javascript"&gt;
          google.load("visualization", "1.1", {packages:["corechart"]});
          google.setOnLoadCallback(drawVisualization);
  
   function drawVisualization() {
      var query = new google.visualization.Query(
          'address.csv');
  
      // Apply query language statement.
      query.setQuery('SELECT * ');
  
      // 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();
      visualization = new google.visualization.orgchart(document.getElementById('address_chart'));
      visualization.draw(data, {legend: 'bottom'});
    }
  &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;div id="address_chart" style="width: 640px; height: 480px;"&gt;&lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Code for method 2:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  
  &lt;script type="text/javascript" src="https://www.google.com/jsapi"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="https://code.jquery.com/jquery-1.10.1.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
          google.load("visualization", "1", {packages:["orgchart"]});
  
          $(function(){
  
              $.ajax({
                  type:'post',
                  dataType:'json',
                  data:'orgChart2.php',
                  url:'address.csv',
                  success:function(data){
                      var dt = new google.visualization.DataTable();
                      dt.addColumn('string', 'Employee');
                      dt.addColumn('string', 'Manager');
                      dt.addColumn('string', 'ToolTip');
  
                      dt.addRows(data);
  
  
                      var chart = new google.visualization.OrgChart(document.getElementById('address_chart'));
                      chart.draw(dt, {allowHtml:true});
  
                  }
              });
          });
      &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;div id="address_chart" style="width: 640px; height: 480px;"&gt;&lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>note: nothing displaying - blank page. </p>
  
  <p>Noting too that my address.csv file contains as below :</p>
  
  <pre><code>**Employee     Manager**
  Darren Parker  
  Tanja Plate    Darren Parker
  Allie Bellew   Darren Parker
  Franz Kohl     Tanja Plate
  Cindy White    Allie Bellew
  Chris Norred   Cindy White
  </code></pre>