Gráficos de Gantt

Visão geral

Um diagrama de Gantt é um tipo que ilustra a divisão de um projeto nas tarefas dos componentes. Os diagramas de Gantt do Google ilustram o início, o término e a duração das tarefas em um projeto, bem como quaisquer dependências que uma tarefa possa ter. Os gráficos de Gantt do Google são renderizados no navegador usando SVG. Como todos os gráficos do Google, os gráficos de Gantt exibem dicas quando o usuário passa o cursor sobre os dados.

Observação: os diagramas de Gantt não funcionam nas versões antigas do Internet Explorer. O IE8 e versões anteriores não são compatíveis com SVG, o que é exigido pelos diagramas de Gantt.

Um exemplo simples

 
<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>

Sem dependências

Para criar um gráfico de Gantt sem dependências, verifique se o último valor de cada linha no DataTable está definido 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>

Como agrupar recursos

Tarefas de natureza semelhante podem ser agrupadas usando recursos. Adicione uma coluna do tipo string aos seus dados (após as colunas Task ID e Task Name) e verifique se todas as tarefas a serem agrupadas em um recurso têm o mesmo ID. Os recursos serão agrupados por cor. 

<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>

Início/término/duração da computação

Os diagramas de Gantt aceitam três valores relacionados à duração da tarefa: uma data de início, uma data de término e uma duração (em milissegundos). Se, por exemplo, não houver data de início, o gráfico poderá calcular o horário ausente com base na data de término e na duração. O mesmo se aplica ao cálculo da data de término. Se as datas de início e término forem informadas, a duração poderá ser calculada entre as duas.

Consulte a tabela abaixo para uma lista de como Gantt lida com a presença de início, fim e duração em diferentes circunstâncias.

Início Fim Duração Resultado
Apresentar Apresentar Apresentar Verifique se a duração é consistente com os horários de início/término. Gera um erro se for inconsistente.
Apresentar Apresentar Nulo Calcula a duração dos horários de início e término.
Apresentar Nulo Apresentar Calcula o horário de término.
Apresentar Nulo Nulo Gera um erro, indicando a impossibilidade de calcular a duração ou o horário de término.
Nulo Apresentar Apresentar Calcula o horário de início.
Nulo Nulo Apresentar Calcula o horário de início com base nas dependências. Com defaultStartDate, permite que o gráfico seja desenhado usando apenas durações.
Nulo Apresentar Nulo Gera erros, indicando a impossibilidade de calcular o horário de início ou a duração.
Nulo Nulo Nulo Gera erro, indicando a impossibilidade de calcular o horário de início, o horário de término ou a duração.

Com isso em mente, você pode criar um gráfico que mostre um deslocamento diário típico para o trabalho usando apenas a duração de cada tarefa. 

<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>

Caminho crítico

O caminho crítico em um diagrama de Gantt é o caminho (ou caminhos) que afeta diretamente a data de término. O caminho crítico nos gráficos de Gantt do Google fica vermelho por padrão e pode ser personalizado usando as opções criticalPathStyle. Também é possível desativar o caminho crítico definindo criticalPathEnabled como false. 

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

Setas de estilo

É possível estilizar as setas de dependência entre tarefas com as opções 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
            }
          }
        };

Como definir o estilo das faixas

O estilo da grade é processado por uma combinação de innerGridHorizLine, innerGridTrack e innerGridDarkTrack. Se você definir apenas o innerGridTrack, o gráfico calculará uma cor mais escura para o innerGridDarkTrack. No entanto, ao definir apenas o innerGridDarkTrack, o innerGridTrack usará a cor padrão e não calculará uma cor mais clara. 

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

Carregando

O nome do pacote google.charts.load é "gantt". 

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

O nome da classe da visualização é google.visualization.Gantt.

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

Formato de dados

Linhas:cada linha na tabela representa uma tarefa.

Columns:

  Coluna 0 Coluna 1 Coluna 2 Coluna 3 Coluna 4 Coluna 5 Coluna 6 Coluna 7
Finalidade: ID da tarefa Nome da tarefa ID do recurso (opcional) Início Fim Duração (em milissegundos) Porcentagem concluída Dependências
Tipo de dados: string string string date date number number string
Role: domínio dados dados dados dados dados dados dados

 

Opções de configuração

