Linha do tempo com notas

  1. Visão geral
  2. Exemplo
  3. Carregando
  4. Formato de dados
  5. Opções de configuração
  6. Métodos
  7. Eventos
  8. Política de dados
  9. Notes

Visão geral

Um gráfico de linhas de série temporal interativo com anotações opcionais.

Agora, a linha do tempo com anotações usa automaticamente Gráficos de anotação.

Exemplo

<html>
  <head>
    <script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
    <script type='text/javascript'>
      google.charts.load('current', {'packages':['annotatedtimeline']});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('date', 'Date');
        data.addColumn('number', 'Sold Pencils');
        data.addColumn('string', 'title1');
        data.addColumn('string', 'text1');
        data.addColumn('number', 'Sold Pens');
        data.addColumn('string', 'title2');
        data.addColumn('string', 'text2');
        data.addRows([
          [new Date(2008, 1 ,1), 30000, undefined, undefined, 40645, undefined, undefined],
          [new Date(2008, 1 ,2), 14045, undefined, undefined, 20374, undefined, undefined],
          [new Date(2008, 1 ,3), 55022, undefined, undefined, 50766, undefined, undefined],
          [new Date(2008, 1 ,4), 75284, undefined, undefined, 14334, 'Out of Stock','Ran out of stock on pens at 4pm'],
          [new Date(2008, 1 ,5), 41476, 'Bought Pens','Bought 200k pens', 66467, undefined, undefined],
          [new Date(2008, 1 ,6), 33322, undefined, undefined, 39463, undefined, undefined]
        ]);

        var chart = new google.visualization.AnnotatedTimeLine(document.getElementById('chart_div'));
        chart.draw(data, {displayAnnotations: true});
      }
    </script>
  </head>

  <body>
    // Note how you must specify the size of the container element explicitly!
    <div id='chart_div' style='width: 700px; height: 240px;'></div>
  </body>
</html>

Importante : para usar essa visualização, é necessário especificar a altura e a largura do elemento de contêiner explicitamente na página. Por exemplo: <div id="chart_div" style="width:400; height:250"></div>.

Carregando

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

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

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

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

Formato de dados

Você pode mostrar uma ou mais linhas no gráfico. Cada linha representa uma posição X no gráfico, ou seja, um horário específico. Cada linha é descrita por um conjunto de uma a três colunas.

  • A primeira coluna é do tipo date ou datetime e especifica o valor X do ponto no gráfico. Se essa coluna for do tipo date (e não datetime), a menor resolução de tempo no eixo X será de um dia.
  • Cada linha de dados é descrita por um conjunto de uma a três colunas extras, conforme descrito aqui:
    • Valor Y - [obrigatório, número] A primeira coluna em cada conjunto descreve o valor da linha no momento correspondente da primeira coluna. O rótulo da coluna é exibido no gráfico como o título da linha.
    • Título da anotação: [opcional, string] se uma coluna de string seguir a coluna de valor e a opção displayAnnotations for verdadeira, essa coluna terá um título curto que descreve esse ponto. Por exemplo, se essa linha representa a temperatura no Brasil e esse ponto é um número muito alto, o título pode ser "Dia mais quente registrado".
    • Texto de anotação: [string opcional] se houver uma segunda coluna de string para essa série, o valor da célula será usado como texto descritivo adicional para esse ponto. Defina a opção displayAnnotations como verdadeira para usar essa coluna. Você pode usar tags HTML se definir allowHtml como true. Basicamente, não há limite de tamanho, mas entradas excessivamente longas podem estourar a seção de exibição. Não é necessário ter essa coluna, mesmo que você tenha uma coluna de título de anotação para este ponto. O rótulo da coluna não é usado pelo gráfico. Por exemplo, se este foi o dia mais quente no ponto recorde, você pode dizer algo como "O dia mais próximo estava 10 graus mais frio!".

Opções de configuração

Nome Tipo Padrão Descrição
allowHtml boolean false Se definido como verdadeiro, qualquer texto de anotação que inclua tags HTML será renderizado como HTML.
allowRedraw boolean false

Ativa uma técnica de redesenho mais eficiente para a segunda e as próximas chamadas para draw() nessa visualização. Apenas a área do gráfico é redesenhada. Para usar essa opção, é necessário atender aos seguintes requisitos:

  • allowRedraw precisa ser verdadeiro
  • displayAnnotations precisa ser falso (ou seja, não é possível mostrar anotações)
  • é preciso transmitir os mesmos valores e opções (exceto para allowRedraw e displayAnnotations) da primeira chamada para draw().
