Organigrama de google

cooply · 13 Mar 2015

Hola quiero constrir un organigrama con la api de google, pero cuando parece que ya esta terminado, une todos los valores en un cuadrado, dejo una imagen

IMAGEN1

Quiero que PRUEBA1, PRUEBA2 y PRUEBA3 salgan así.
IMAGEN2

¿Alguien sabe como?

Saludo y muchas gracias.

PD: La API de google es esta :API GOOGLE

Mi codigo:

PHP:

<?php

$sql2=mysql_query("SELECT login FROM users WHERE `ref`=1 LIMIT 3");


while($obj = mysql_fetch_object($sql2)) {
    $arr[] = $obj;
}

$json_response = json_encode($arr);
 ?>
 <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["orgchart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Name');
        data.addColumn('string', 'Manager');
        data.addColumn('string', 'ToolTip');

        data.addRows([
		  [{v:'admin', f:''}, '', ''], //the node
          ['<?php echo "[".json_encode($arr)."]"; ?>', 'admin', ''],
  		  ['1', 'admin', ''],
        ]);

        var chart = new google.visualization.OrgChart(document.getElementById('chart_div'));
        chart.draw(data, {allowHtml:true});
      }
   </script>

<div id="chart_div"></div>

jsstoni · 13 Mar 2015

nunca eh utilizado esa api y ninguna otra para crear este tipo de temas pero remplaza esta linea :

Insertar CODE, HTML o PHP:

['<?php echo "[".json_encode($arr)."]"; ?>', 'admin', ''],

por

Insertar CODE, HTML o PHP:

['<?php echo json_encode($arr); ?>', 'admin', ''],

- - - Actualizado - - -

decidi ayudarte de forma desinteresada pero agradesco que tan siqueira un me agrada le de a esta repuesta ya que me eh puesto a estudiar un poco para lograrlo y creo que esta sea la solucion a lo que buscas

un ejemplo con simple frontend Org Chart Example - JSFiddle

mas el codigo backend para tu repuesta:

PHP:

<?php
$sql2=mysql_query("SELECT login FROM users WHERE `ref`=1 LIMIT 3");
while($obj = mysql_fetch_object($sql2)) {
	$arr[] = $obj;
}
$im = implode(",", $arr);
$ex = explode(",", $im);
?>
<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['orgchart']}]}"></script>
<script type="text/javascript">
google.setOnLoadCallback(drawChart);
function drawChart() {
	var data = new google.visualization.DataTable();
	data.addColumn('string', 'Name');
	data.addColumn('string', 'Manager');
	data.addColumn('string', 'ToolTip');

	data.addRows([<?php
	foreach ($ex as $data) {
		echo "['".$data."', 'admin', ''],";
	}
?>]);
	var chart = new google.visualization.OrgChart(document.getElementById('chart_div'));
	chart.draw(data, {allowHtml:true});
}
</script>
<div id="chart_div""></div>

y el demo : http://anco.allalla.com/google/onigrama.php

nestornoe · 13 Mar 2015

Teiens razon, alguna gente solo entra, pregunta y ni las gracias dan 😛8:

Saludos

Organigrama de google

cooply

jsstoni

nestornoe

Temas similares