Crear un organigrama con jQuery y OrgChart


Crear un organigrama con jQuery y OrgChart, si quieres crear un organigrama web de forma rápida sin tantas complicaciones puedes utilizar una lista <ul> en html y luego convertirla en un organigrama simple, sencillo y fácil.

1.- Lo primero que tienes que hacer es ver los ejemplos para saber si es lo que buscabas, aquí puedes ver esos ejemplos: https://github.com/dabeng/OrgChart

2.- Luego de eso tienes que crear la estructura que deseas convertir, esto lo haces utilizando etiquetas con jerarquía, en este caso vamos a usar las etiquetas html llamadas <ul>, si tienes dudas de como usar estas etiquetas puedes visitar el siguiente sitio: http://www.w3schools.com/tags/tag_ul.asp en donde te encontraras con ejemplos y explicaciones de esta etiqueta.

3.- Para empezar a usar este plugin tienes que hacer lo siguiente:

a).- Incluir archivos necesarios js y css

[html]
<link href="css/jquery.orgchart.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/>
<script src="js/jquery.orgchart.js"></script>
[/html]

b).- Crear la estructura html

[html]
<ul id="CaballerosZodiaco" style="display:none">
<li>Atenea
<ul>
<li>Dohko de Libra
<ul>
<li>Shiryu</li>
</ul>
</li>
<li>Camus de Acuario
<ul>
<li>Crystal Saint
<ul>
<li>Hyoga de Cisne</li>
</ul>
</li>
</ul>
</li>
<li>Mu de aries
<ul>
<li>Kiki</li>
</ul>

</li>
</ul>

</li>
</ul>
<!– en la siguiente etiqueta saldrá el resultado: –>
<div id="Organigrama-resultante">

</div>

[/html]

c).- Crear la referencia a los elementos <ul> creados.

[html]
<script>
$(‘#Organigrama-resultante’).orgchart({
‘data’: $(‘#CaballerosZodiaco’)
});
</script>
[/html]

Puedes mirar el siguiente vídeo para la implemetación

[adjuntos descripcion=”OrgChart” link=”github.com/dabeng/OrgChart/archive/master.zip”]