allValuesSuffix string nenhum Um sufixo a ser adicionado a todos os valores nas escalas e na legenda.
annotationsWidth number 25 A largura (em porcentagem) da área de anotações em relação a toda a área do gráfico. Precisa ser um número no intervalo de 5 a 80.
cores Matriz de strings Cores padrão As cores a serem usadas para as linhas e rótulos do gráfico. Uma matriz de strings. Cada elemento é uma string em um formato de cor HTML válido. Por exemplo, "red" ou "#00cc00".
dateFormat string "MMMM dd, aaaa" ou "HH:mm MMMM dd, aaaa", dependendo do tipo da primeira coluna (data ou data/hora, respectivamente). O formato usado para exibir as informações de data no canto superior direito. O formato desse campo é o especificado pela classe SimpleDateFormat java.
displayAnnotations boolean false Se ela for definida como verdadeira, o gráfico mostrará anotações sobre os valores selecionados. Quando essa opção é definida como verdadeira, depois de cada coluna numérica, é possível adicionar duas colunas opcionais de string de anotação, uma para o título e outra para o texto da anotação.
displayAnnotationsFilter boolean false Se definido como verdadeiro, o gráfico exibirá um campo de filtro para filtrar as anotações. Use essa opção quando houver muitas anotações.
displayDateBarSeparator boolean verdadeiro Define se um separador de barra pequeno ( | ) será mostrado entre os valores da série e a data na legenda, em que "true" significa sim.
displayExactValues boolean false Indica se uma versão arredondada e reduzida dos valores na parte superior do gráfico será exibida para economizar espaço. "false" indica que sim. Por exemplo, se definido como falso, 56123, 45 poderá ser exibido como 56, 12 mil.
displayLegendDots boolean verdadeiro Define se os pontos serão exibidos ao lado dos valores no texto da legenda, em que "true" significa sim.
displayLegendValues boolean verdadeiro Define se os valores destacados serão exibidos na legenda, em que verdadeiro significa sim.
displayRangeSelector boolean verdadeiro

Indica se a área de seleção do intervalo de zoom será exibida (a área na parte de baixo do gráfico), em que "false" significa que não.

O contorno no seletor de zoom é uma versão em escala logarítmica da última série do gráfico, dimensionada para se ajustar à altura do seletor de zoom.
displayZoomButtons boolean verdadeiro Se os links de zoom serão mostrados ("1d 5d 1m" e assim por diante), em que "false" significa não.
fill number 0 Um número de 0 a 100 (inclusive) especificando o alfa do preenchimento abaixo de cada linha no gráfico de linhas. 100 significa preenchimento 100% opaco, 0 significa nenhum preenchimento. A cor de preenchimento é a mesma cor da linha acima dela.
highlightDot string "mais próximo"

Qual ponto da série a ser destacado e os valores correspondentes a serem exibidos na legenda. Selecione um destes valores:

  • "mais próximo" - os valores mais próximos do eixo X do mouse.
  • "last" - o próximo conjunto de valores à esquerda do mouse.
legendPosition string "sameRow" Define se a legenda colorida será colocada na mesma linha com os botões de zoom e a data ("sameRow") ou em uma nova linha ("newRow").
max number automático O valor máximo a ser exibido no eixo Y. Se o ponto de dados máximo exceder esse valor, essa configuração será ignorada, e o gráfico será ajustado para mostrar a próxima marca de seleção acima do ponto máximo. Isso terá precedência sobre o máximo do eixo Y determinado por scaleType.
min number automático O valor mínimo a ser exibido no eixo Y. Se o ponto mínimo de dados for menor que esse valor, essa configuração será ignorada, e o gráfico será ajustado para mostrar a próxima marca de seleção abaixo do ponto mínimo. Isso terá precedência sobre o mínimo do eixo Y determinado por scaleType.
numberFormats String ou um mapa de pares de número:string automático

Especifica os padrões de formato de número a serem usados para formatar os valores na parte superior do gráfico.

Os padrões precisam estar no formato especificado pela classe java DecimalFormat (link em inglês).

  • Se não for especificado, será usado o padrão de formato.
  • Se um único padrão de string for especificado, ele será usado para todos os valores.
  • Se um mapa for especificado, as chaves serão índices de séries (base zero) e os valores serão os padrões a serem usados para formatar a série especificada.
    Não é obrigatório incluir um formato para cada série no gráfico. Qualquer série não especificada usará o formato padrão.

Se essa opção for especificada, a opção displayExactValues será ignorada.
scaleColumns Matriz de números Automático

Especifica os valores que serão mostrados nas marcas de escala do eixo Y no gráfico. O padrão é ter uma única escala no lado direito, o que se aplica a ambas as séries. No entanto, lados diferentes do gráfico podem ser dimensionados para diferentes valores de série.

Essa opção usa uma matriz de zero a três números que especificam o índice (baseado em zero) da série a ser usado como o valor de escalonamento. O local em que esses valores são mostrados depende de quantos valores você inclui na matriz:

  • Se você especificar uma matriz vazia, o gráfico não mostrará os valores de Y ao lado das marcas de seleção.
  • Se você especificar um valor, a escala da série indicada será exibida somente no lado direito do gráfico.
  • Se você especificar dois valores, uma escala para a segunda série será adicionada à direita do gráfico.
  • Se você especificar três valores, uma escala para a terceira série será adicionada ao meio do gráfico.
  • Todos os valores após o terceiro na matriz serão ignorados.

