Cronogramas

  1. Visão geral
  2. Um exemplo simples
  3. Como rotular as barras
  4. Um exemplo avançado
  5. Como colocar barras em uma linha
  6. Como mudar as fontes
  7. Controle das cores
  8. Linhas de grade sobrepostas
  9. 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ê está gerenciando um projeto de software e quer ilustrar quem está fazendo o que e quando, ou se está organizando uma conferência e precisa agendar salas de reunião, um cronograma costuma ser uma opção de visualização razoável. Um tipo conhecido de linha do tempo é o diagrama de Gantt.

Observação: em objetos JavaScript Date, os meses são indexados a partir de zero e vão até onze, sendo janeiro o mês 0 e dezembro o mês 11. Se a linha do tempo parece estar desatualizada em um mês, provavelmente esse é o motivo. Para mais informações, consulte a página Datas e horas.

Um exemplo simples

Digamos que você queira representar um gráfico de quando os presidentes americanos serviram os mandatos. Aqui, os "recursos" são os presidentes, e podemos traçar o mandato de cada presidente como uma barra:

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 um google.visualization.Timeline() e preenche um 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. Elas têm o tipo Date JavaScript, mas também podem ser números simples.

Por fim, invocamos o método draw() do gráfico, que o exibe dentro de um 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 do Google são personalizáveis. Nos exemplos a seguir, mostraremos algumas maneiras comuns de personalizar a aparência de suas linhas do tempo.

Como rotular as barras

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

Neste código, inserimos uma nova coluna em nossos dados para conter os rótulos das barras: o nome completo de cada presidente. Quando há quatro colunas em uma dataTable da linha do tempo, a primeira é interpretada como o rótulo da linha, a segunda como o rótulo da barra e a terceira e a quarta como o início e o 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, então vamos removê-los com a opção showRowLabels da 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>

Um exemplo avançado

Para tornar nossa 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.

Nas linhas do tempo, um recurso terá a mesma cor mesmo quando aparecer em várias linhas. Portanto, no gráfico a seguir, cada pessoa é representada com uma cor consistente.

Alguns secretários de estado atenderam 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 podem passar o cursor sobre a barra para receber informações de dicas.

A linha do tempo organizará as linhas (presidente sobre o vice-presidente em cima do secretário de Estado) porque essa é a ordem em que elas aparecem no código abaixo. No entanto, o layout das barras é determinado exclusivamente pelos horários de início e término. Portanto, a troca de dois secretários de estado ou dois presidentes na dataTable não afeta o 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>

Como colocar barras em uma linha

Ao contrário dos papas, só pode haver um presidente dos EUA por vez. Portanto, se rotularmos todas as nossas linhas como "President", 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 Google Charts escolhe cores otimizadas para fins estéticos e de leitura, incluindo usuários com deficiência visual. É possível 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 da mesma forma. Essa pode ser uma boa escolha quando há lacunas entre as barras.

O padrão de colorByRowLabel é false. Nesse caso, substituímos esse valor 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, independente da linha em que estejam, use a opção singleColor:

No código abaixo, singleColor é definido como um valor hexadecimal para colorir todas as barras de 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, ele é pareado com colorByRowLabel para mostrar faixas em uma conferê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 de fundo como alternada ou não alternada pelo índice de linha, 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 usa uma matriz de valores hexadecimais, que são aplicados às barras nesta 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 é válido para todos os gráficos do Google, não apenas para os cronogramas.

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

O código a ser adicionado e preenchido em 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>

Alterar as fontes

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

Observação: escolha as famílias tipográficas que os navegadores dos usuários poderão 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 do barLabel.

Linhas de grade sobrepostas

Os Gráficos Google fazem pequenos ajustes nos endpoints das barras para evitar observar as linhas de grade da linha do tempo. Para evitar esse comportamento, defina a opção avoidOverlappingGridLines como false.

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

