Cronogramas

  1. Visão geral
  2. Um exemplo simples
  3. Como rotular as barras
  4. Um exemplo avançado
  5. Colocar barras em uma linha
  6. Mudar as fontes
  7. Como controlar as cores
  8. Linhas de grade sobrepostas
  9. Como personalizar dicas
  10. Carregando
  11. Formato de dados
  12. Opções de configuração
  13. Métodos
  14. Eventos
  15. Política de dados

Visão geral

Uma linha do tempo é um gráfico que mostra como um conjunto de recursos é usado ao longo do tempo. Se você estiver gerenciando um projeto de software e quiser ilustrar quem está fazendo o quê e quando e se estiver organizando uma conferência e precisar programar salas de reunião, um cronograma geralmente é uma escolha de visualização razoável. Um tipo conhecido de linha do tempo é o gráfico de Gantt (em inglês).

Observação: nos objetos Date JavaScript, os meses são indexados a partir de zero e sobem até 11, com janeiro sendo mês 0 e dezembro sendo mês 11. Se sua linha do tempo parecer estar fora do prazo de um mês, provavelmente essa é a causa. Para mais informações, consulte a página Datas e horas.

Um exemplo simples

Digamos que você queira representar quando os presidentes americanos aceitaram os termos. Aqui, os "recursos" são os presidentes, e podemos plotar o termo de cada presidente como bar:

Passar o cursor sobre uma barra exibe uma dica com informações mais detalhadas.

Depois de carregar o pacote timeline e definir um callback para desenhar o gráfico quando a página for renderizada, o método drawChart() instancia uma google.visualization.Timeline() e preenche uma dataTable com uma linha para cada presidente.

Dentro de dataTable, a primeira coluna é o nome do presidente, e a segunda e a terceira colunas são os horários de início e término. Eles têm o tipo Date de JavaScript, mas também podem ser números simples.

Por fim, invocamos o método draw() do gráfico, que o exibe dentro de uma div com o mesmo identificador (timeline) usado quando container foi declarado na primeira linha de drawChart().

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['timeline']});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var container = document.getElementById('timeline');
        var chart = new google.visualization.Timeline(container);
        var dataTable = new google.visualization.DataTable();

        dataTable.addColumn({ type: 'string', id: 'President' });
        dataTable.addColumn({ type: 'date', id: 'Start' });
        dataTable.addColumn({ type: 'date', id: 'End' });
        dataTable.addRows([
          [ 'Washington', new Date(1789, 3, 30), new Date(1797, 2, 4) ],
          [ 'Adams',      new Date(1797, 2, 4),  new Date(1801, 2, 4) ],
          [ 'Jefferson',  new Date(1801, 2, 4),  new Date(1809, 2, 4) ]]);

        chart.draw(dataTable);
      }
    </script>
  </head>
  <body>
    <div id="timeline" style="height: 180px;"></div>
  </body>
</html>

As linhas do tempo dos Gráficos Google são personalizáveis e, nos exemplos a seguir, mostraremos algumas maneiras comuns de personalizar a aparência das linhas do tempo.

Como rotular as barras

