Gráficos de Gantt

Descripción general

Un gráfico de Gantt es un tipo de gráfico que ilustra el desglose de un proyecto en las tareas que lo componen. En los gráficos de Google Gantt, se muestra el inicio, el final y la duración de las tareas de un proyecto, así como las dependencias que podría tener. Los gráficos de Gantt de Google se procesan en el navegador con SVG. Al igual que todos los gráficos de Google, los gráficos de Gantt muestran información sobre la herramienta cuando el usuario se desplaza sobre los datos.

Nota: Los gráficos de Gantt no funcionan en las versiones anteriores de Internet Explorer. (IE8 y las versiones anteriores no admiten SVG, que los gráficos de Gantt requieren).

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 gráfico de Gantt que no tenga dependencias, asegúrate de que el último valor de cada fila de 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>

Agrupa recursos

Las tareas de naturaleza similar se pueden agrupar mediante 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 deban 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 y duración del procesamiento

Los gráficos 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). Si, por ejemplo, no hay una fecha de inicio, el gráfico puede calcular el tiempo que falta en función de la fecha de finalización y la duración. Lo mismo sucede con el cálculo de la fecha de finalización. Si se proporcionan la fecha de inicio y la de 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 de inicio, finalización y duración en diferentes circunstancias.

Inicio Fin Duración Resultado
Presente Presente Presente Comprueba que la duración coincida con las horas de inicio y finalización. Genera un error si no es coherente.
Presente Presente Nulo Calcula la duración a partir de las horas de inicio y finalización.
Presente Nulo Presente Calcula la hora de finalización.
Presente Nulo Nulo Genera un error porque no se puede calcular la duración ni la hora de finalización.
Nulo Presente Presente Hora de inicio del procesamiento.
Nulo Nulo Presente Calcula la hora de inicio según las dependencias. Junto con defaultStartDate, permite dibujar el gráfico solo con las duraciones.
Nulo Presente Nulo Genera un error porque no se puede calcular la hora de inicio ni la duración.
Nulo Nulo Nulo Muestra un error porque 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 en el que se defina un viaje cotidiano típico al trabajo con 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 de acceso crítica en un gráfico de Gantt es la ruta o rutas que afectan directamente la fecha de finalización. De forma predeterminada, los recorridos de Google en Gantt aparecen de color rojo y se pueden personalizar con las opciones de criticalPathStyle. También puedes desactivar la ruta de acceso crítica si estableces criticalPathEnabled en false. 

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

Cómo diseñar flechas

Puedes definir el estilo de las flechas de dependencia entre tareas con las opciones 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 definir el estilo de las pistas

El estilo de cuadrícula se maneja mediante una combinación de innerGridHorizLine, innerGridTrack y innerGridDarkTrack. Si solo se establece innerGridTrack, el gráfico calculará un color más oscuro para innerGridDarkTrack, pero si se establece solo 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
Propósito: ID de la tarea Nombre de la tarea ID del recurso (opcional) Inicio Fin Duración (en milisegundos) Porcentaje completado Dependencias
Tipo de datos: string string string fecha fecha número número string
Rol: dominio datos datos datos datos datos datos datos

 

Opciones de configuración

Nombre Tipo Predeterminado Descripción
fondoColor.fill string "blanco" El color de relleno del gráfico, como una string de color HTML.
gantt objeto null En Gráficos de Gantt, gantt.arrow controla las diversas propiedades de las flechas que conectan las tareas.
gantt.arrow.angle número 45 El ángulo de la cabeza de la flecha.
gantt.arrow.color string "#000" El color de las flechas.
gantt.arrow.length número 8 Es la longitud de la cabeza de la flecha.
gantt.arrow.radius número 15 Radio para definir la curva de la flecha entre dos tareas.
gantt.arrow.spaceDespués número 4 La cantidad de espacio en blanco entre la cabeza 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 las tareas.
gantt.criticalPathEnabled boolean true Si es true, el estilo de las flechas en la ruta crítica será diferente.
gantt.criticalPath objeto null Un objeto que contiene el estilo de cualquier flecha crítica de la ruta de acceso.
gantt.criticalPathStyle.stroke string null El color de las flechas de ruta críticas
gantt.criticalPathStyle.strokeWidth número 1.4 Espesor de cualquier flecha importante de la ruta.
gantt.defaultStartDate. fecha/número null Si la fecha de inicio no se puede calcular a partir de los valores de la tabla de datos, se establecerá la fecha de inicio en esto. Acepta un valor de date (new Date(YYYY, M, D)) o un número, que es la cantidad de milisegundos que se usará.
gantt.innerGridHorizLine objeto null Define el estilo de las líneas de cuadrícula horizontales internas.
gantt.innerGridHorizLine.Strike string null El color de las líneas de la cuadrícula horizontal interna
gantt.innerGridHorizLine.strokeWidth número 1 Ancho de las líneas de la cuadrícula horizontal interna
gantt.innerGridTrack.fill string null El color de relleno de la pista de cuadrícula interna Si no se especifica un innerGridDarkTrack.fill, esto se aplicará a cada segmento de la cuadrícula.
gantt.innerGridDarkTrack string null El color de relleno de la pista de cuadrícula interna alternativa y oscura.
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 true Rellena la barra de tareas según el porcentaje completado de la tarea.
gantt.percentStyle.fill string null El color del porcentaje de la parte de una barra de tareas completada.
gantt.shadowEnabled boolean true Si se establece en true, dibuja una sombra debajo de cada barra de tareas que tiene dependencias.
gantt.shadowColor string "#000" Define el color de las sombras en 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 true Especifica que las tareas se deben ordenar por topología, si es verdadero; de lo contrario, usa el mismo orden que las filas correspondientes de la tabla de datos.
gantt.trackHeight número null La altura de las pistas.
ancho número ancho del elemento contenedor Ancho del gráfico en píxeles.
alto 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 a métodos después de que se activa el evento ready. Extended description

Tipo de datos que se muestra: ninguno
getSelection()

Muestra un arreglo de las entidades del gráfico seleccionadas. Las entidades que se pueden seleccionar son barras, entradas de leyendas y categorías. Para este gráfico, solo se puede seleccionar una entidad por momento. Extended description.

Tipo de datos que se muestra: arreglo de elementos de selección
setSelection()

Selecciona las entidades del gráfico especificadas. Cancela cualquier selección anterior. Las entidades que se pueden seleccionar son barras, entradas de leyendas 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 los recursos asignados.

Tipo de datos que se muestra: ninguno

Eventos

Evento Descripción
click

Se activa cuando el usuario hace clic dentro del gráfico. Se puede usar para identificar cuándo se hace clic en el título, los elementos de datos, las entradas de la 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 procesar el gráfico.

Propiedades: ID, mensaje
ready

El gráfico está listo para las llamadas a métodos externos. 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 y llamarlo solo después de que se active el evento.

Propiedades: ninguna
select

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

Propiedades: ninguna

Política de Datos

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