Veja o código que sobrepõe as 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>

Personalizar dicas

É possível personalizar o que os usuários veem quando passam o cursor sobre as barras de uma linha do tempo adicionando uma coluna de dica em uma tabela de dados de cinco colunas. Para fornecer dicas não padrão, cada linha da tabela de dados precisa 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 na tabela representa uma barra de linha do tempo.

Columns:

  Coluna 0 Coluna 1 Coluna 2 Coluna 3 Coluna 4
Finalidade: Marcador da linha Marcador da barra (opcional) Dica (opcional) Início Fim
Tipo de dados: string string string número ou data número ou data
Role: dados dados dica dados dados

 

Opções de configuração

Nome
alternatingRowStyle

Define se a cor do plano de fundo do gráfico precisa alternar a cor do plano de fundo de acordo com o índice da linha (ou seja, tonalizar a cor do plano de fundo das linhas indexadas uniformes em um tom mais escuro). Se for falso, o plano de fundo do gráfico terá uma cor uniforme. Se verdadeiro, o plano de fundo do gráfico alterna a tonalidade de acordo com o índice da linha. (Observação: versão 51+ ativa)

Tipo: booleano
Padrão:true
avoidOverlappingGridLines

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

Tipo: booleano
Padrão:true
backgroundColor

A cor de 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 propriedades a seguir.

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

As cores a serem usadas para os 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 vai gerar "select" ou outros eventos baseados em interação (mas vai gerar eventos prontos ou de erro) e não vai mostrar texto de passar o cursor nem mudar de acordo com a entrada do usuário.

Tipo: booleano
Padrão:true
fontName

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

Tipo: string
Padrão: "Arial"
fontSize

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

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

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:false
height

Altura do gráfico, em pixels.

Tipo: número
Padrão:altura do elemento contêiner
timeline.barLabelStyle

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

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

Consulte também fontName e fontSize nesta tabela.

Tipo: objeto
Padrão:nulo
timeline.colorByRowLabel

Se definido como verdadeiro, colore todas as barras da linha da mesma forma. O padrão é usar uma cor por marcador de barra.

Tipo: booleano
Padrão:false
timeline.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:true
timeline.rowLabelStyle

Um objeto que especifica o estilo do texto do marcador da linha. Ele tem este formato:

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

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

Tipo: objeto
Padrão:nulo
timeline.showBarLabels

Se definido como falso, omite os rótulos das barras. O padrão é mostrá-los.

Tipo: booleano
Padrão:true
timeline.showRowLabels

Se definido como falso, omite os rótulos das linhas. O padrão é mostrá-los.

Tipo: booleano
Padrão:true
timeline.singleColor

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 em SVG (em vez de renderizadas por HTML). Consulte Como personalizar o conteúdo da dica para mais detalhes.

Observação:a personalização do conteúdo da dica HTML pelo papel de dados da coluna de dicas não é compatível com a visualização do gráfico de bolhas.

Tipo: booleano
Padrão:true
tooltip.trigger

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

  • "focus": a dica é mostrada quando o usuário passa o cursor sobre o elemento.
  • "nenhum" - a dica de ferramenta não será exibida.
Tipo: string
Padrão: "focus"
width

Largura do gráfico, em pixels.

Tipo: número
Padrão:largura do elemento que o contém

Métodos

Método
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
clearChart()

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

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

Eventos

Nome
error

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

Properties:ID, message
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 se correlaciona com uma célula na tabela de dados, uma entrada de legenda para uma coluna (o índice de linha é nulo) e uma categoria a uma linha (o índice da coluna é nulo).

Propriedades: linha, coluna
onmouseout

Disparado quando o usuário afasta o mouse de uma entidade visual. Transmite os índices de linha e coluna do elemento da tabela de dados correspondente. Uma barra se correlaciona com uma célula na tabela de dados, uma entrada de legenda para uma coluna (o índice de 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é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.