Além dos rótulos de linha (Washington", "Adams", "Jefferson" acima), é possível rotular barras individuais. Aqui, mudamos os rótulos de linha para números simples e colocamos o nome de cada presidente na barra dele.

Nesse código, inserimos uma nova coluna nos dados para armazenar as etiquetas de barra: o nome completo de cada presidente. Quando há quatro colunas em uma linha do tempo dataTable, a primeira é interpretada como o rótulo da linha, a segunda como o rótulo da barra e a terceira e a quarta como início e fim.

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<script type="text/javascript">
  google.charts.load("current", {packages:["timeline"]});
  google.charts.setOnLoadCallback(drawChart);
  function drawChart() {
    var container = document.getElementById('example2.1');
    var chart = new google.visualization.Timeline(container);
    var dataTable = new google.visualization.DataTable();

    dataTable.addColumn({ type: 'string', id: 'Term' });
    dataTable.addColumn({ type: 'string', id: 'Name' });
    dataTable.addColumn({ type: 'date', id: 'Start' });
    dataTable.addColumn({ type: 'date', id: 'End' });

    dataTable.addRows([
      [ '1', 'George Washington', new Date(1789, 3, 30), new Date(1797, 2, 4) ],
      [ '2', 'John Adams',        new Date(1797, 2, 4),  new Date(1801, 2, 4) ],
      [ '3', 'Thomas Jefferson',  new Date(1801, 2, 4),  new Date(1809, 2, 4) ]]);

    chart.draw(dataTable);
  }
</script>

<div id="example2.1" style="height: 200px;"></div>

Os novos rótulos de linha acima não são muito informativos. Vamos removê-los com a opção showRowLabels de linha do tempo.

Por padrão, showRowLabels é true. Definir como false remove os rótulos de linha:

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<script type="text/javascript">
  google.charts.load("current", {packages:["timeline"]});
  google.charts.setOnLoadCallback(drawChart);
  function drawChart() {
    var container = document.getElementById('example2.2');
    var chart = new google.visualization.Timeline(container);
    var dataTable = new google.visualization.DataTable();
    dataTable.addColumn({ type: 'string', id: 'Term' });
    dataTable.addColumn({ type: 'string', id: 'Name' });
    dataTable.addColumn({ type: 'date', id: 'Start' });
    dataTable.addColumn({ type: 'date', id: 'End' });
    dataTable.addRows([
      [ '1', 'George Washington', new Date(1789, 3, 30), new Date(1797, 2, 4) ],
      [ '2', 'John Adams',        new Date(1797, 2, 4),  new Date(1801, 2, 4) ],
      [ '3', 'Thomas Jefferson',  new Date(1801, 2, 4),  new Date(1809, 2, 4) ]]);

    var options = {
      timeline: { showRowLabels: false }
    };

    chart.draw(dataTable, options);
  }
</script>

<div id="example2.2" style="height: 180px;"></div>

Exemplo avançado

Para tornar a linha do tempo mais complexa, vamos adicionar vice-presidentes e secretários de estado ao nosso gráfico. John Adams foi vice-presidente antes de se tornar presidente, e Thomas Jefferson foi secretário de estado, depois vice-presidente e, finalmente, presidente.

Nos cronogramas, um recurso terá a mesma cor mesmo quando aparece em várias linhas. Portanto, no gráfico a seguir, cada pessoa é representada com uma cor consistente.

Alguns secretos de Estado serviam por períodos muito curtos, então este gráfico é um bom teste de rotulagem. Quando um rótulo é muito grande para a barra, ele é abreviado ou eliminado, dependendo do tamanho da barra. Os usuários sempre podem passar o cursor sobre a barra para ver informações de dica.

A linha do tempo vai exibir as linhas em ordem, como presidente, sobre o vice-presidente e secretário de Estado, porque elas aparecem no código abaixo. No entanto, o layout das barras é determinado apenas pelos horários de início e término. Portanto, trocar dois secretos de Estado ou dois presidentes na dataTable não tem efeito no gráfico.

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<script type="text/javascript">
  google.charts.load("current", {packages:["timeline"]});
  google.charts.setOnLoadCallback(drawChart);
  function drawChart() {

    var container = document.getElementById('example3.1');
    var chart = new google.visualization.Timeline(container);
    var dataTable = new google.visualization.DataTable();
    dataTable.addColumn({ type: 'string', id: 'Position' });
    dataTable.addColumn({ type: 'string', id: 'Name' });
    dataTable.addColumn({ type: 'date', id: 'Start' });
    dataTable.addColumn({ type: 'date', id: 'End' });
    dataTable.addRows([
      [ 'President', 'George Washington', new Date(1789, 3, 30), new Date(1797, 2, 4) ],
      [ 'President', 'John Adams', new Date(1797, 2, 4), new Date(1801, 2, 4) ],
      [ 'President', 'Thomas Jefferson', new Date(1801, 2, 4), new Date(1809, 2, 4) ],
      [ 'Vice President', 'John Adams', new Date(1789, 3, 21), new Date(1797, 2, 4)],
      [ 'Vice President', 'Thomas Jefferson', new Date(1797, 2, 4), new Date(1801, 2, 4)],
      [ 'Vice President', 'Aaron Burr', new Date(1801, 2, 4), new Date(1805, 2, 4)],
      [ 'Vice President', 'George Clinton', new Date(1805, 2, 4), new Date(1812, 3, 20)],
      [ 'Secretary of State', 'John Jay', new Date(1789, 8, 25), new Date(1790, 2, 22)],
      [ 'Secretary of State', 'Thomas Jefferson', new Date(1790, 2, 22), new Date(1793, 11, 31)],
      [ 'Secretary of State', 'Edmund Randolph', new Date(1794, 0, 2), new Date(1795, 7, 20)],
      [ 'Secretary of State', 'Timothy Pickering', new Date(1795, 7, 20), new Date(1800, 4, 12)],
      [ 'Secretary of State', 'Charles Lee', new Date(1800, 4, 13), new Date(1800, 5, 5)],
      [ 'Secretary of State', 'John Marshall', new Date(1800, 5, 13), new Date(1801, 2, 4)],
      [ 'Secretary of State', 'Levi Lincoln', new Date(1801, 2, 5), new Date(1801, 4, 1)],
      [ 'Secretary of State', 'James Madison', new Date(1801, 4, 2), new Date(1809, 2, 3)]
    ]);

    chart.draw(dataTable);
  }
</script>

<div id="example3.1" style="height: 200px;"></div>

Colocar barras em uma linha

Ao contrário dos pop-ups, só pode haver um presidente dos EUA de cada vez, por isso, se rotularmos todas as linhas como "Presidente", a linha do tempo combinará as três linhas do primeiro gráfico em uma linha para uma apresentação mais limpa. Você pode controlar esse comportamento com a opção groupByRowLabel.

Este é o comportamento padrão:

Agora, vamos definir groupByRowLabel como false e dividir a linha em três:

O código para desativar o agrupamento:

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<script type="text/javascript">
  google.charts.load("current", {packages:["timeline"]});
  google.charts.setOnLoadCallback(drawChart);
  function drawChart() {
    var container = document.getElementById('example4.2');
    var chart = new google.visualization.Timeline(container);
    var dataTable = new google.visualization.DataTable();

    dataTable.addColumn({ type: 'string', id: 'Role' });
    dataTable.addColumn({ type: 'string', id: 'Name' });
    dataTable.addColumn({ type: 'date', id: 'Start' });
    dataTable.addColumn({ type: 'date', id: 'End' });
    dataTable.addRows([
      [ 'President', 'George Washington', new Date(1789, 3, 30), new Date(1797, 2, 4) ],
      [ 'President', 'John Adams', new Date(1797, 2, 4), new Date(1801, 2, 4) ],
      [ 'President', 'Thomas Jefferson', new Date(1801, 2, 4), new Date(1809, 2, 4) ]]);

    var options = {
      timeline: { groupByRowLabel: false }
    };

    chart.draw(dataTable, options);
  }
</script>

<div id="example4.2" style="height: 200px;"></div>

Como controlar as cores

Por padrão, o serviço Gráficos Google escolhe cores otimizadas para estética e legibilidade, incluindo usuários com deficiência visual. Você pode personalizar o comportamento padrão com as opções colorByRowLabel, singleColor, backgroundColor e colors.

A opção colorByRowLabel colore todas as barras na mesma linha. Essa pode ser uma boa opção quando há lacunas entre as barras.

O colorByRowLabel é definido por padrão como false. Portanto, aqui modificamo-o e o definimos como true.

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<script type="text/javascript">
  google.charts.load("current", {packages:["timeline"]});
  google.charts.setOnLoadCallback(drawChart);
  function drawChart() {

    var container = document.getElementById('example5.1');
    var chart = new google.visualization.Timeline(container);
    var dataTable = new google.visualization.DataTable();
    dataTable.addColumn({ type: 'string', id: 'Room' });
    dataTable.addColumn({ type: 'string', id: 'Name' });
    dataTable.addColumn({ type: 'date', id: 'Start' });
    dataTable.addColumn({ type: 'date', id: 'End' });
    dataTable.addRows([
      [ 'Magnolia Room', 'Beginning JavaScript',       new Date(0,0,0,12,0,0),  new Date(0,0,0,13,30,0) ],
      [ 'Magnolia Room', 'Intermediate JavaScript',    new Date(0,0,0,14,0,0),  new Date(0,0,0,15,30,0) ],
      [ 'Magnolia Room', 'Advanced JavaScript',        new Date(0,0,0,16,0,0),  new Date(0,0,0,17,30,0) ],
      [ 'Willow Room',   'Beginning Google Charts',    new Date(0,0,0,12,30,0), new Date(0,0,0,14,0,0) ],
      [ 'Willow Room',   'Intermediate Google Charts', new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ],
      [ 'Willow Room',   'Advanced Google Charts',     new Date(0,0,0,16,30,0), new Date(0,0,0,18,0,0) ]]);

    var options = {
      timeline: { colorByRowLabel: true }
    };

    chart.draw(dataTable, options);
  }

</script>

<div id="example5.1" style="height: 100px;"></div>

Se você quiser que todas as barras tenham a mesma cor, independentemente da linha em que estiverem, use a opção singleColor:

No código abaixo, singleColor está definido como um valor hexadecimal para colorir todas as barras em verde claro:

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<script type="text/javascript">
  google.charts.load("current", {packages:["timeline"]});
  google.charts.setOnLoadCallback(drawChart);
  function drawChart() {

    var container = document.getElementById('example5.2');
    var chart = new google.visualization.Timeline(container);
    var dataTable = new google.visualization.DataTable();

    dataTable.addColumn({ type: 'string', id: 'Room' });
    dataTable.addColumn({ type: 'string', id: 'Name' });
    dataTable.addColumn({ type: 'date', id: 'Start' });
    dataTable.addColumn({ type: 'date', id: 'End' });
    dataTable.addRows([
      [ 'Magnolia Room',  'CSS Fundamentals',    new Date(0,0,0,12,0,0),  new Date(0,0,0,14,0,0) ],
      [ 'Magnolia Room',  'Intro JavaScript',    new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ],
      [ 'Magnolia Room',  'Advanced JavaScript', new Date(0,0,0,16,30,0), new Date(0,0,0,19,0,0) ],
      [ 'Gladiolus Room', 'Intermediate Perl',   new Date(0,0,0,12,30,0), new Date(0,0,0,14,0,0) ],
      [ 'Gladiolus Room', 'Advanced Perl',       new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ],
      [ 'Gladiolus Room', 'Applied Perl',        new Date(0,0,0,16,30,0), new Date(0,0,0,18,0,0) ],
      [ 'Petunia Room',   'Google Charts',       new Date(0,0,0,12,30,0), new Date(0,0,0,14,0,0) ],
      [ 'Petunia Room',   'Closure',             new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ],
      [ 'Petunia Room',   'App Engine',          new Date(0,0,0,16,30,0), new Date(0,0,0,18,30,0) ]]);

    var options = {
      timeline: { singleColor: '#8d8' },
    };

    chart.draw(dataTable, options);
  }
</script>

<div id="example5.2" style="height: 150px;"></div>

É possível controlar a cor do plano de fundo das linhas com a opção backgroundColor:

O backgroundColor é especificado como um valor hexadecimal. Aqui, pareamos com colorByRowLabel para mostrar as faixas em uma videoconferência:

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<script type="text/javascript">
  google.charts.load("current", {packages:["timeline"]});
  google.charts.setOnLoadCallback(drawChart);
  function drawChart() {
    var container = document.getElementById('example5.3');
    var chart = new google.visualization.Timeline(container);
    var dataTable = new google.visualization.DataTable();
    dataTable.addColumn({ type: 'string', id: 'Room' });
    dataTable.addColumn({ type: 'string', id: 'Name' });
    dataTable.addColumn({ type: 'date', id: 'Start' });
    dataTable.addColumn({ type: 'date', id: 'End' });
    dataTable.addRows([
      [ 'Magnolia Room',  'CSS Fundamentals',    new Date(0,0,0,12,0,0),  new Date(0,0,0,14,0,0) ],
      [ 'Magnolia Room',  'Intro JavaScript',    new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ],
      [ 'Magnolia Room',  'Advanced JavaScript', new Date(0,0,0,16,30,0), new Date(0,0,0,19,0,0) ],
      [ 'Gladiolus Room', 'Intermediate Perl',   new Date(0,0,0,12,30,0), new Date(0,0,0,14,0,0) ],
      [ 'Gladiolus Room', 'Advanced Perl',       new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ],
      [ 'Gladiolus Room', 'Applied Perl',        new Date(0,0,0,16,30,0), new Date(0,0,0,18,0,0) ],
      [ 'Petunia Room',   'Google Charts',       new Date(0,0,0,12,30,0), new Date(0,0,0,14,0,0) ],
      [ 'Petunia Room',   'Closure',             new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ],
      [ 'Petunia Room',   'App Engine',          new Date(0,0,0,16,30,0), new Date(0,0,0,18,30,0) ]]);

    var options = {
      timeline: { colorByRowLabel: true },
      backgroundColor: '#ffd'
    };

    chart.draw(dataTable, options);
  }
</script>

<div id="example5.3" style="height: 150px;"></div>

Em seguida, para definir a cor do plano de fundo como alternado ou não alternado pelo índice de linhas, use a opção alternatingRowStyle (ativa v51+):

<script src="https://www.gstatic.com/charts/loader.js"></script>

<script>
  google.charts.load("current", {packages:["timeline"]});
  google.charts.setOnLoadCallback(drawChart);
  function drawChart() {
    var container = document.getElementById('example5.4');
    var chart = new google.visualization.Timeline(container);
    var dataTable = new google.visualization.DataTable();
    dataTable.addColumn({ type: 'string', id: 'Room' });
    dataTable.addColumn({ type: 'string', id: 'Name' });
    dataTable.addColumn({ type: 'date', id: 'Start' });
    dataTable.addColumn({ type: 'date', id: 'End' });
    dataTable.addRows([
      [ 'Magnolia Room',  'CSS Fundamentals',    new Date(0,0,0,12,0,0),  new Date(0,0,0,14,0,0) ],
      [ 'Magnolia Room',  'Intro JavaScript',    new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ],
      [ 'Magnolia Room',  'Advanced JavaScript', new Date(0,0,0,16,30,0), new Date(0,0,0,19,0,0) ],
      [ 'Gladiolus Room', 'Intermediate Perl',   new Date(0,0,0,12,30,0), new Date(0,0,0,14,0,0) ],
      [ 'Gladiolus Room', 'Advanced Perl',       new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ],
      [ 'Gladiolus Room', 'Applied Perl',        new Date(0,0,0,16,30,0), new Date(0,0,0,18,0,0) ],
      [ 'Petunia Room',   'Google Charts',       new Date(0,0,0,12,30,0), new Date(0,0,0,14,0,0) ],
      [ 'Petunia Room',   'Closure',             new Date(0,0,0,14,30,0), new Date(0,0,0,16,0,0) ],
      [ 'Petunia Room',   'App Engine',          new Date(0,0,0,16,30,0), new Date(0,0,0,18,30,0) ]]);

    var options = {
      timeline: { colorByRowLabel: true },
      alternatingRowStyle: false
    };

    chart.draw(dataTable, options);
  }
</script>

<div id="example5.4" style="height: 150px;"></div>

Se você quiser controlar as cores de barras individuais, use a opção colors:

colors pega uma matriz de valores hexadecimais, que são aplicados às barras em ordem:

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<script type="text/javascript">
  google.charts.load("current", {packages:["timeline"]});
  google.charts.setOnLoadCallback(drawChart);
  function drawChart() {
    var container = document.getElementById('example5.5');
    var chart = new google.visualization.Timeline(container);
    var dataTable = new google.visualization.DataTable();
    dataTable.addColumn({ type: 'string', id: 'Role' });
    dataTable.addColumn({ type: 'string', id: 'Name' });
    dataTable.addColumn({ type: 'date', id: 'Start' });
    dataTable.addColumn({ type: 'date', id: 'End' });
    dataTable.addRows([
      [ 'President', 'George Washington', new Date(1789, 3, 30), new Date(1797, 2, 4) ],
      [ 'President', 'John Adams', new Date(1797, 2, 4), new Date(1801, 2, 4) ],
      [ 'President', 'Thomas Jefferson', new Date(1801, 2, 4), new Date(1809, 2, 4) ]]);

    var options = {
      colors: ['#cbb69d', '#603913', '#c69c6e'],
    };

    chart.draw(dataTable, options);
  }

</script>

<div id="example5.5" style="height: 150px;"></div>

Se o gráfico exigir mais cores do que o listado, ele se comportará como se singleColor estivesse definido como a primeira cor da lista. Isso vale para todos os gráficos do Google, não apenas para linhas do tempo.

Outra maneira de controlar as cores de barras individuais é usar uma coluna com o papel de estilo.

O código para adicionar e preencher uma coluna de estilo:

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<script type="text/javascript">
  google.charts.load("current", {packages:["timeline"]});
  google.charts.setOnLoadCallback(drawChart);
  function drawChart() {
    var container = document.getElementById('example5.6');
    var chart = new google.visualization.Timeline(container);
    var dataTable = new google.visualization.DataTable();
    dataTable.addColumn({ type: 'string', id: 'Role' });
    dataTable.addColumn({ type: 'string', id: 'Name' });
    dataTable.addColumn({ type: 'string', id: 'style', role: 'style' });
    dataTable.addColumn({ type: 'date', id: 'Start' });
    dataTable.addColumn({ type: 'date', id: 'End' });
    dataTable.addRows([
      [ 'President', 'George Washington', '#cbb69d', new Date(1789, 3, 30), new Date(1797, 2, 4)],
      [ 'President', 'John Adams', '#603913', new Date(1797, 2, 4), new Date(1801, 2, 4) ],
      [ 'President', 'Thomas Jefferson', '#c69c6e', new Date(1801, 2, 4), new Date(1809, 2, 4) ]]);

    chart.draw(dataTable);
  }

</script>

<div id="example5.6" style="height: 150px;"></div>

Mudar as fontes

É possível escolher a fonte e os rótulos para os rótulos de cada linha com rowLabelStyle e para os rótulos em cada barra com barLabelStyle. Ambas são demonstradas abaixo.

Observação: escolha fontes que os navegadores dos seus usuários possam renderizar.

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

<script type="text/javascript">
  google.charts.load("current", {packages:["timeline"]});
  google.charts.setOnLoadCallback(drawChart);
  function drawChart() {
    var container = document.getElementById('example6.1');
    var chart = new google.visualization.Timeline(container);
    var dataTable = new google.visualization.DataTable();
    dataTable.addColumn({ type: 'string', id: 'Role' });
    dataTable.addColumn({ type: 'string', id: 'Name' });
    dataTable.addColumn({ type: 'date', id: 'Start' });
    dataTable.addColumn({ type: 'date', id: 'End' });
    dataTable.addRows([
      [ 'Washington', 'George Washington', new Date(1789, 3, 30), new Date(1797, 2, 4) ],
      [ 'Adams', 'John Adams', new Date(1797, 2, 4), new Date(1801, 2, 4) ],
      [ 'Jefferson', 'Thomas Jefferson', new Date(1801, 2, 4), new Date(1809, 2, 4) ]]);

    var options = {
      colors: ['#cbb69d', '#603913', '#c69c6e'],
      timeline: { rowLabelStyle: {fontName: 'Helvetica', fontSize: 24, color: '#603913' },
                     barLabelStyle: { fontName: 'Garamond', fontSize: 14 } }
    };

    chart.draw(dataTable, options);
  }
</script>

<div id="example6.1" style="height: 200px;"></div>

Não é possível definir a cor do texto de barLabel.

Linhas de grade sobrepostas

Os gráficos do Google fazem pequenos ajustes nos endpoints da barra para evitar a omissão de linhas de grade do cronograma. Para evitar esse comportamento, defina a opção avoidOverlappingGridLines como false.

Para ilustrar o efeito, veja dois exemplos: o primeiro com uma linha de grade sobreposta e o segundo sem.

Veja o código que se sobrepõe às linhas de grade:

  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

  <script type="text/javascript">
    google.charts.load("current", {packages:["timeline"]});
    google.charts.setOnLoadCallback(drawChart);
    function drawChart() {
      var container = document.getElementById('example7.1');
      var chart = new google.visualization.Timeline(container);
      var dataTable = new google.visualization.DataTable();
      dataTable.addColumn({ type: 'string', id: 'Room' });
      dataTable.addColumn({ type: 'string', id: 'Name' });
      dataTable.addColumn({ type: 'date', id: 'Start' });
      dataTable.addColumn({ type: 'date', id: 'End' });
      dataTable.addRows([
        [ 'Magnolia Room', 'Google Charts', new Date(0,0,0,14,0,0), new Date(0,0,0,15,0,0)],
        [ 'Magnolia Room', 'App Engine',    new Date(0,0,0,15,0,0), new Date(0,0,0,16,0,0)]]);

      var options = {
        timeline: { showRowLabels: false },
        avoidOverlappingGridLines: false
      };

      chart.draw(dataTable, options);
    }

  </script>

  <div id="example7.1" style="height: 200px;"></div>

Como personalizar dicas de ferramentas

É possível personalizar o que os usuários veem ao passar o cursor sobre as barras de uma linha do tempo adicionando uma coluna de dicas em uma tabela de cinco colunas. Para fornecer dicas não padrão, todas as linhas da tabela de dados precisam ter todas as cinco colunas (rótulo da linha, rótulo da barra, dica, início e fim):

Passar o cursor sobre uma barra mostra uma dica com o texto definido na terceira coluna. Neste gráfico, precisamos definir a segunda coluna como valores fictícios (aqui, null) para que nossas dicas possam existir na terceira coluna.

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

      function drawChart() {
        var container = document.getElementById('timeline-tooltip');
        var chart = new google.visualization.Timeline(container);
        var dataTable = new google.visualization.DataTable();

        dataTable.addColumn({ type: 'string', id: 'President' });
        dataTable.addColumn({ type: 'string', id: 'dummy bar label' });
        dataTable.addColumn({ type: 'string', role: 'tooltip' });
        dataTable.addColumn({ type: 'date', id: 'Start' });
        dataTable.addColumn({ type: 'date', id: 'End' });
        dataTable.addRows([
          [ 'Washington', null, 'George', new Date(1789, 3, 29), new Date(1797, 2, 3) ],
          [ 'Adams', null, 'John', new Date(1797, 2, 3),  new Date(1801, 2, 3) ],
          [ 'Jefferson', null, 'Thomas', new Date(1801, 2, 3),  new Date(1809, 2, 3) ]]);

        chart.draw(dataTable);
      }
    </script>
  </head>
  <body>
    <div id="timeline-tooltip" style="height: 180px;"></div>
  </body>
</html>

Carregando

O nome do pacote google.charts.load é timeline: 

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

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

  var visualization = new google.visualization.Timeline(container);

Formato de dados

Linhas:cada linha da tabela representa uma barra da linha do tempo.

Columns:

  Coluna 0 Coluna 1 Coluna 2 Coluna 3 Coluna 4
Finalidade: Marcador da linha Rótulo da barra (opcional) Dica (opcional) Iniciar End
Tipo de dado: string string string número ou data número ou data
Papel: dados dados dica dados dados

 

Opções de configuração

Nome
Mudar o estilo da linha

Se o gráfico precisa alternar a cor do plano de fundo por índice de linha (ou seja, colorir a cor do plano de fundo de linhas indexadas de modo escuro) Se for falso, o plano de fundo do gráfico terá uma cor uniforme. Se for verdadeiro, o plano de fundo do gráfico vai alternar a tonalidade por índice de linha. (Observação: v51+ ativo)

Tipo: booleano
Padrão:verdadeiro
evitarOverlaypingGridLines

Se os elementos de exibição (por exemplo, as barras em uma linha do tempo) precisam ocultar linhas de grade. Se for falso, as linhas de grade poderão ser cobertas por elementos de exibição. Se for verdadeiro, os elementos de exibição poderão ser alterados para manter as linhas da grade visíveis.

Tipo: booleano
Padrão: verdadeiro
backgroundColor

A cor do plano de fundo da área principal do gráfico. Pode ser uma string de cor HTML simples, por exemplo: 'red' ou '#00cc00', ou um objeto com as seguintes propriedades.

Tipo:string ou objeto
Padrão: "branco"
Cores

As cores a serem usadas nos elementos do gráfico. Uma matriz de strings, em que cada elemento é uma string de cor HTML, por exemplo: colors:['red','#004411'].

Tipo:matriz de strings
Padrão:cores padrão
enableInteractivity

Se o gráfico gera eventos com base no usuário ou reage à interação do usuário. Se for falso, o gráfico não gerará "select" ou outros eventos baseados em interação (mas fará eventos prontos ou de erro) e não exibirá texto passando ou mudará de acordo com a entrada do usuário.

Tipo: booleano
Padrão: verdadeiro
Nome da fonte

A fonte padrão para todo o texto no gráfico. É possível modificar isso usando propriedades para elementos específicos do gráfico.

Tipo: string
Padrão: "Arial"
fontSize

O tamanho de fonte padrão, em pixels, de todo o texto do gráfico. É possível modificar isso usando propriedades para elementos específicos do gráfico.

Tipo: número
Padrão:automático
FrameIForce

Desenha o gráfico dentro de um frame inline. No IE8, essa opção é ignorada. Todos os gráficos do IE8 são desenhados em i-frames.

Tipo: booleano
Padrão:falso
altura

Altura do gráfico, em pixels.

Tipo:número
Padrão: altura do elemento em questão
cronograma.barLabelStyle

Um objeto que especifica o estilo de texto do rótulo da barra. Ele tem este formato:

{fontName: <string>, fontSize: <string>}

Veja também fontName e fontSize nesta tabela.

Tipo: objeto
Padrão: nulo
cronograma.colorByRowLabel

Se definido como verdadeiro, colore cada barra da linha da mesma forma. O padrão é usar uma cor por rótulo de barra.

Tipo: booleano
Padrão:falso
cronograma.GroupByRowLabel

Se definido como falso, cria uma linha para cada entrada dataTable. O padrão é coletar barras com o mesmo rótulo em uma linha.

Tipo: booleano
Padrão: verdadeiro
cronograma.rowLabelStyle

Um objeto que especifica o estilo de texto do rótulo da linha. Ele tem este formato:

{color: <string>, fontName: <string>, fontSize: <string>}

O color pode ser qualquer string de cor HTML. Por exemplo, 'red' ou '#00cc00'. Consulte também fontName e fontSize nesta tabela.

Tipo: objeto
Padrão:nulo
cronograma.mostrarBarRótulos

Se definido como false, o rótulo de barras é omitido. O padrão é mostrá-las.

Tipo: booleano
Padrão: verdadeiro
cronograma.showRowLabel

Se definido como false, o rótulo da linha será omitido. O padrão é mostrá-las.

Tipo: booleano
Padrão: verdadeiro
cronograma.Cor única

Colore todas as barras da mesma forma. Especificado como um valor hexadecimal (por exemplo, "#8d8").

Tipo: string
Padrão: nulo
tooltip.isHTML

Defina como false para usar dicas renderizadas por SVG (em vez de HTML). Consulte Como personalizar o conteúdo de dicas para mais detalhes.

Observação: a personalização do conteúdo da dica de HTML por meio do papel de dados da coluna de dica de ferramenta não é aceita pela visualização Gráfico de bolhas.

Tipo: booleano
Padrão: verdadeiro
tooltip.trigger

A interação do usuário que faz com que a dica seja exibida:

  • "focus": a dica será exibida quando o usuário passar o cursor sobre o elemento.
  • "none": a dica não será exibida.
Tipo: string
Padrão: "focus"
largura

Largura do gráfico, em pixels.

Tipo:número
Padrão:largura do elemento contido

Métodos

Método
draw(data, options)

Desenha o gráfico. O gráfico aceita mais chamadas de método somente após o evento ready ser acionado. Extended description

Tipo de retorno:nenhum
clearChart()

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

Tipo de retorno: nenhum
getSelection()

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

Tipo de retorno:matriz de elementos de seleção

Eventos

Nome
error

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

Propriedades: ID e mensagem
onmouseover

Disparado quando o usuário passa o mouse sobre uma entidade visual. Transmite os índices de linha e coluna do elemento da tabela de dados correspondente. Uma barra está correlacionada a uma célula na tabela de dados, uma entrada de legenda a uma coluna (o índice da linha é nulo) e uma categoria a uma linha (o índice da coluna é nulo).

Propriedades: linha, coluna
onmouseout

Disparado quando o usuário passa o mouse sobre uma entidade visual. Retorna os índices de linha e coluna do elemento da tabela de dados correspondente. Uma barra está correlacionada a uma célula na tabela de dados, uma entrada de legenda a uma coluna (o índice da linha é nulo) e uma categoria a uma linha (o índice da coluna é nulo).

Propriedades:linha, coluna
ready

O gráfico está pronto para chamadas de método externo. 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 acionado.

Propriedades:nenhuma
select

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

Propriedades:nenhuma

Política de dados

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