Posiblemente más de alguna vez has escuchado de los famosos diagramas de gantt para la gestión de tus proyectos, el día de hoy aprenderemos como programar un diagrama de gantt por medio de un api que nos ofrece Google y con la cual podemos hacer diagramas dependientes y no dependientes.
Google Charts es un api que nos ofrece Google para desarrollar gráficas entre las cuales esta Gantt Charts para desarrollar los diagramas de gantt , como sabemos este tipo de diagramas nos permite segmentar en diferentes tareas el desarrollo de nuestros proyectos haciendo más fácil su comprensión y gestión.
Con Gantt Charts puedes ilustrar las fechas de inicio y fin de las tareas de tu proyecto, visualizar la duración, porcentaje de avance, etc.
Si quieres hacer diagramas de gantt novedosos y muy llamativos sigue leyendo esta entrada y aprende a programar un diagrama de gantt con Gantt Charts.
Programar un Diagrama de Gantt dependiente
Para programar un diagrama de gantt dependiente, estos son aquellos que requieren que alguna tarea este concluida antes de iniciar la siguiente, veamos el siguiente ejemplo en el que no es necesario incluir fechas de inicio y fin ya que al depender de otra tarea se va a empezar hasta que termine la anterior.
Para iniciar llamamos la librería de Google Charts, enseguida debemos cargar que tipo de gráfica queremos, en este caso un diagrama de gantt, por último establecemos el idioma en español.
Posteriormente se crea el centro de datos al cual le agregamos columnas y filas con la información que queremos mostrar, en la variable options establecemos algunas configuraciones iniciales para nuestro diagrama.
Por último creamos nuestro diagrama de gantt especificando el ID del componente html donde queremos que se visualice, luego dibujamos nuestro diagrama en base a nuestro centro de datos y a nuestra variable de opciones.
Algo característico de los diagramas con dependencias es que siempre especificamos al final de cada fila el id de la tarea de la cual dependen.
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['gantt'],'language':'es'});
google.charts.setOnLoadCallback(drawChart);
function daysToMilliseconds(days) {
return days * 24 * 60 * 60 * 1000;
}
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'ID Tarea');
data.addColumn('string', 'Tarea');
data.addColumn('date', 'Fecha inicio');
data.addColumn('date', 'Fecha fin');
data.addColumn('number', 'Duracion');
data.addColumn('number', 'Porcentaje de avance');
data.addColumn('string', 'Dependencias');
data.addRows([
['requerimientos','Requerimientos',new Date(2016,10,15),new Date (2016,10,19),null,75,null],
['analisis','Analisis',null,null,daysToMilliseconds(3),0,'requerimientos'],
['diseño','Diseño',null,null,daysToMilliseconds(5),0,'requerimientos'],
['desarrollo','Desarrollo',null,null,daysToMilliseconds(4),0,'analisis,diseño'],
['testing','Testing',null,null,daysToMilliseconds(2),0,'desarrollo'],
['integracion','Integración',null,null,daysToMilliseconds(1),0,'testing']
]);
var options = {
height: 275,
gantt: {
criticalPathEnabled: false,
arrow: {
angle: 100,
width: 5,
color: '#c0c0c0',
radius: 1
},
innerGridDarkTrack: {fill: '#fff'}
}
};
var chart = new google.visualization.Gantt(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div"></div>
</body>
</html>Ver un ejemplo de Diagrama de Gantt Dependiente
Programar un Diagrama de Gantt no dependiente
A diferencia del anterior en este si especificamos Fecha inicio y Fecha fin pero pasamos como null Duración y Dependencias, también podemos observar que se agrega una nueva columna llamada Recurso con la cual podemos crear categorías para cada tarea.
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['gantt'],'language':'es'});
google.charts.setOnLoadCallback(drawChart);
function daysToMilliseconds(days) {
return days * 24 * 60 * 60 * 1000;
}
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'ID Tarea');
data.addColumn('string', 'Tarea');
data.addColumn('string', 'Recurso');
data.addColumn('date', 'Fecha inicio');
data.addColumn('date', 'Fecha fin');
data.addColumn('number', 'Duracion');
data.addColumn('number', 'Porcentaje de avance');
data.addColumn('string', 'Dependencias');
data.addRows([
['requerimientos','Requerimientos','Análisis',new Date(2016,10,1),new Date (2016,10,03),null,100,null],
['diseñobd','Diseño DB','Bases de Datos',new Date (2016,10,03),new Date (2016,10,05),null,100,null],
['creacionbd','Creación DB','Bases de Datos',new Date (2016,10,05),new Date (2016,10,08),null,100,null],
['frontend','Diseño','Frontend',new Date (2016,10,08),new Date (2016,10,15),null,100,null],
['backend','Desarrollo Funcionalidad','Backend',new Date (2016,10,15),new Date (2016,10,21),null,45,null],
['testing','Testing','Análisis',new Date (2016,10,21),new Date (2016,10,23),null,0,null],
['entrega','Entrega','Análisis',new Date (2016,10,23),new Date (2016,10,24),null,0,null]
]);
var options = {
height: 300,
gantt: {
criticalPathEnabled: false,
arrow: {
width: 5
},
}
};
var chart = new google.visualization.Gantt(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div"></div>
</body>
</html>Ver un ejemplo de Diagrama de Gantt no dependiente.
Como ves Gantt Chart es un api bastante intuitiva y fácil de usar, podemos crear diagramas muy vistosos y por supuesto tenemos la opción de modificar los estilos según nos parezca, si quieres explorar más opciones de configuración para nuestro diagrama de gantt puedes consultar las opciones disponibles en la documentación de Gantt Charts.
Ahora que aprendiste a programar un diagrama de gantt puedes usarlo en tus siguientes proyectos web donde lo requieras.
Un abrazo!
Esta muy bueno.
Mi duda es: ¿Como puedo poner este Diagrama Gantt en Español?