Ao exibir mais de uma escala, é aconselhável definir a opção scaleType como "allFixed" ou "allmaximized".

scaleType string "fixo"

Define os valores máximo e mínimo mostrados no eixo Y. As seguintes opções estão disponíveis:

  • "maximizado": o eixo Y abrangerá do mínimo aos valores máximos da série. Se você tiver mais de uma série, use allmaximized.
  • "fixo" [padrão]: o eixo Y varia, dependendo dos valores dos dados:
    • Se todos os valores forem >=0, o eixo Y abrangerá de zero até o valor máximo dos dados.
    • Se todos os valores forem <=0, o eixo Y abrangerá de zero até o valor mínimo de dados.
    • Se os valores forem positivos e negativos, o eixo Y variará do máximo da série para o mínimo da série.

      Para várias séries, use "allFixed".
  • "allmaximized": igual a "maximized", mas usado quando várias escalas são exibidas. Os dois gráficos serão maximizados na mesma escala, o que significa que um deles será deturpado em relação ao eixo Y, mas o valor real de cada série será exibido ao passar o cursor sobre cada série.
  • "allfixo": o mesmo que "fixo", mas usado quando várias escalas são exibidas. Essa configuração ajusta cada escala à série a que ela se aplica. Use com scaleColumns.

Se você especificar as opções mínima e/ou máxima, elas terão precedência sobre os valores mínimo e máximo determinados pelo seu tipo de escala.
espessura number 0 Um número de 0 a 10 (inclusive) especificando a espessura das linhas, em que 0 é a mais fina.
Wmode string "janela" O parâmetro Modo de janela (wmode) para o gráfico em Flash. Os valores disponíveis são: "opaque", "window" ou "transparent".
zoomEndTime Data nenhum Define a data/hora de término do intervalo de zoom selecionado.
zoomStartTime Data nenhum Define a data/hora de início do intervalo de zoom selecionado.

Métodos

Método Tipo de retorno Descrição
draw(data, options) nenhum Desenha o gráfico. É possível acelerar o tempo de resposta para a segunda chamada e para as chamadas posteriores a draw() usando a propriedade allowRedraw.
getSelection() Matriz de elementos de seleção Implementação padrão de getSelection(). Os elementos selecionados são elementos de célula. Apenas uma célula pode ser selecionada por vez pelo usuário.
getVisibleChartRange() Objeto com as propriedades start e end. Retorna um objeto com as propriedades start e end, sendo que cada uma delas é um objeto Date, representando a seleção de tempo atual.
hideDataColumns(columnIndexes) nenhum Oculta as séries de dados especificadas do gráfico. Aceita um parâmetro, que pode ser um número ou uma matriz de números, em que 0 se refere à primeira série de dados e assim por diante.
setVisibleChartRange(start, end) nenhum Define o intervalo visível (zoom) para o intervalo especificado. Aceita dois parâmetros do tipo Date que representam o primeiro e o último horário do intervalo visível selecionado. Defina start como nulo para incluir tudo desde a data mais antiga até o end. Defina end como nulo para incluir tudo desde start até a última data.
showDataColumns(columnIndexes) nenhum Mostra as séries de dados especificadas no gráfico, depois de ocultadas usando o método hideDataColumns. Aceita um parâmetro, que pode ser um número ou uma matriz de números, em que 0 se refere à primeira série de dados e assim por diante.

Eventos

Nome Descrição Propriedades
mudança de intervalo Intervalo de zoom alterado. Disparado depois que o usuário modificou o intervalo de tempo visível, mas não após uma chamada para o método setVisibleChartRange.
Observação: é recomendável não usar as propriedades do evento, mas recebê-las chamando o método getVisibleChartRange.
  • start: data. O horário de início do intervalo de zoom.
  • end: data. O horário de término do intervalo de zoom.
pronto 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 acionado. Nenhum
select Quando o usuário clica em uma sinalização de anotação (marcador), a célula correspondente na tabela de dados é selecionada. Em seguida, a visualização aciona esse evento. Nenhum

Observação: devido a certas limitações, os eventos poderão não ser gerados se você acessar a página no navegador como um arquivo (por exemplo, "file://") e não de um servidor (por exemplo, "http://www").

Política de dados

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

Observações:

Por causa das configurações de segurança do Flash, essa e todas as visualizações baseadas em Flash podem não funcionar corretamente quando acessadas de um local de arquivo no navegador (por exemplo, file:///c:/webhost/myhost/myviz.html), em vez de um URL de servidor da Web (por exemplo, http://www.myhost.com/myviz.html). Normalmente, isso é apenas um problema de teste. É possível resolver esse problema conforme descrito no site da Macromedia.