Gráficos de Gantt

Descripción general

Un diagrama de Gantt es un tipo de diagrama que ilustra el desglose de un proyecto en las tareas que lo componen. Los diagramas de Gantt de Google ilustran el inicio, el final y la duración de las tareas dentro de un proyecto, así como las dependencias que pueda tener una tarea. Los gráficos de Gantt de Google se procesan en el navegador mediante SVG. Al igual que todos los gráficos de Google, los diagramas de Gantt muestran información sobre la herramienta cuando el usuario coloca el cursor sobre los datos.

Nota: Los diagramas de Gantt no funcionarán en las versiones anteriores de Internet Explorer. (IE8 y las versiones anteriores no admiten archivos SVG, que es necesario para los gráficos de Gantt).

Un ejemplo simple

 
<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']});
    google.charts.setOnLoadCallback(drawChart);

    function daysToMilliseconds(days) {
      return days * 24 * 60 * 60 * 1000;
    }

    function drawChart() {

      var data = new google.visualization.DataTable();
      data.addColumn('string', 'Task ID');
      data.addColumn('string', 'Task Name');
      data.addColumn('date', 'Start Date');
      data.addColumn('date', 'End Date');
      data.addColumn('number', 'Duration');
      data.addColumn('number', 'Percent Complete');
      data.addColumn('string', 'Dependencies');

      data.addRows([
        ['Research', 'Find sources',
         new Date(2015, 0, 1), new Date(2015, 0, 5), null,  100,  null],
        ['Write', 'Write paper',
         null, new Date(2015, 0, 9), daysToMilliseconds(3), 25, 'Research,Outline'],
        ['Cite', 'Create bibliography',
         null, new Date(2015, 0, 7), daysToMilliseconds(1), 20, 'Research'],
        ['Complete', 'Hand in paper',
         null, new Date(2015, 0, 10), daysToMilliseconds(1), 0, 'Cite,Write'],
        ['Outline', 'Outline paper',
         null, new Date(2015, 0, 6), daysToMilliseconds(1), 100, 'Research']
      ]);

      var options = {
        height: 275
      };

      var chart = new google.visualization.Gantt(document.getElementById('chart_div'));

      chart.draw(data, options);
    }
  </script>
</head>
<body>
  <div id="chart_div"></div>
</body>
</html>

Sin dependencias

Para crear un diagrama de Gantt que no tenga dependencias, asegúrate de que el último valor de cada fila en tu DataTable esté configurado como null. 

<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']});
    google.charts.setOnLoadCallback(drawChart);

    function drawChart() {

      var data = new google.visualization.DataTable();
      data.addColumn('string', 'Task ID');
      data.addColumn('string', 'Task Name');
      data.addColumn('string', 'Resource');
      data.addColumn('date', 'Start Date');
      data.addColumn('date', 'End Date');
      data.addColumn('number', 'Duration');
      data.addColumn('number', 'Percent Complete');
      data.addColumn('string', 'Dependencies');

      data.addRows([
        ['2014Spring', 'Spring 2014', 'spring',
         new Date(2014, 2, 22), new Date(2014, 5, 20), null, 100, null],
        ['2014Summer', 'Summer 2014', 'summer',
         new Date(2014, 5, 21), new Date(2014, 8, 20), null, 100, null],
        ['2014Autumn', 'Autumn 2014', 'autumn',
         new Date(2014, 8, 21), new Date(2014, 11, 20), null, 100, null],
        ['2014Winter', 'Winter 2014', 'winter',
         new Date(2014, 11, 21), new Date(2015, 2, 21), null, 100, null],
        ['2015Spring', 'Spring 2015', 'spring',
         new Date(2015, 2, 22), new Date(2015, 5, 20), null, 50, null],
        ['2015Summer', 'Summer 2015', 'summer',
         new Date(2015, 5, 21), new Date(2015, 8, 20), null, 0, null],
        ['2015Autumn', 'Autumn 2015', 'autumn',
         new Date(2015, 8, 21), new Date(2015, 11, 20), null, 0, null],
        ['2015Winter', 'Winter 2015', 'winter',
         new Date(2015, 11, 21), new Date(2016, 2, 21), null, 0, null],
        ['Football', 'Football Season', 'sports',
         new Date(2014, 8, 4), new Date(2015, 1, 1), null, 100, null],
        ['Baseball', 'Baseball Season', 'sports',
         new Date(2015, 2, 31), new Date(2015, 9, 20), null, 14, null],
        ['Basketball', 'Basketball Season', 'sports',
         new Date(2014, 9, 28), new Date(2015, 5, 20), null, 86, null],
        ['Hockey', 'Hockey Season', 'sports',
         new Date(2014, 9, 8), new Date(2015, 5, 21), null, 89, null]
      ]);

      var options = {
        height: 400,
        gantt: {
          trackHeight: 30
        }
      };

      var chart = new google.visualization.Gantt(document.getElementById('chart_div'));

      chart.draw(data, options);
    }
  </script>
