與MySQL合併Google_Org_Chart

我有個任務，使組織結構圖（就像谷歌圖），但它是從MySQL呈現，就像如下org chart

和這是我的數據庫：sql

這裏是代碼從谷歌圖..`

 <!-- 
     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) 
     --> 

     <!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"]}); 
      </script> 
      <script type="text/javascript"> 
       function drawVisualization() { 

// Block of codes below I want to change and render it from mysql, unfortunately dont know how to do it 

    // Create and populate the data table. 
       var data = google.visualization.arrayToDataTable([ 
        ['Name', 'Manager', 'Tooltip'], 
        ['Mike', null, 'The President'], 
        [{v: 'Jim', f: 'Jim<br/><font color="red"><i>Vice President<i></font>'}, 'Mike', null], 
        ['Alice', 'Mike', null], 
        ['Bob', 'Jim', 'Bob Sponge'], 
        ['Carol', 'Bob', null] 
       ]); 

       // Create and draw the visualization. 
       new google.visualization.OrgChart(document.getElementById('visualization')). 
        draw(data, {allowHtml: true}); 
       } 

       google.setOnLoadCallback(drawVisualization); 
      </script> 
      </head> 
      <body style="font-family: Arial;border: 0 none;"> 
      <div id="visualization" style="width: 300px; height: 300px;"></div> 
      </body> 
     </html>

任何人知道的東西？任何幫助，將不勝感激..謝謝..

問候， Aryo

來源

2013-07-18 aryosdepe

你可以嘗試這樣的事情：

<?php 
// set database connection parameters 
$databaseName = '<name of database>'; 
$username = '<user>'; 
$password = '<password>'; 
try { 
    $db = new PDO("mysql:dbname=$databaseName", $username, $password); 
} 
catch (PDOException $e) { 
    echo $e->getMessage(); 
    exit(); 
} 
$db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); 

$query = $db->prepare('SELECT id, nama, parent_id FROM tbl_dummy'); 
$query->execute(); 
$results = $query->fetchAll(PDO::FETCH_ASSOC); 

$flag = true; 
$table = array(); 
$table['cols'] = array(
    array('label' => 'ID', 'type' => 'number'), 
    array('label' => 'Name', 'type' => 'string'), 
    array('label' => 'Parent ID', 'type' => 'number') 
); 
$table['rows'] = array(); 

foreach ($results as $row) { 
    $temp = array(); 
    $temp[] = array('v' => (int) $row['id']); 
    $temp[] = array('v' => $row['nama']); 
    $temp[] = array('v' => (int) $row['parent_id']); 
    $table['rows'][] = array('c' => $temp); 
} 
$jsonTable = json_encode($table); 
?> 
<!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"> 
      function drawVisualization() { 
       // Create and populate the data table. 
       var data = new google.visualization.DataTable(<?php echo $jsonTable; ?>); 

       // Create and draw the visualization. 
       new google.visualization.OrgChart(document.getElementById('visualization')). 
       draw(data, {allowHtml: true}); 
      } 

      google.setOnLoadCallback(drawVisualization); 
      google.load('visualization', '1', {packages: ['orgchart']}); 
     </script> 
    </head> 
    <body style="font-family: Arial;border: 0 none;"> 
     <div id="visualization" style="width: 300px; height: 300px;"></div> 
    </body> 
</html>

來源

2013-07-22 23:04:23 asgallant

與MySQL合併Google_Org_Chart

回答

相關問題