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: 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: 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 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 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 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 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:
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 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.
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 Properties:nenhuma
|
select |
Disparado quando o usuário clica em uma entidade visual. Para saber o que foi selecionado, chame
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.