</head>
<body>
  <div id="chart_div"></div>
</body>
</html>

Cómo agrupar recursos

Las tareas que son de naturaleza similar se pueden agrupar usando recursos. Agrega una columna de tipo string a tus datos (después de las columnas Task ID y Task Name) y asegúrate de que las tareas que deben agruparse en un recurso tengan el mismo ID de recurso. Los recursos se agruparán por color. 

<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']});
    google.charts.setOnLoadCallback(drawChart);

    function daysToMilliseconds(days) {
      return days * 24 * 60 * 60 * 1000;
    }

    function drawChart() {

      var data = new google.visualization.DataTable();
      data.addColumn('string', 'Task ID');
      data.addColumn('string', 'Task Name');
      data.addColumn('string', 'Resource');
      data.addColumn('date', 'Start Date');
      data.addColumn('date', 'End Date');
      data.addColumn('number', 'Duration');
      data.addColumn('number', 'Percent Complete');
      data.addColumn('string', 'Dependencies');

      data.addRows([
        ['Research', 'Find sources', null,
         new Date(2015, 0, 1), new Date(2015, 0, 5), null,  100,  null],
        ['Write', 'Write paper', 'write',
         null, new Date(2015, 0, 9), daysToMilliseconds(3), 25, 'Research,Outline'],
        ['Cite', 'Create bibliography', 'write',
         null, new Date(2015, 0, 7), daysToMilliseconds(1), 20, 'Research'],
        ['Complete', 'Hand in paper', 'complete',
         null, new Date(2015, 0, 10), daysToMilliseconds(1), 0, 'Cite,Write'],
        ['Outline', 'Outline paper', 'write',
         null, new Date(2015, 0, 6), daysToMilliseconds(1), 100, 'Research']
      ]);

      var options = {
        height: 275
      };

      var chart = new google.visualization.Gantt(document.getElementById('chart_div'));

      chart.draw(data, options);
    }
  </script>
</head>
<body>
  <div id="chart_div"></div>
</body>
</html>

Inicio, finalización o duración del procesamiento

Los diagramas de Gantt aceptan tres valores relacionados con la duración de la tarea: una fecha de inicio, una fecha de finalización y una duración (en milisegundos). Por ejemplo, si no hay una fecha de inicio, el gráfico puede calcular la hora faltante según la fecha de finalización y la duración. Lo mismo se aplica para calcular la fecha de finalización. Si se proporcionan las fechas de inicio y finalización, la duración se puede calcular entre ambas.

Consulta la siguiente tabla para obtener una lista de cómo Gantt maneja la presencia del inicio, la finalización y la duración en diferentes circunstancias.

Iniciar Fin Duración Resultado
Presentar Presentar Presentar Compruebe que la duración sea coherente con las horas de inicio y finalización. Muestra un error si no son coherentes.
Presentar Presentar Nulo Calcula la duración desde las horas de inicio y finalización.
Presentar Nulo Presentar Calcula la hora de finalización.
Presentar Nulo Nulo Muestra el error como que no puede calcular la duración o la hora de finalización.
Nulo Presentar Presentar Calcula la hora de inicio.
Nulo Nulo Presentar Calcula la hora de inicio según las dependencias. Junto con defaultStartDate, permite que el gráfico se dibuje solo con las duraciones.
Nulo Presentar Nulo Muestra el error como que no se puede calcular la hora de inicio o la duración.
Nulo Nulo Nulo Muestra el error como que no se puede calcular la hora de inicio, la hora de finalización o la duración.

Teniendo en cuenta lo anterior, puedes crear un gráfico que indique un viaje diario típico al trabajo y ten en cuenta solo la duración de cada tarea. 

