Cronograma 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. Observações

Visão geral

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

A linha do tempo com a anotação agora usa automaticamente os 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 sua 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 exibir uma ou mais linhas no gráfico. Cada linha representa uma posição X no gráfico, ou seja, um horário específico, e cada linha é descrita por um conjunto de uma a três colunas.

  • A primeira coluna é do tipo date ou datetime e especifica o valor de X do ponto no gráfico. Se essa coluna for do tipo date, e não datetime, a menor resolução no eixo X será de um dia.
  • Cada linha de dados é descrita por um conjunto de uma a três colunas adicionais, conforme descrito aqui:
    • Y value - [obrigatório, número] a primeira coluna em cada conjunto descreve o valor da linha no momento correspondente a partir da primeira coluna. O rótulo da coluna é exibido no gráfico como o título dessa linha.
    • Annotation title - [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 "O melhor dia registrado".
    • Texto da anotação: [string opcional] se existir 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. Não há essencialmente um limite de tamanho, mas entradas excessivamente longas podem transbordar na 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 do ponto de registro, você pode dizer algo como "O dia seguinte mais próximo foi 10 graus mais frios".

Opções de configuração

Nome Tipo Padrão Descrição
permitirHTML 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 última chamada para draw() nessa visualização. Ela só redesenha a área do gráfico. Para usar essa opção, é necessário atender aos seguintes requisitos:

  • allowRedraw precisa ser verdadeiro
  • displayAnnotations precisa ser falsa (ou seja, não é possível mostrar anotações)
  • É necessário transmitir as mesmas opções e valores (exceto para allowRedraw e displayAnnotations) que na primeira chamada para draw().
allValuesSuffix string nenhum Um sufixo a ser adicionado a todos os valores na balança e na legenda.
Largura das anotações number 25 A largura (em porcentagem) da área das anotações em 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 nas 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, "vermelho" ou "#00cc00".
Formato da data string "MMMM dd, yyyy" ou "HH:mm MMMM dd, yyyy", dependendo do tipo da primeira coluna (data ou data e hora, respectivamente). O formato usado para exibir as informações de data no canto superior direito. O formato desse campo é conforme especificado pela classe Java SimpleDateFormat.
displayAnnotations boolean false Se definido como verdadeiro, o gráfico mostrará anotações sobre os valores selecionados. Quando essa opção é definida como verdadeira, depois de cada coluna numérica, duas colunas opcionais de string de anotação podem ser adicionadas, uma para o título da anotação e outra para o texto da anotação.
Filtro de anotações boolean false Se definido como verdadeiro, o gráfico exibirá uma sequência de filtros para filtrar as anotações. Use essa opção quando houver muitas anotações.
displayDateBarSeparator boolean verdadeiro Indica se um pequeno separador de barra ( | ) será exibido entre os valores de série e a data na legenda, em que verdadeiro significa sim.
Valores de exibição exata boolean false Indica se uma versão arredondada dos valores é exibida na parte de cima do gráfico para economizar espaço. Já "false" indica que isso pode ser feito.Por exemplo, se ela for definida como "false" (falsa), 56.12 mil será exibida.
Pontos de exibição de display boolean verdadeiro Indica se os pontos serão exibidos ao lado dos valores no texto da legenda, em que verdadeiro significa sim.
Valores de exibição boolean verdadeiro Indica se os valores destacados são mostrados na legenda, em que verdadeiro significa sim.
Intervalo de exibição boolean verdadeiro

Mostra ou não a área de seleção do intervalo de zoom (a área na parte inferior do gráfico), em que false significa não.

O contorno no seletor de zoom é uma versão em escala de registro da última série no gráfico, dimensionada para se ajustar à altura do seletor de zoom.
Botões de exibiçãodeZoom boolean verdadeiro Indica se os links de zoom serão exibidos ("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 é igual à da linha acima dela.
destaqueDot string "mais próximo"

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

  • "mais próximo": os valores mais próximos ao eixo X ao mouse.
  • "last": o próximo conjunto de valores à esquerda do mouse.
legenda string "sameRow" Define se você quer colocar a legenda colorida 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ção principal acima do ponto de dados máximo. Isso terá precedência sobre o eixo Y máximo determinado por scaleType.
min number automático O valor mínimo a ser exibido no eixo Y. Se o ponto de dados mínimo for menor que esse valor, essa configuração vai ser ignorada, e o gráfico vai ser ajustado para mostrar a próxima marca principal abaixo do ponto de dados mínimo. Ele terá precedência sobre o mínimo do eixo Y determinado por scaleType.
Formatos de número 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 javaFormat decimal.

  • Se não for especificado, o padrão de formato será usado.
  • 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érie (baseados em zero), e os valores serão os padrões a serem usados para formatar a série especificada.
    Não é necessário incluir o formato de todas as séries do gráfico. As séries não especificadas usarão o formato padrão.

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

Especifica quais valores serão mostrados nas marcações do eixo Y no gráfico. O padrão é ter uma única escala no lado direito, que se aplica a ambas as séries, mas é possível ter diferentes lados do gráfico dimensionados para diferentes valores de série.

Essa opção usa uma matriz de zero a três números para especificar o índice (baseado em zero) da série a ser usada como o valor de escala. 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á valores Y ao lado das marcas de escala.
  • 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, será adicionada uma escala para a terceira série no meio do gráfico.
  • Qualquer valor após o terceiro na matriz será ignorado.

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

Tipo de escala string "corrigido"

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á os valores mínimos e 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 valores de dados:
    • Se todos os valores forem maiores que 0, o eixo Y vai de zero a esse valor máximo.
    • Se todos os valores forem <=0, o eixo Y vai de zero ao valor mínimo de dados.
    • Se os valores forem positivos e negativos, o eixo Y vai variar da série máxima ao mínimo da série.

      Para várias séries, use "allfix".
  • "allmaximized": o mesmo que "maximized", mas usado quando várias escalas são exibidas. Ambos os gráficos serão maximizados dentro da mesma escala, o que significa que um número será deturpado em relação ao eixo Y, mas ao passar o cursor sobre cada série, ele exibirá o valor real.
  • "allFixed" – o mesmo que "Fixo", mas é usado quando várias escalas são mostradas. Essa configuração ajusta cada escala à série a que 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 tipo de escala.
espessura number 0 Um número de 0 a 10 (inclusive) especificando a espessura das linhas, em que 0 é o mais fino.
Wmode string "window" O parâmetro modo de janela (wmode) para o gráfico em Flash. Os valores disponíveis são: "opaco", "janela" ou "transparente".
Horário de término do zoom Data nenhum Define a data/hora de término do intervalo de zoom selecionado.
Horário de início do zoom 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 e última chamada para 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élulas. Somente uma célula pode ser selecionada por vez pelo usuário.
getVisibleChartRange() Objeto com 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 atual.
hideDataColumns(columnIndexes) nenhum Oculta a série de dados especificada 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 a primeira e a última vez do intervalo visível selecionado. Defina start como nulo para incluir tudo da data mais antiga até end e end como nulo para incluir tudo desde start até a última data.
showDataColumns(columnIndexes) nenhum Mostra as séries de dados especificadas do gráfico, depois que elas foram 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 período visível, mas não após uma chamada para o método setVisibleChartRange.
Observação: não é recomendável usar as propriedades de evento, mas sim chamá-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étodo externo. Se você quiser interagir com o gráfico e chamar métodos depois de desenhá-lo, configure um listener para esse evento antes de chamar o método draw e chame-o somente depois que o evento for acionado. Nenhuma
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 dispara esse evento. Nenhuma

Observação: devido a certas limitações, os eventos podem não ser gerados se você estiver acessando a página do navegador como um arquivo. Por exemplo, "file://") em vez 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:

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