Google Org Chart - Draw a chart from JSON (mysql) -
i'm trying draw organizational chart (http://goo.gl/wgftfo) json (php - mysql) doen'st display well.
here html code:
<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); (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> json result:
[ { "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" } ] this displays like: 
and, if remove alert(id) form html code (in ajax), shows last object of json: 
how can fix this?
or, there other option chart?
thank answers
the bellow code worked me
index.html
<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); (i = 0; < 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> organization.php
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 employees") or die(mysql_error()); # collect results while($obj = mysql_fetch_object($query)) { $arr[] = $obj; } # json-encode response $json_response = json_encode($arr); // # return response echo $json_response;
Comments
Post a Comment