<html>
  <head>
    <script src="https://www.gstatic.com/charts/loader.js"></script>
    <script>
      google.charts.load("current", { packages: ["gantt"] });
      google.charts.setOnLoadCallback(drawChart);

      function toMilliseconds(minutes) {
        return minutes * 60 * 1000;
      }

      function drawChart() {
        var otherData = new google.visualization.DataTable();
        otherData.addColumn("string", "Task ID");
        otherData.addColumn("string", "Task Name");
        otherData.addColumn("string", "Resource");
        otherData.addColumn("date", "Start");
        otherData.addColumn("date", "End");
        otherData.addColumn("number", "Duration");
        otherData.addColumn("number", "Percent Complete");
        otherData.addColumn("string", "Dependencies");

        otherData.addRows([
          [
            "toTrain",
            "Walk to train stop",
            "walk",
            null,
            null,
            toMilliseconds(5),
            100,
            null,
          ],
          [
            "music",
            "Listen to music",
            "music",
            null,
            null,
            toMilliseconds(70),
            100,
            null,
          ],
          [
            "wait",
            "Wait for train",
            "wait",
            null,
            null,
            toMilliseconds(10),
            100,
            "toTrain",
          ],
          [
            "train",
            "Train ride",
            "train",
            null,
            null,
            toMilliseconds(45),
            75,
            "wait",
          ],
          [
            "toWork",
            "Walk to work",
            "walk",
            null,
            null,
            toMilliseconds(10),
            0,
            "train",
          ],
          [
            "work",
            "Sit down at desk",
            null,
            null,
            null,
            toMilliseconds(2),
            0,
            "toWork",
          ],
        ]);

        var options = {
          height: 275,
          gantt: {
            defaultStartDate: new Date(2015, 3, 28),
          },
        };

        var chart = new google.visualization.Gantt(
          document.getElementById("chart_div")
        );

        chart.draw(otherData, options);
      }
    </script>
  </head>
  <body>
    <div id="chart_div"></div>
  </body>
</html>

Ruta crítica

La ruta crítica en un diagrama de Gantt es la ruta, o rutas, que afectan directamente la fecha de finalización. La ruta crítica en los diagramas de Gantt de Google se muestra de color rojo de forma predeterminada y se puede personalizar con las opciones de criticalPathStyle. También puedes desactivar la ruta crítica estableciendo criticalPathEnabled en false. 

        var options = {
          height: 275,
          gantt: {
            criticalPathEnabled: true,
            criticalPathStyle: {
              stroke: '#e64a19',
              strokeWidth: 5
            }
          }
        };

Cómo aplicar diseño a las flechas

Puedes aplicar diseño a las flechas de dependencia entre tareas con las opciones de gantt.arrow: 

        var options = {
          height: 275,
          gantt: {
            criticalPathEnabled: false, // Critical path arrows will be the same as other arrows.
            arrow: {
              angle: 100,
              width: 5,
              color: 'green',
              radius: 0
            }
          }
        };

Cómo aplicar estilos a las pistas

El diseño de cuadrícula se controla mediante una combinación de innerGridHorizLine, innerGridTrack y innerGridDarkTrack. Si configuras solo el innerGridTrack, el gráfico calculará un color más oscuro para el innerGridDarkTrack, pero si configuras únicamente el innerGridDarkTrack, innerGridTrack usará su color predeterminado y no calculará un color más claro. 

      var options = {
        height: 275,
        gantt: {
          criticalPathEnabled: false,
          innerGridHorizLine: {
            stroke: '#ffe0b2',
            strokeWidth: 2
          },
          innerGridTrack: {fill: '#fff3e0'},
          innerGridDarkTrack: {fill: '#ffcc80'}
        }
      };

Cargando

El nombre del paquete google.charts.load es "gantt". 

  google.charts.load("current", {packages: ["gantt"]});

El nombre de clase de la visualización es google.visualization.Gantt.

  var chart = new google.visualization.Gantt(container);

Formato de los datos

Filas: Cada fila de la tabla representa una tarea.

Columnas:

  Columna 0 Columna 1 Columna 2 Columna 3 Columna 4 Columna 5 Columna 6 Columna 7
Objetivo: ID de la tarea Nombre de la tarea ID de recurso (opcional) Iniciar Finalizar Duración (en milisegundos) Porcentaje de avance Dependencias
Tipo de datos: cadena cadena cadena date date número número cadena
Role: dominio datos datos datos datos datos datos datos

 

Opciones de configuración

