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