Crear un organigrama con Google charts
Los organigramas sirven para mostrar organizaciones multinivel, ahora vamos a crear un organigrama usando Google Charts.
A continuación les muestro como se vera el resultado del código que les explicare.
Vamos a dividir el código en dos partes, una el html y otra el código javascript.
Parte 1: HTML
[code language=”html”]<html>
<head>
<title>Ejemplo de Organigrama 1</title>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
</head>
<body>
<center><h1>Ejemplo #1 de Organigrama</h1></center>
<div id="org_chart"></div>
<!– Aqui debe ir el codigo javascript del organigrama –>
</body>
</html>
El código HTML es lo básico para cualquier pagina web, solo incluimos el archivo javascript de google https://www.gstatic.com/charts/loader.js que contiene las funciones para que las gráficas funcionen.
Después de eso solo tenemos una cabecera h1 para mostrar el titulo y después un contenedor div con id org_chart que sera donde se muestre el organigrama.
Parte 2: Javascript
Ahora el código javascript es el que define el organigrama, el código debe ir dentro de las etiquetas <script> y </script>
[code language=”javascript”]google.charts.load(‘current’, {packages:["orgchart"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn(‘string’, ‘Nombre’);
data.addColumn(‘string’, ‘Superior’);
data.addRows([
[‘Jefe’,” ],
[‘Ventas’,’Jefe’],
[‘Recursos humanos’,’Jefe’ ],
[‘Finanzas’,’Jefe’],
[‘La secretaria del jefe’,’Jefe’],
[‘El contador’,’Finanzas’],
[‘La secretaria del contador’,’El contador’],
[‘La asistente del contador’,’El contador’],
[‘La subsecretaria del contador’,’La secretaria del contador’],
[‘Vendedores’,’Ventas’],
[‘Vendedor 1′,’Vendedores’],
[‘Vendedor 2′,’Vendedores’],
[‘Facturacion’,’Ventas’],
[‘Devoluciones’,’Ventas’],
[‘Jane Smith’,’Recursos humanos’],
[‘Vilma’,’Jane Smith’],
[‘Ayudante’,’Vilma’],
[‘Ayudante del ayudante’,’Ayudante’],
]);
var chart = new google.visualization.OrgChart(document.getElementById(‘org_chart’));
chart.draw(data, {allowHtml:true});
}
Las lineas 1 y 2 del javascript son para definir el tipo de gráfica y la funcion para cargar las gráficas.
Después creamos la funcion drawChart() y seguido creamos un datatable “google.visualization.DataTable()”, con dos columnas.
Una columna contiene el texto del elemento actual y otra columna sera para el nombre del nivel superior y esto lo vemos al crear las filas o rows.
Por ejemplo para el primer nivel la fila seria: [‘Jefe’,”] donde Jefe es el valor del primer nivel, y ” o vació el nivel superior, por eso Jefe es el primer nivel.
El segundo nivel tenemos [“Ventas”,”Jefe”] , [“Recursos Humanos”,”Jefe”], es decir el nodo Ventas y el nodo Recursos Humanos dependen de el nodo Jefe.
En el tercer nivel tenemos [“Vendedores”,”Ventas”] es decir el nodo “Vendedores” que esta debajo del nodo “Ventas”.
Y asi sucesivamente pueden crear todos los niveles que sean necesarios.