Nombre Tipo Predeterminado Descripción
backgroundColor.fill cadena 'blanco' El color de relleno del gráfico, como una cadena HTML de color.
gantt.arrow objeto null En el caso de los diagramas de Gantt, gantt.arrow controla las distintas propiedades de las flechas que conectan tareas.
gantt.arrow.angle número 45 El ángulo de la punta de la flecha.
gantt.arrow.color cadena "#000" El color de las flechas.
gantt.arrow.length número 8 La longitud de la punta de la flecha.
gantt.arrow.radius número 15 El radio para definir la curva de la flecha entre dos tareas.
gantt.arrow.spaceAfter número 4 La cantidad de espacio en blanco entre la punta de una flecha y la tarea a la que apunta.
gantt.arrow.width número 1.4 El ancho de las flechas.
gantt.barCornerRadius número 2 Radio para definir la curva de las esquinas de una barra.
gantt.barHeight número null La altura de las barras para tareas.
gantt.criticalPathEnabled boolean verdadero Si es true, alguna flecha de la ruta crítica tendrá un estilo diferente.
gantt.criticalPathStyle objeto null Un objeto que contiene el estilo de cualquier flecha de ruta crítica.
gantt.criticalPathStyle.stroke cadena null El color de las flechas de ruta crítica.
gantt.criticalPathStyle.strokeWidth número 1.4 Espesor de las flechas de la ruta crítica.
gantt.defaultStartDate fecha/número null Si la fecha de inicio no se puede calcular a partir de los valores de DataTable, la fecha de inicio se establecerá como esta. Acepta un valor date (new Date(YYYY, M, D)) o un número, que es la cantidad de milisegundos que se usarán.
gantt.innerGridHorizLine objeto null Define el estilo de las líneas de cuadrícula horizontales internas.
gantt.innerGridHorizLine.stroke cadena null El color de las líneas de cuadrícula horizontales internas.
gantt.innerGridHorizLine.strokeWidth número 1 El ancho de las líneas de cuadrícula horizontales internas.
gantt.innerGridTrack.fill cadena null El color de relleno del seguimiento de cuadrícula interno. Si no se especifica un innerGridDarkTrack.fill, este se aplicará a todos los seguimientos de cuadrícula.
gantt.innerGridDarkTrack.fill cadena null El color de relleno del seguimiento de cuadrícula interno oscuro y alternativo.
gantt.labelMaxWidth número 300 La cantidad máxima de espacio permitido para cada etiqueta de tarea.
gantt.labelStyle objeto null

Un objeto que contiene los estilos de las etiquetas de tareas.

labelStyle: {
  fontName: Roboto2,
  fontSize: 14,
  color: '#757575'
},
gantt.percentEnabled boolean verdadero Llena la barra de tareas en función del porcentaje completado de la tarea.
gantt.percentStyle.fill cadena null El color de la parte del porcentaje completado de una barra de tareas.
gantt.shadowEnabled boolean verdadero Si se establece en true, dibuja una sombra debajo de cada barra de tareas que tiene dependencias.
gantt.shadowColor cadena "#000" Define el color de las sombras debajo de cualquier barra de tareas que tenga dependencias.
gantt.shadowOffset número 1 Define el desplazamiento, en píxeles, de las sombras debajo de cualquier barra de tareas que tenga dependencias.
gantt.sortTasks boolean verdadero Especifica que las tareas deben ordenarse topológicamente, si es verdadero; de lo contrario, usa el mismo orden que las filas correspondientes de DataTable.
gantt.trackHeight número null La altura de las pistas.
width número ancho del elemento contenedor Es el ancho del gráfico (en píxeles).
height número altura del elemento contenedor altura del gráfico en píxeles.

Métodos

Método Descripción
draw(data, options)

Dibuja el gráfico. El gráfico acepta más llamadas de método solo después de que se activa el evento ready. Extended description.

Tipo de datos que se muestra: ninguno
getSelection()

Muestra un array de las entidades del gráfico seleccionadas. Las entidades seleccionables son barras, entradas de leyenda y categorías. Para este gráfico, solo se puede seleccionar una entidad en un momento determinado. Extended description .

Tipo de datos que se muestra: Es el array de elementos de selección.
setSelection()

Selecciona las entidades del gráfico especificadas. Cancela cualquier selección anterior. Las entidades seleccionables son barras, entradas de leyenda y categorías. Para este gráfico, solo se puede seleccionar una entidad a la vez. Extended description .

Tipo de datos que se muestra: ninguno
clearChart()

Borra el gráfico y libera todos sus recursos asignados.

Tipo de datos que se muestra: ninguno

Eventos

Evento Descripción
click

Se activa cuando el usuario hace clic en el gráfico. Se puede usar para identificar cuándo se hace clic en el título, los elementos de datos, las entradas de leyenda, los ejes, las líneas de cuadrícula o las etiquetas.

Propiedades: targetID
error

Se activa cuando se produce un error cuando se intenta renderizar el gráfico.

Propiedades: ID, mensaje
ready

El gráfico está listo para llamadas de método externas. Si deseas interactuar con el gráfico y llamar a los métodos después de dibujarlo, debes configurar un objeto de escucha para este evento antes de llamar al método draw e llamarlos solo después de que se haya activado el evento.

Propiedades: ninguna
select

Se activa cuando el usuario hace clic en una entidad visual. Para saber qué se seleccionó, llama a getSelection().

Propiedades: ninguna

Política de datos

Todo el código y los datos se procesan y renderizan en el navegador. No se envían datos a ningún servidor.