谷歌组织图-从JSON（mysql）中绘制图表_Json_Charts

谷歌组织图-从JSON（mysql）中绘制图表

json charts

谷歌组织图-从JSON（mysql）中绘制图表,json,charts,Json,Charts,我试图从JSON（php-mysql）中绘制一个组织结构图（），但它显示不好以下是我的HTML代码： <script type="text/javascript"> google.load('visualization', '1', {packages:['orgchart']}); google.setOnLoadCallback(drawChart); function json(){ $.ajax({

我试图从JSON（php-mysql）中绘制一个组织结构图（），但它显示不好

以下是我的HTML代码：

<script type="text/javascript">

        google.load('visualization', '1', {packages:['orgchart']});
        google.setOnLoadCallback(drawChart);

        function json(){
            $.ajax({
                type: "POST",
                url: "function/ver.php",
                success: function(datos){
                    datos = eval(datos);
                    for (var i=0;i<datos.length;i++){
                         var id = datos[i].id;
                         var nombre = datos[i].nombre;
                         var jefe = datos[i].jefe;
                         alert(id);
                        drawChart(id, nombre);

                        function drawChart(id, nombre) {

                            //alert("Id: " + id + " | Nombre: " + nombre);

                            var data = new google.visualization.DataTable();
                            data.addColumn('string', 'Name');
                            data.addColumn('string', 'Manager');
                            data.addColumn('string', 'ToolTip');
                            data.addRows([

                                [nombre, jefe, id]
                            ]); 

                            var chart = new google.visualization.OrgChart(document.getElementById('contenido'));
                            chart.draw(data, {allowHtml:true});

                          }
                    }
                },
                error: function(error){
                    alert(error);
                }
            });
        }



        </script>
</head>

<body onLoad="json()">
    <div id="contenido"></div>

</body>

这显示为：

而且，如果我从HTML代码中删除警报（id）（在ajax中），只显示JSON的最后一个对象：

我怎样才能解决这个问题

或者，是否有其他选项来制作此图表

谢谢你的回答

下面的代码对我有用

index.html

[
   {
      "id":"1",
      "nombre":"Andrey",
      "paterno":null,
      "foto":"http:\/\/icons.iconarchive.com\/icons\/deleket\/face-avatars\/256\/Male-Face-G1-icon.png",
      "jefe":""
   },
   {
      "id":"2",
      "nombre":"Enrique",
      "paterno":null,
      "foto":"http:\/\/icons.iconarchive.com\/icons\/deleket\/face-avatars\/256\/Male-Face-F3-icon.png",
      "jefe":"Andrey"
   },
   {
      "id":"3",
      "nombre":"Chero",
      "paterno":null,
      "foto":"http:\/\/icons.iconarchive.com\/icons\/deleket\/face-avatars\/256\/Male-Face-E4-icon.png",
      "jefe":"Andrey"
   },
   {
      "id":"4",
      "nombre":"Ricardo",
      "paterno":null,
      "foto":"http:\/\/icons.iconarchive.com\/icons\/deleket\/face-avatars\/256\/Male-Face-F3-icon.png",
      "jefe":"Chero"
   },
   {
      "id":"5",
      "nombre":"Jhon",
      "paterno":null,
      "foto":"http:\/\/icons.iconarchive.com\/icons\/deleket\/face-avatars\/256\/Male-Face-H1-icon.png",
      "jefe":"Enrique"
   }
]

<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type='text/javascript' src='js/jquery.min.js'></script>
<script type='text/javascript'>
google.load('visualization', '1', { packages: ['orgchart'] });
google.setOnLoadCallback(drawChart);
function drawChart() {
    $.ajax({
        type: "POST",
        url: "ajax/organization.php",
        success: function(result){
            var result = JSON.parse(result);
          if ((emp_count = result.length) > 0) {

            console.log(result);
            var data = new google.visualization.DataTable();
            data.addColumn('string', 'Name');
            data.addColumn('string', 'Manager');
            data.addRows(emp_count);

            for (i = 0; i < emp_count; i++) {
                data.setCell(i, 0, result[i].emp);
                data.setCell(i, 1, result[i].manager);
            }
            var chart = new google.visualization.OrgChart(document.getElementById('chart_div'));
             chart.draw(data, { allowHtml: true });
          }

          }
        });
}
</script>

define('DB_SERVER', 'localhost');
define('DB_USERNAME', 'USERNAME');
define('DB_PASSWORD', 'PASSWORD');
define('DB_DATABASE', 'DATABASE_NAME');
$connection = mysql_connect(DB_SERVER, DB_USERNAME, DB_PASSWORD) or die(mysql_error());
$database = mysql_select_db(DB_DATABASE) or die(mysql_error());
$query=mysql_query("select emp, manager from employees") or die(mysql_error());

# Collect the results
while($obj = mysql_fetch_object($query)) {
    $arr[] = $obj;
}

# JSON-encode the response
$json_response = json_encode($arr);

// # Return the response
echo $json_response;