Nome Tipo Padrão Descrição
backgroundColor.fill string "branco" A cor de preenchimento do gráfico, como uma string de cor HTML.
gantt.arrow objeto null Em Gráficos de Gantt, o gantt.arrow controla as várias propriedades das setas que conectam as tarefas.
gantt.arrow.angle number 45 O ângulo da cabeça da seta.
gantt.arrow.color string "#000" A cor das setas.
gantt.arrow.length number 8 O comprimento da ponta da seta.
gantt.arrow.radius number 15 O raio para definir a curva da seta entre duas tarefas.
gantt.arrow.spaceAfter number 4 A quantidade de espaço em branco entre o topo de uma seta e a tarefa para a qual ela aponta.
gantt.arrow.width number 1.4 A largura das setas.
gantt.barCornerRadius number 2 O raio para definir a curva dos cantos de uma barra.
gantt.barHeight number null A altura das barras para tarefas.
gantt.criticalPathEnabled boolean verdadeiro Se true, todas as setas no caminho crítico serão estilizadas de maneira diferente.
gantt.criticalPathStyle objeto null Um objeto que contém o estilo de qualquer seta de caminho crítico.
gantt.criticalPathStyle.stroke string null A cor de todas as setas de caminho crítico.
gantt.criticalPathStyle.strokeWidth number 1.4 A espessura de qualquer seta de caminho crítico.
gantt.defaultStartDate data/número null Se não for possível calcular a data de início com base nos valores em DataTable, ela será definida dessa forma. Aceita um valor date (new Date(YYYY, M, D)) ou um número, que é a quantidade de milissegundos a ser usada.
gantt.innerGridHorizLine objeto null Define o estilo das linhas internas da grade horizontal.
gantt.innerGridHorizLine.stroke string null A cor das linhas internas da grade horizontal.
gantt.innerGridHorizLine.strokeWidth number 1 A largura das linhas internas de grade horizontal.
gantt.innerGridTrack.fill string null A cor de preenchimento da faixa de grade interna. Se nenhum innerGridDarkTrack.fill for especificado, ele será aplicado a todas as faixas de grade.
gantt.innerGridDarkTrack.fill string null A cor de preenchimento da faixa de grade interna escura e alternativa.
gantt.labelMaxWidth number 300 A quantidade máxima de espaço permitida para cada rótulo de tarefa.
gantt.labelStyle objeto null

Um objeto que contém os estilos dos rótulos de tarefas.

labelStyle: {
  fontName: Roboto2,
  fontSize: 14,
  color: '#757575'
},
gantt.percentEnabled boolean verdadeiro Preenche a barra de tarefas com base na porcentagem de conclusão da tarefa.
gantt.percentStyle.fill string null A cor da parte da porcentagem concluída de uma barra de tarefas.
gantt.shadowEnabled boolean verdadeiro Se definido como true, vai desenhar uma sombra em cada barra de tarefas que tenha dependências.
gantt.shadowColor string "#000" Define a cor das sombras em qualquer barra de tarefas que tenha dependências.
gantt.shadowOffset number 1 Define o deslocamento, em pixels, das sombras sob qualquer barra de tarefas que tenha dependências.
gantt.sortTasks boolean verdadeiro Especifica que as tarefas devem ser classificadas topologicamente, se for verdadeiro. Caso contrário, use a mesma ordem das linhas correspondentes do DataTable.
gantt.trackHeight number null A altura dos trilhos.
width number largura do elemento contêiner Largura do gráfico, em pixels.
height number altura do elemento contêiner altura do gráfico, em pixels.

Métodos

Método Descrição
draw(data, options)

Desenha o gráfico. O gráfico aceita outras chamadas de método somente depois que o evento ready é disparado. Extended description.

Return Type: nenhum
getSelection()

Retorna uma matriz das entidades de gráfico selecionadas. As entidades selecionáveis são barras, entradas de legenda e categorias. Neste gráfico, apenas uma entidade pode ser selecionada por vez. Extended description .

Tipo de retorno:matriz de elementos de seleção
setSelection()

Seleciona as entidades de gráfico especificadas. Cancela qualquer seleção anterior. As entidades selecionáveis são barras, entradas de legenda e categorias. Neste gráfico, apenas uma entidade pode ser selecionada por vez. Extended description .

Return Type: nenhum
clearChart()

Limpa o gráfico e libera todos os recursos alocados.

Return Type: nenhum

Eventos

Evento Descrição
click

Disparado quando o usuário clica dentro do gráfico. Pode ser usado para identificar quando o título, os elementos de dados, as entradas de legenda, os eixos, as linhas de grade ou os rótulos são clicados.

Propriedades:targetID
error

Disparado quando ocorre um erro ao tentar renderizar o gráfico.

Properties:ID, message
ready

O gráfico está pronto para chamadas de métodos externos. Se você quiser interagir com o gráfico e chamar métodos depois de desenhá-lo, configure um listener para esse evento antes de chamar o método draw e chame-o somente depois que o evento for disparado.

Properties:nenhuma
select

Disparado quando o usuário clica em uma entidade visual. Para saber o que foi selecionado, chame getSelection().

Properties:nenhuma

Política de dados

Todos os códigos e dados são processados e renderizados no navegador. Nenhum dado é enviado para nenhum servidor.