Gráficos Google-O-Meter

   Googleômetro com as cores do arco-íris

Neste documento, descrevemos como criar um gráfico de tipo de mostrador chamado gráfico do Googleômetro.

Sumário

Visão geral

O Googleômetro é um medidor que aponta para um único valor em um intervalo. O intervalo possui uma gradação de cor que você tem a opção de configurar. Você também pode especificar um texto personalizado acima do ponteiro. O intervalo do indicador vai do valor mínimo ao valor máximo do formato de dados. Especifique um valor de dados no parâmetro chd para que a seta aponte.

Você pode especificar várias setas no mesmo gráfico e estilizar o corpo delas e o tamanho do ponto de maneira diferente em cada um deles. Para usar o mesmo estilo em todos os ponteiros, especifique os pontos de dados como valores da mesma série. Para aplicar estilos diferentes a cada seta, agrupe todas as setas com o mesmo estilo na mesma série.

Especifique um gráfico Googleômetro com a seguinte sintaxe:

Sintaxe

cht=gom

 

Exemplos

Descrição Exemplo

Isso demonstra o uso do chxl para especificar rótulos personalizados abaixo e acima do mostrador.

Linha única em um gráfico com sombreamento em azul da base do gráfico até a linha
chxt=x,y
chxl=0:|Groovy|1:|slow|faster|crazy

Você pode especificar diversos ponteiros com vários pontos de dados.
chd=t:20,40,60
chdl=1|2|3

Para aplicar um estilo às setas, use o parâmetro chls. Cada descrição de chls se aplica a todas as setas na série de dados correspondente.

O chls tem uma sintaxe avançada para os Googleômetros. Cada conjunto de valores dentro de um conjunto de barras verticais descreve a série de dados correspondente. Também é possível adicionar um conjunto de valores delimitados por barras verticais que descrevem o tamanho da ponta da seta em pontos, de 0 a 15. O padrão é 15.

Vamos analisar o valor chls neste gráfico: chls=3|3,5,5|15|10

  • 3: um único valor especifica a espessura da linha. Isso se aplica a todas as setas da primeira série.
  • 3,5,5: a segunda série tem descrições de espessura, comprimento de traço e espaço.
  • 15: tamanho da ponta das setas da primeira série.
  • 10: tamanho da ponta da seta da segunda série.

 


chd=t:20,40|60
chls=3|3,5,5|15|10

 

Cores da série chco

Você pode especificar as cores do mostrador usando o parâmetro chco. Se não especificar, será usado um gradiente padrão.

Sintaxe

chco=<color_1>,...,<color_n>
<color>
Especifique duas ou mais cores em formato hexadecimal RRGGBB. As cores são aplicadas em um gradiente da esquerda para a direita, com a primeira cor à esquerda e a última à direita.
Descrição Exemplo
Este gráfico mostra um gradiente simples, de branco (FFFFFF) a preto (000000) Googleômetro com as cores do arco-íris
chco=FFFFFF,000000
Este gráfico mostra as diversas cores atribuídas para o mostrador. Googleômetro com as cores do arco-íris
chco=FF0000,FF8040,FFFF00,
00FF00,00FFFF,
0000FF,800080

Voltar ao início

Rótulos do Googleômetro chl

Você tem a opção de especificar um rótulo personalizado para ser exibido acima da seta.

Observação sobre valores de string: somente caracteres seguros para URL são permitidos em strings de rótulo. Por segurança, codifique para URL todas as strings que contenham caracteres que não estejam no conjunto de caracteres 0-9a-zA-Z. Encontre um codificador de URL aqui.

Sintaxe

chl=<label>
<rótulo>
Texto do rótulo.

 

Exemplo

Descrição Exemplo
Este é um exemplo de Googleômetro com rótulo.

Googleômetro com as cores padrão, de vermelho para verde
chl=Nearly+There

Voltar ao início

Recursos padrão

Os demais recursos nesta página são recursos de gráficos padrão.

Formato de cor

Especifique cores usando uma string de seis caracteres de valores hexadecimais, além de dois valores de transparência opcionais, no formato RRGGBB[AA]. Exemplo:

  • FF0000 = vermelho
  • 00FF00 = verde
  • 0000FF = azul
  • 000000 = preto
  • FFFFFF = Branco

AA é um valor de transparência opcional, em que 00 é completamente transparente e FF é completamente opaco. Exemplo:

  • 0000FFFF = azul contínuo
  • 0000FF66 = Azul transparente

Voltar ao início

Título do gráfico chtt, chts [todos os gráficos]

É possível especificar o texto, a cor e o tamanho da fonte do título de um gráfico.

Sintaxe

chtt=<chart_title>
chts=<color>,<font_size>,<opt_alignment>

 

chtt: especifica o título do gráfico.

<chart_title>
Título a ser exibido no gráfico. Não é possível especificar onde ele aparece, mas você pode especificar o tamanho e a cor da fonte. Use um sinal de + para indicar espaços e uma barra vertical ( | ) para indicar quebras de linha.

 

chts [opcional]: cores e tamanho da fonte do parâmetro chtt.

<color>
A cor do título, no formato hexadecimal RRGGBB. A cor padrão é preto.
<font_size>
Tamanho da fonte do título, em pontos.
<opt_alignment>
[Opcional] Alinhamento do título. Escolha um dos seguintes valores de string, diferenciando maiúsculas de minúsculas: "l" (à esquerda), "c" (centrado) e "r" (à direita). O padrão é "c".

 

Exemplos

Descrição Exemplo

Gráfico com título, que usa a cor e o tamanho da fonte padrão.

Especifique um espaço com um sinal de adição (+).

Use uma barra vertical (|) para forçar uma quebra de linha.

chts não está especificado aqui.

Gráfico de barras verticais com título
chtt=Site+visitors+by+month|
January+to+July

Um gráfico com um título azul de 20 pontos alinhado à direita.

Gráfico de barras verticais com título em azul e tamanho de 20 pixels
chtt=Site+visitors
chts=FF0000,20,r

Voltar ao início

Texto e estilo da legenda do gráfico chdl, chdlp, chdls [Todos os gráficos]

A legenda é uma seção lateral do gráfico que fornece uma pequena descrição de texto de cada série. É possível especificar o texto associado a cada série nessa legenda e especificar em que parte do gráfico ela deve aparecer.

Consulte também chma, para saber como definir as margens ao redor da legenda.

Uma observação sobre os valores de string: somente caracteres seguros para URL são permitidos em strings de rótulo. Por segurança, codifique para URL todas as strings que contenham caracteres que não estejam no conjunto de caracteres 0-9a-zA-Z. Você encontra um codificador de URL na documentação de visualização do Google.

Sintaxe

chdl=<data_series_1_label>|...|<data_series_n_label>
chdlp=<opt_position>|<opt_label_order>
chdls=<color>,<size>

 

chdl: o texto de cada série a ser exibido na legenda.

<data_series_label>
O texto das entradas de legenda. Cada rótulo se aplica à série correspondente na matriz chd. Use um sinal de + em um espaço. Se você não especificar esse parâmetro, o gráfico não receberá uma legenda. Não há como especificar uma quebra de linha em um rótulo. A legenda normalmente se expandirá para conter o texto dela, e a área do gráfico será reduzida para acomodar a legenda.

chdlp : [opcional] a posição da legenda e a ordem das entradas da legenda. É possível especificar <position> e/ou <label_order>. Se você especificar ambos, separe-os com um caractere de barra. Adicione um "s" a qualquer valor se quiser que as entradas de legenda vazias em chdl sejam ignoradas na legenda. Exemplos: chdlp=bv, chdlp=r, chdlp=bv|r e chdlp=bvs|r.

<opt_position>
[Opcional] Especifica a posição da legenda no gráfico. Para especificar mais padding entre a legenda e a área do gráfico ou a borda da imagem, use o parâmetro chma. Escolha um dos seguintes valores:
  • b: legenda na parte inferior do gráfico, entradas de legenda em uma linha horizontal.
  • bv: legenda na parte inferior do gráfico, entradas de legenda em uma coluna vertical.
  • t: legenda na parte superior do gráfico, entradas de legenda em uma linha horizontal.
  • tv: legenda na parte superior do gráfico, entradas de legenda em uma coluna vertical.
  • r - [Padrão] Legenda à direita do gráfico, entradas de legenda em uma coluna vertical.
  • l: legenda à esquerda do gráfico, entradas de legenda em uma coluna vertical.
<opt_label_order>
[Opcional] A ordem em que os rótulos são mostrados na legenda. Escolha uma destas opções:
  • l - [Padrão para legendas verticais] Exibe os rótulos na ordem informada para chdl.
  • r: mostra os rótulos na ordem inversa, conforme informado ao chdl. Isso é útil em gráficos de barras empilhadas para mostrar a legenda
    na mesma ordem em que as barras aparecem.
  • a - [Padrão para legendas horizontais] Ordem automática: basicamente, significa classificar por comprimento, o mais curto primeiro, conforme medido em blocos de 10 pixels. Quando dois elementos tiverem o mesmo comprimento (divididos em blocos de 10 pixels), o que estiver listado primeiro aparecerá primeiro.
  • 0,1,2...: ordem de rótulos personalizada. Trata-se de uma lista de índices de rótulos baseados em zero de chdl, separados por vírgulas.

chdls: [opcional] especifica a cor e o tamanho da fonte do texto da legenda.

<color>
A cor do texto da legenda, no formato hexadecimal RRGGBB.
<size>
O tamanho do ponto do texto da legenda.

 

Exemplos

Descrição Exemplo

Dois exemplos de legendas. Especifique o texto da legenda na mesma ordem da série de dados.

Gráfico de linhas em vermelho, azul e verde, com as respectivas legendas

chdl=NASDAQ|FTSE100|DOW
chco=FF0000,00FF00,0000FF

Diagrama de Venn com dois círculos menores contidos em um círculo maior


chdl=First|Second|Third
chco=ff0000,00ff00,0000ff

O primeiro gráfico demonstra entradas de legenda horizontais (chdlp=t, o layout padrão é horizontal) e o segundo demonstra entradas de legenda verticais na parte inferior (chdlp=bv).

Diagrama de Venn com dois círculos menores contidos em um círculo maior
chdl=First|Second|Third
chco=ff0000,00ff00,0000ff
chdlp=t


Diagrama de Venn com dois círculos menores contidos em um círculo maior
chdl=First|Second|Third
chco=ff0000,00ff00,0000ff
chdlp=bv

Este exemplo demonstra a alteração do tamanho da fonte.

Diagrama de Venn com dois círculos menores contidos em um círculo maior
chdls=0000CC,14

Voltar ao início

Margens do gráfico chma [todos os gráficos]

Você pode especificar o tamanho das margens do gráfico, em pixels. As margens são calculadas a partir do tamanho de gráfico especificado (chs). Aumentar o tamanho da margem não aumenta o tamanho total do gráfico, mas reduz a área do gráfico, se necessário.

As margens são, por padrão, o espaço que sobra depois que o tamanho do gráfico é calculado. Seu valor padrão varia de acordo com o tipo de gráfico. As margens especificadas são um valor mínimo. Se a área do gráfico deixar espaço para margens, o tamanho delas será o que sobrar. Não é possível comprimir as margens menores do que o necessário para legendas e rótulos. Veja um diagrama que mostra as partes básicas de um gráfico:

Margem do gráfico, área da legenda e área do gráfico

As margens do gráfico incluem os rótulos do eixo e a área da legenda. A área da legenda é redimensionada automaticamente para se ajustar ao texto exatamente, a menos que você especifique uma largura maior usando chma. Nesse caso, ela aumentará o tamanho da margem, reduzindo a área do gráfico. Não é possível cortar uma legenda especificando um tamanho muito pequeno, mas você pode fazer com que ela ocupe mais espaço do que o necessário.

Dica: em um gráfico de barras, se as barras tiverem um tamanho fixo (o padrão), a largura da área do gráfico não poderá ser reduzida. Especifique um tamanho de barra menor ou redimensionável usando chbh.

 

Sintaxe

chma=
  <left_margin>,<right_margin>,<top_margin>,<bottom_margin>|<opt_legend_width>,<opt_legend_height>
<left_margin>, <right_margin>, <top_margin>, <bottom_margin>.
Tamanho mínimo da margem ao redor da área do gráfico, em pixels. Aumente esse valor e inclua padding para evitar que os rótulos dos eixos encostem nas bordas do gráfico.
<opt_legend_width>, <opt_legend_height>
[Opcional] Largura da margem ao redor da legenda, em pixels. Use isso para evitar que a legenda encoste na área do gráfico ou nas bordas da imagem.

 

Exemplos

Descrição Exemplo

Neste exemplo, o gráfico tem uma margem mínima de 30 pixels em cada lado. Como a legenda do gráfico tem mais de 30 pixels de largura, a margem no lado direito é definida como a largura da legenda do gráfico e é diferente das outras margens.

Os rótulos dos eixos estão fora da área do gráfico e, portanto, são desenhados no espaço da margem.

Gráfico de linhas com plano de fundo em cinza e margens dos dois lados.
chma=30,30,30,30

Para adicionar uma margem ao redor da legenda, defina um valor para os parâmetros <opt_legend_width> e <opt_legend_height>.

Neste exemplo, a legenda tem largura de aproximadamente 60 pixels. Se você definir <opt_legend_width> como 80 pixels, a margem se estenderá por 20 pixels fora da legenda.

Gráfico de linhas com plano de fundo em cinza e margens dos dois lados.
chma=20,20,20,30|80,20

Voltar ao início

Estilos e rótulos de eixos [linha, barra, Googleômetro, radar, dispersão]

É possível especificar quais eixos serão exibidos no gráfico e atribuir rótulos, posições, intervalos e estilos personalizados a eles.

Nem todos os gráficos exibem linhas de eixos por padrão. Você pode especificar exatamente quais eixos seu gráfico deve mostrar usando o parâmetro chxt. As linhas de eixo padrão não exibem números. É preciso especificar um eixo no parâmetro chxt para que os números sejam exibidos.

Os eixos podem exibir números que refletem os valores dos dados ou especificar eixos personalizados. O padrão é exibir valores numéricos, com valores dimensionados para o intervalo de 0 a 100. No entanto, é possível alterar esse intervalo usando chxr para exibir qualquer intervalo. Além disso, é possível estilizar os valores (por exemplo, para mostrar símbolos de moeda ou casas decimais) usando chxs.

Se você optar por usar valores personalizados, por exemplo: "Seg, Ter, Qua", poderá usar o parâmetro chxl. Para colocar essas etiquetas em locais específicos dos eixos, use o parâmetro chxp.

Por fim, é possível usar os parâmetros chxs e chxtc para especificar cor, tamanho, alinhamento e outras propriedades dos rótulos de eixos personalizados e numéricos.

Uma observação sobre os valores de string: somente caracteres seguros para URL são permitidos em strings de rótulo. Por segurança, codifique para URL todas as strings que contenham caracteres que não estejam no conjunto de caracteres 0-9a-zA-Z. Você encontra um codificador de URL na documentação de visualização do Google.

Esta seção aborda os seguintes tópicos:


Eixos visíveis chxt

Os gráficos de barras, linhas, radar e dispersão mostram uma ou duas linhas de eixo por padrão, mas essas linhas não incluem valores. Para exibir valores nas linhas dos eixos ou alterar os eixos mostrados, use o parâmetro chxt. Por padrão, os valores do eixo variam de 0 a 100, a menos que você os dimensione explicitamente usando a propriedade chxr. Para ocultar todas as linhas de eixo em um gráfico de linhas, especifique :nda após o valor do tipo de gráfico no parâmetro cht (exemplo: cht=lc:nda).

Por padrão, os eixos superior e inferior não exibem marcas de seleção pelos valores, ao passo que os eixos esquerdo e direito os exibem. É possível alterar esse comportamento usando o parâmetro chxs.

Sintaxe

chxt=
  <axis_1>
    ,...,
  <axis_n>
<axis>
Um eixo a ser exibido no gráfico. Os eixos disponíveis são:
  • x: Eixo x inferior
  • t - Eixo x superior [não compatível com o Google-Meter]
  • y: Eixo y à esquerda
  • r - Eixo y à direita [não compatível com o Google-Meter]

É possível especificar vários eixos do mesmo tipo, por exemplo: cht=x,x,y. Isso empilhará dois conjuntos de eixos x na parte inferior do gráfico. Isso é útil ao adicionar rótulos personalizados ao longo de um eixo que mostra valores numéricos (veja o exemplo abaixo). Os eixos são desenhados de dentro para fora. Portanto, se você tiver x,x, o primeiro x se referirá à cópia mais interna, o próximo x se referirá à próxima cópia externa e assim por diante.

 

Exemplos

Descrição Exemplo

Este exemplo mostra um gráfico de linhas com um eixo x, um eixo y, um eixo superior (t) e um eixo direito (r).

Como nenhum rótulo foi especificado, o gráfico tem como padrão um intervalo de 0 a 100 para todos os eixos.

Por padrão, os eixos superior e inferior não mostram marcas de seleção pelos rótulos.

Gráfico de linhas com os rótulos 0, 20, 40, 60, 80 e 100 à esquerda e à direita, e os rótulos 0, 25, 50, 75 e 100 acima e abaixo
chxt=x,y,r,t

É possível incluir vários conjuntos de rótulos para cada eixo incluindo o mesmo valor mais de uma vez. Este exemplo mostra dois conjuntos de eixos x e dois eixos y. Isso não é muito útil ao usar apenas os rótulos do eixo padrão, como mostrado aqui. No entanto, é possível especificar rótulos personalizados para cada cópia de cada eixo usando o parâmetro chxl.

<img <code="" dir="ltr" src="/static/chart/image/images/chart_41.png" title="chxt=x,x,y,y&cht=lc&chd=s:cEAELFJHHHKUju9uuXUc&chco=76A4FB&chls=2.0&chs=200x1"





Este exemplo mostra um gráfico de barras horizontais com um eixo x, um eixo y, um eixo t superior e um eixo r à direita.

Os rótulos dos eixos são omitidos, então a API Chart exibe um intervalo de 0 a 100 para os eixos x e t.

O intervalo dos eixos y e r é determinado pelo número de barras. Nesse caso, há cinco barras, então a API de gráficos do Google exibe um intervalo de 0 a 4. O primeiro rótulo é centralizado na base da primeira barra, o segundo é centralizado na base da segunda barra e assim por diante.

Gráfico de linhas com os rótulos 0, 20, 40, 60, 80 e 100 à esquerda e à direita, e os rótulos 0, 25, 50, 75 e 100 acima e abaixo
chxt=x,y,r,t

É possível suprimir os eixos padrão em um gráfico de linhas especificando :nda após o tipo do gráfico. Gráfico de linhas com eixos ocultos
cht=lc:nda

Voltar ao início

Intervalo do eixo chxr

É possível especificar o intervalo de valores que aparecem em cada eixo de maneira independente, usando o parâmetro chxr. Isso não muda a escala dos elementos do gráfico, apenas a escala dos rótulos dos eixos. Se quiser que os números dos eixos descrevam os valores reais dos dados, defina <start_val> e <end_val> como os valores mínimo e máximo do intervalo do formato de dados, respectivamente. Consulte Escalonamento de eixos para mais informações.

Torne um eixo visível usando o parâmetro chxt se quiser especificar o intervalo dele.

Para especificar valores de eixo personalizados, use o parâmetro chxl.

Sintaxe

Separe vários intervalos de rótulos de eixos usando a barra vertical ( |).

chxr=
  <axis_index>,<start_val>,<end_val>,<opt_step>
    |...|
  <axis_index>,<start_val>,<end_val>,<opt_step>
<índice_do_eixo>
A que eixo aplicar os rótulos. É um índice baseado em zero para a matriz de eixos especificada por chxt. Por exemplo, o eixo r seria 1 em chxt=x,r,y.
<start_val>
Um número que define o valor baixo do eixo.
<end_val>
Um número que define o maior valor do eixo.
<opt_step>
[Opcional] A etapa da contagem entre as marcações no eixo. Não há valor de etapa padrão. A etapa é calculada para tentar mostrar um conjunto de rótulos bem espaçados.

 

Exemplos

Descrição Exemplo

Este exemplo mostra os eixos y à esquerda e à direita (y e r) e um eixo x (x).

Cada eixo possui um intervalo definido. Como nenhum rótulo ou posição é especificado, os valores são retirados do intervalo especificado e espaçados uniformemente dentro dele. No gráfico de linhas, os valores são uniformemente distribuídos ao longo do eixo x.

A direção do eixo é invertida no eixo r (índice 2), porque o primeiro valor (1000) é maior que o último (0).


chxt=x,y,r
chxr=
  0,0,500|
  1,0,200|
  2,1000,0

Neste exemplo, são especificados valores para o eixo x.

Os rótulos dos eixos são espaçados uniformemente ao longo dos eixos. Um valor de cinco (5) é especificado para o parâmetro <opt_step>.

Gráfico de barras com 200, 300 e 400 no eixo x chxt=x
chxr=0,10,50,5

Voltar ao início

Rótulos de eixos personalizados chxl

É possível especificar rótulos personalizados para qualquer eixo usando o parâmetro chxl. Você pode especificar quantos rótulos quiser. Se você exibir um eixo (usando o parâmetro chxt) e não especificar rótulos personalizados, os rótulos numéricos padrão serão aplicados. Para especificar um intervalo numérico personalizado, use o parâmetro chxr.

Se quiser definir locais específicos nos eixos para seus rótulos, use o parâmetro chxp.

Sintaxe

Especifique um conjunto de parâmetros para cada eixo que você quer rotular. Separe vários conjuntos de rótulos usando a barra vertical (|).

chxl=
  <axis_index>:|<label_1>|...|<label_n>
    |...|
  <axis_index>:|<label_1>|...|<label_n>
<índice_do_eixo>
A que eixo aplicar rótulos. Ele é um índice na matriz de parâmetros chxt. Por exemplo, se você tiver chxt=x,x,y,y, o índice 0 será o primeiro eixo X, 1 será o segundo.
<label_1>| ... |<label_n>
Um ou mais rótulos para colocar ao longo desse eixo. Podem ser strings ou valores numéricos, e as strings não precisam estar entre aspas. label_1 é exibido na posição mais baixa do eixo, e label_n, na mais alta. Os outros rótulos são espaçados uniformemente entre eles. Indique espaços com um sinal de +. Não há como especificar uma quebra de linha em um rótulo. Separe os rótulos com uma barra vertical. Observação : não coloque uma barra vertical depois do rótulo final no parâmetro chxl.

 

Exemplos

Descrição Exemplo

Este gráfico mostra como adicionar rótulos personalizados aos dois eixos. Observe como os valores são espaçados uniformemente e como o último valor chxl não termina com uma barra vertical.

Gráfico de linhas com 0 e 100 à esquerda; A, B e C à direita; Jan, Jul, Jan, Jul e Jan no eixo x e 2005, 2006 e 2007 abaixo
chxt=x,y
chxl=
0:|Jan|Feb|March|April|May|
1:|Min|Mid|Max

Este exemplo inclui rótulos de eixo nos eixos y esquerdo e direito (y e r). Ele também inclui dois conjuntos de valores para o eixo x (x). Você pode considerar adicionar marcas de escala no eixo y usando chxs.

Gráfico de linhas com 0 e 100 à esquerda; A, B e C à direita; Jan, Jul, Jan, Jul e Jan no eixo x e 2005, 2006 e 2007 abaixo
chxt=x,y,r,x
chxl=
0:|Jan|July|Jan|July|Jan|
1:|0|50|100|
2:|A|B|C|
3:|2005|2006|2007

Este exemplo inclui rótulos de eixo nos eixos y à esquerda e à direita (y e r). Ele também inclui dois conjuntos de valores para o eixo x (x). Observe os rótulos vazios no conjunto do eixo x inferior, usados para espaçar os valores.

Este exemplo usa valores padrão para os rótulos do eixo y da esquerda.

Gráfico de barras com 0 e 100 à esquerda, A, B e C à direita, Jan, Jul, Jan, Jul e Jan no eixo x e 2005, 2006 e 2007 abaixo
chxt=x,y,r,x
chxl=
0:|Jan|July|Jan|July|Jan|
2:|A|B|C|
3:|2005||2006||2007

Se você quiser adicionar um rótulo genérico para descrever um eixo inteiro (por exemplo, para rotular um eixo como "custo" e outro "estudante"), use a propriedade chxt para adicionar outro eixo em cada lado e, em seguida, use chxl para adicionar um único rótulo personalizado a cada lado e chxp para espaçá-lo no meio do eixo.


chxt=x,x,y,y
chxl=1:|Martinis|3:|Score
chxp=1,50|3,50

Voltar ao início

Posições dos rótulos dos eixos chxp

É possível especificar quais rótulos de eixo serão mostrados usando os rótulos padrão ou personalizados especificados com chxl. Se você não especificar posições exatas usando esse parâmetro, os rótulos serão espaçados uniformemente e com um valor de taxa padrão ao longo dos eixos. Se você não especificar chxl, os rótulos das marcas de seleção serão os valores padrão, normalmente valores de dados ou os números de barras em gráficos de barras.

Sintaxe

Separe vários conjuntos de posicionamento usando a barra vertical (|).

chxp=
  <axis_1_index>,<label_1_position>,...,<label_n_position>
    |...|
  <axis_m_index>,<label_1_position>,...,<label_n_position>
<índice_do_eixo>
É o eixo em que você está especificando posições. Trata-se de um índice para a matriz de parâmetros chxt. Por exemplo, se você tiver chxt=x,x,y,y, o índice 0 será o primeiro eixo x, 1 será o segundo e assim por diante.
<label_1_position>,...,<label_n_position>
A posição do rótulo ao longo do eixo. Trata-se de uma lista separada por vírgulas de valores numéricos, em que cada valor define a posição do rótulo correspondente na matriz chxl: a primeira entrada se aplica ao primeiro rótulo e assim por diante. A posição é um valor no intervalo do eixo. O valor sempre será de 0 a 100, a menos que você tenha especificado um intervalo personalizado usando chxr. O número de posições precisa ser igual ao número de rótulos do eixo.

 

Exemplos

Descrição Exemplo

Este exemplo inclui rótulos do eixo r em posições especificadas no gráfico. O texto do rótulo é especificado usando o parâmetro chxl.

Os rótulos com a posição especificada de 0 são colocados na parte inferior do eixo y ou r ou à esquerda do eixo x ou t.

Os rótulos com a posição especificada de 100 são colocados no topo do eixo y ou r ou à direita do eixo x ou t.

Line chart with min, average, and max on the right, 20, 40, 60, 80, and 100 on the left, and 0, 25, 50, 75, and 100 along the x-axis
chxt=x,y,r
chxl=2:|min|average|max
chxp=2,10,35,75

Este exemplo mostra como mostrar os valores de rótulo padrão, mas apenas em locais especificados.

chxp=1,10,35,75: o eixo y precisa mostrar apenas três rótulos: 10, 35 e 75. Como nenhum texto de rótulo personalizado foi especificado, esses valores de eixo são mostrados. Observe como não é necessário espaçar os rótulos uniformemente ao usar chxp. Se chxp não tivesse sido especificado aqui, a distância do valor do rótulo padrão no eixo y seria a cada 20 unidades, como mostrado no segundo gráfico.

Line chart with 10, 35, and 75 on the left, and 0, 25, 50, 75, and 100 along the x-axis
chxt=x,y
chxp=1,10,35,75

Gráfico de linhas com posições padrão nos eixos.
chxt=x,y
chxp não especificado

Voltar ao início

Estilos dos rótulos dos eixos chxs

Você pode especificar o tamanho, a cor e o alinhamento da fonte dos rótulos dos eixos, tanto para rótulos personalizados quanto com valores padrão. Todos os rótulos no mesmo eixo têm o mesmo formato. Se você tiver várias cópias de um eixo, poderá formatar cada uma de maneira diferente. Também é possível especificar o formato de uma string de rótulo, por exemplo, para mostrar símbolos de moeda ou zeros à direita.

Por padrão, os eixos superior e inferior não mostram marcas de seleção pelos valores, ao contrário dos eixos esquerdo e direito.

Sintaxe

Os valores para vários eixos precisam ser separados usando uma barra vertical (|).

chxs=
 <axis_index><opt_format_string>,<opt_label_color>,<opt_font_size>,<opt_alignment>,<opt_axis_or_tick>,<opt_tick_color>,<opt_axis_color>
   |...|
 <axis_index><opt_format_string>,<opt_label_color>,<opt_font_size>,<opt_alignment>,<opt_axis_or_tick>,<opt_tick_color>,<opt_axis_color>
<axis_index>
O eixo a que isso se aplica. Esse é um índice baseado em zero no parâmetro chxt.
<opt_format_string>
[Opcional] Esta é uma string de formato opcional que, se usada, vem logo após o número do índice do eixo sem uma vírgula intermediária. Ele começa com uma letra literal N seguida pelos seguintes valores, todos opcionais: A sintaxe da string de formatação é a seguinte:
       N<preceding_text>*<number_type><decimal_places>zs<x or y>*<following_text>
Confira o significado de cada elemento:
  • <preceding_text>: texto literal que precede cada valor.
  • *...*: um bloco opcional entre asteriscos literais, em que é possível especificar detalhes de formatação para números. Os seguintes valores são aceitos e todos opcionais:
    • <number_type>: formato numérico para valores numéricos. Escolha uma das opções a seguir:
      • f: formato de ponto flutuante [Padrão]. Considere também especificar a precisão com o valor <decimal_places>.
      • p: formato de porcentagem. O sinal de % é acrescentado automaticamente. Observação:ao usar esse formato, os valores de dados de 0,0 a 1,0 são mapeados para 0 a 100% (por exemplo, 0,43 será mostrado como 43%).
      • e: formato de notação científica.
      • c<CUR>: formata o número na moeda especificada, com o marcador de moeda apropriado. Substitua <CUR> por um código de moeda de três letras. Exemplo: cEUR para euros. É possível encontrar uma lista de códigos no site da ISO, embora nem todos os símbolos sejam compatíveis.
    • <decimal_places>: um número inteiro que especifica quantas casas decimais serão mostradas. O valor é arredondado (não truncado) para esse comprimento. O padrão é 2.
    • z: exibe zeros à direita. O padrão é não.
    • s: exibe separadores de grupo. O padrão é não.
    • x ou y: exibe os dados da coordenada x ou y, conforme especificado. O significado dos dados x varia de acordo com o tipo de gráfico: experimente com seu gráfico para determinar o que significa. O padrão é 'y'.
  • <following_text>: texto literal que acompanha cada valor.
<opt_label_color>
A cor a ser aplicada ao texto do eixo (mas não à linha do eixo), no formato hexadecimal RRGGBB. A cor da linha do eixo é especificada separadamente usando opt_axis_color. O padrão é cinza.
<opt_font_size>
[Opcional] especifica o tamanho da fonte em pixels. Este parâmetro é opcional.
<opt_alignment>
[Opcional] Alinhamento do rótulo. Para eixos superior ou inferior, isso descreve como o rótulo se alinha à marca de seleção acima ou abaixo dele. Para eixos à esquerda ou à direita, isso descreve como o rótulo é alinhado dentro da caixa delimitadora, que toca o eixo. Especifique um destes números:
  • -1Superior ou inferior: os rótulos ficam à direita das marcações. Esquerda ou direita: os rótulos são alinhados à esquerda na área. Padrão para rótulos do eixo r.
  • 0Superior ou inferior: os rótulos são centralizados nas marcações. Esquerda ou direita: os rótulos são centralizados na área deles. Padrão para rótulos dos eixos x e t.
  • 1Superior ou inferior: os rótulos ficam à esquerda das marcações. Esquerda ou direita: os rótulos são alinhados à direita na área. Padrão para rótulos do eixo y.
<opt_axis_or_tick>
[Optional, not supported in Googleômetro] Define se as marcas de escala e/ou as linhas de eixo serão mostradas no eixo. As marcas de escala e as linhas de eixo estão disponíveis apenas para os eixos mais internos. Por exemplo, elas não são compatíveis com o externo de dois eixos x. Use um dos seguintes valores:
  • l ("L" minúsculo): desenha apenas a linha do eixo.
  • t: desenha apenas as marcas de seleção. As marcas de escala são as pequenas linhas ao lado dos rótulos dos eixos.
  • lt: [Padrão] desenhe uma linha de eixo e marcas de seleção para todos os rótulos.
  • _ - (Sublinhado) não desenha linhas de eixo nem marcas de seleção. Se quiser ocultar uma linha de eixo, use este valor.
<tick_color>
[Optional; not supported in Google-o-Meter] A cor da marca de seleção, no formato hexadecimal RRGGBB. O padrão é cinza.
<opt_axis_color>
[Opcional] A cor da linha do eixo, no formato hexadecimal RRGGBB. O padrão é cinza.

 

Exemplos

Descrição Exemplo

O tamanho da fonte e a cor são especificados para o segundo eixo x (Jan, Fev, Mar).

Gráfico de linhas com rótulos mín, média e máx à esquerda, 0, 1, 2, 3 e 4 à direita, 0 a 100 ao longo do eixo x, e Jan, Fev e Mar em azul, embaixo

chxt=x,y,r,x
chxr=2,0,4
chxl=3:|Jan|Feb|Mar|
     1:|min|average|max
chxp=1,10,35,75
chxs=3,0000DD,13,0,t

O tamanho da fonte, a cor e o alinhamento são especificados para o eixo y da direita. Esse eixo possui marcas de escala, mas não a linha de eixo.

Gráfico de linhas com 0 a 100 no eixo x, Jan, Fev e Mar na parte inferior, 0 a 4 no eixo y e marcas de escala vermelhas com texto em azul para os rótulos mín, média e máx, à direita.

chxt=x,y,r,x
chxl=3:|Jan|Feb|Mar|
     2:|min|average|max
chxp=2,10,35,95
chxs=2,0000DD,13,-1,t,FF0000

Este gráfico inclui três conjuntos de dados e mostra três conjuntos de rótulos de eixos, um por série. Cada conjunto de rótulos é formatado usando uma string de formatação personalizada, conforme descrito aqui:

  • 0N*e,000000|
    • 0 significa a primeira série de dados
    • N significa uma string de formatação
    • * significa o início dos especificadores de formato.
    • e significa notação científica
    • * significa o fim dos especificadores de formato
    • 000000 significa texto em preto.
  • 1N*cUSD*Mil,FF0000|
    • 1 significa a segunda série
    • N significa uma string de formatação
    • * significa o início dos especificadores de formato.
    • c significa um marcador de moeda
    • USD especifica o dólar americano como o marcador de moeda a ser usado.
    • * significa o fim dos especificadores de formato
    • Mil é um literal que segue a string
    • FF0000 significa texto em vermelho.
  • 2N*sz2*,0000FF
    • 2 significa a terceira série
    • N significa uma string de formatação
    • * significa o início dos especificadores de formato
    • s significa mostrar especificadores de agrupamento (na localidade em inglês americano, isso é uma vírgula a cada três zeros).
    • z2 significa mostrar dois zeros à direita.
    • 0000FF significa texto azul.

Os intervalos dos rótulos dos eixos são definidos usando o parâmetro chxr (axis_index, start, end, step). Se não estiverem definidos, seriam de 0 a 100 por padrão.


chd=s:
  984sttvuvkQIBLKNCAIi,
  DEJPgq0uov17zwopQODS,
  AFLPTXaflptx159gsDrn
chxr=
  0,0,1000000,250000|
  1,0,60|
  2,0,5000
chxs=
  0N*e,000000|
  1N*cUSD*Mil,FF0000|
  2N*sz2*,0000FF

Voltar ao início

Estilos das marcas de escala dos eixos chxtc

Você pode especificar marcas de escala longas para eixos específicos. Normalmente, isso é usado para estender uma marca de seleção por todo o comprimento de um gráfico. Use o parâmetro chxs para mudar a cor da marca de seleção.

Os valores para vários eixos precisam ser separados por uma barra vertical (|). Os valores em uma série precisam ser separados por vírgula.

Sintaxe

chxtc=
  <axis_index_1>,<tick_length_1>,...,<tick_length_n>
    |...|
  <axis_index_m>,<tick_length_1>,...,<tick_length_n>
<axis_index>
O eixo a que isso se aplica. Esse é um índice baseado em zero no parâmetro chxt. Separe os valores para eixos diferentes usando um delimitador de barra.
<tick_length_1>,...,<tick_length_n>
Comprimento das marcas de seleção no eixo, em pixels. Se um único valor for fornecido, ele será aplicado a todos os valores. Se mais de um valor for fornecido, as marcas de escala do eixo vão alternar pela lista de valores daquele eixo. Valores positivos são desenhados para fora da área do gráfico e cortados pelas bordas do gráfico. O valor positivo máximo é 25. Valores negativos são desenhados para dentro da área do gráfico e cortados pelas bordas da área do gráfico.

 

Exemplos

Descrição Exemplo

Exemplo de uso de chxtc para criar marcas de seleção longas vermelhas. O comprimento da marca de seleção excede a largura da área do gráfico, mas é cortado para caber no gráfico.

  • chxt=x,y,r,x: mostra um eixo esquerdo, um direito e dois eixos inferiores.
  • chxl=2:|min|average|max|3:|Jan|Feb|Mar: o texto do rótulo atribuído ao "r" (lado direito) e aos eixos X externos.
  • chxp=2,10,35,95: posições de rótulo personalizadas ao longo do eixo r (índice=2) para os três rótulos.
  • chxs=2,0000dd,13,-1,t,FF0000: estilos dos rótulos dos eixos para o eixo r: cor do texto, tamanho do texto, alinhamento à esquerda, com marcas de seleção vermelhas.
  • chxtc=1,10|2,-180: comprimento das marcas de escala dos eixos y e r. O primeiro valor especifica marcas de escala de 10 pixels, fora do eixo. O segundo valor especifica marcas de escala de 180 pixels dentro do eixo. O número negativo significa que a marcação entra no eixo e é cortada para caber no gráfico.

Gráfico de linhas com 0 a 100 ao longo do eixo x; Jan, Fev e Mar na parte inferior; 0 a 4 no eixo y, e marcas de escala longas e vermelhas com texto em azul para mín, média e máx, à direita.

chxt=x,y,r,x
chxl=
  2:|min|average|max|
  3:|Jan|Feb|Mar
chxp=2,10,35,95
chxs=
  2,0000dd,13,-1,t,FF0000
chxtc=1,10|2,-180

Este gráfico demonstra como alternar o comprimento das marcas de escala. chxtc especifica dois valores de comprimento de marcação para o eixo y (5 e 15), e as marcas desenhadas no gráfico alternam entre os dois valores.
chxt=x,y
chxtc=
  1,5,15

Voltar ao início

Estilos de linha chls [linha, radar]

Você pode especificar a espessura da linha e o estilo sólido/traçado com o parâmetro chls. Esse parâmetro só pode ser usado para estilizar linhas em gráficos de linhas ou radar. Não é possível usá-lo para estilizar linhas em linhas de um gráfico composto, a menos que o tipo base seja um gráfico de linhas.

Sintaxe

Separe vários estilos de linha pela barra vertical ( |). O primeiro estilo se aplica à primeira linha, o segundo à próxima e assim por diante. Se você tiver menos estilos que linhas, o estilo padrão será aplicado a todas as linhas não especificadas.

chls=
  <line_1_thickness>,<opt_dash_length>,<opt_space_length>
    |...|
  <line_n_thickness>,<opt_dash_length>,<opt_space_length>
<line_1_thickness>
Espessura da linha, em pixels.
<opt_dash_length>, <opt_space_length>
[Opcional] Usado para definir linhas de grade tracejadas. O primeiro parâmetro é o comprimento de cada traço da linha de grade, em pixels. O segundo parâmetro é o espaçamento entre os traços, em pixels. Para uma linha contínua, não especifique nenhum valor. Se você especificar apenas <opt_dash_length>, então <opt_space_length> será definido como <opt_dash_length>. O padrão é 1,0 (uma linha sólida).

 

Exemplos

Descrição Exemplo

Aqui, a linha tracejada é especificada por 3,6,3 e a linha sólida mais grossa é especificada por 5.

Gráfico de linhas com uma linha contínua e uma linha tracejada
chls=3,6,3|5

Voltar ao início

Preenchimento do plano de fundo chf [Todos os gráficos]

Você pode especificar cores de preenchimento e estilos para a área de dados e/ou todo o plano de fundo do gráfico. Os tipos de preenchimento incluem uniforme, listrado e gradiente. É possível especificar preenchimentos diferentes para áreas distintas, por exemplo, a área inteira do gráfico ou apenas a área de dados. O preenchimento da área do gráfico substitui o preenchimento do plano de fundo. Todos os preenchimentos são especificados usando o parâmetro chf, e é possível misturar diferentes tipos de preenchimento (sólidos, listras, gradientes) no mesmo gráfico, separando os valores com barra vertical ( | ). Os preenchimentos da área do gráfico substituem os preenchimentos do plano de fundo do gráfico.

Preenchimentos sólidos chf [todos os gráficos]

Você pode especificar um preenchimento sólido para o plano de fundo e/ou a área do gráfico ou atribuir um valor de transparência para o gráfico inteiro. Você pode especificar vários preenchimentos usando o caractere de barra vertical (|). (Maps: somente segundo plano).

Sintaxe

chf=<fill_type>,s,<color>|...
<fill_type>
A parte do gráfico que está sendo preenchida. Especifique um dos seguintes valores:
  • bg: preenchimento do plano de fundo
  • c: preenchimento da área do gráfico. Incompatível com gráficos de mapa.
  • a: torna o gráfico inteiro transparente, incluindo o plano de fundo. Os seis primeiros dígitos de <color> são ignorados e apenas os dois últimos (o valor de transparência) são aplicados ao gráfico inteiro e a todos os preenchimentos.
  • b<index>: preenchimento sólido de barras (somente para gráficos de barras). Substitua <index> pelo índice da série de barras a ser preenchida com uma cor sólida. O efeito é semelhante à especificação de chco em um gráfico de barras. Consulte Cores das séries do gráfico de barras para ver um exemplo.
s
Indica um preenchimento sólido ou transparente.
<color>
A cor de preenchimento, no formato hexadecimal RRGGBB. Para transparências, os primeiros seis dígitos são ignorados, mas precisam ser incluídos mesmo assim.

 

Exemplos

Descrição Exemplo

Neste exemplo, o segundo plano do gráfico é preenchido com cinza claro (EFEFEF).

Gráfico de linha vermelha com preenchimento da área do gráfico em preto.

chf=bg,s,EFEFEF

Neste exemplo, o segundo plano do gráfico é preenchido com cinza claro (EFEFEF) e a área em preto (000000).

Gráfico de linha vermelha com área do gráfico em preto e plano de fundo em cinza claro.

chf=c,s,000000|
bg,s,EFEFEF

Neste exemplo, aplicamos uma transparência de 50% em todo o gráfico (80 em hexadecimal é 128, ou cerca de 50% de transparência). Observe o plano de fundo das células da tabela que aparece no gráfico.

Gráfico de dispersão com pontos em azul e transparência de 50%.

chf=a,s,00000080

Voltar ao início

Preenchimento gradiente chf [linha, barra, Googleômetro, radar, dispersão,Venn]

Você pode aplicar um ou mais preenchimentos gradientes à área do gráfico ou plano de fundo. O preenchimento gradiente é um esmaecimento de uma cor para outra. Gráficos de pizza e Googleômetro: somente em segundo plano.

Cada preenchimento de gradiente especifica um ângulo e, em seguida, duas ou mais cores ancoradas em um local especificado. A cor varia conforme se move de uma âncora para outra. Você precisa ter pelo menos duas cores com valores de <color_centerpoint> diferentes, para que uma delas possa esmaecer a outra. Cada gradiente extra é especificado por um par <color>,<color_centerpoint>.

Sintaxe

chf=<fill_type>,lg,<angle>,<color_1>,<color_centerpoint_1>
    ,...,
  <color_n>,<color_centerpoint_n>
<fill_type>
A área do gráfico a ser preenchida. Uma das seguintes opções:
  • bg: preenchimento do plano de fundo
  • c: preenchimento da área do gráfico.
  • b<index>: preenchimento gradiente de barras (somente para gráficos de barras). Substitua <index> pelo índice da série de barras a ser preenchida com um gradiente. Consulte Cores das séries do gráfico de barras para ver um exemplo.
lg
Especifica um preenchimento gradiente.
<angle>
Um número que especifica o ângulo do gradiente de 0 (horizontal) a 90 (vertical).
<color>
A cor do preenchimento, no formato hexadecimal RRGGBB.
<color_centerpoint>
Especifica o ponto de fixação da cor. A cor começará a esmaecer a partir desse ponto, à medida que se aproximar de outra âncora. O intervalo de valores é de 0,0 (borda inferior ou esquerda) a 1,0 (borda superior ou direita), inclinado no ângulo especificado por <angle>.

 

Exemplos

Descrição Exemplo

A área do gráfico tem um gradiente linear horizontal, especificado com um ângulo de zero grau (0).

As cores são pêssego (FFE7C6), centralizada no lado esquerdo (posição 0.0) e azul (76A4FB) centralizada no lado direito (posição 1.0).

O plano de fundo do gráfico é desenhado em cinza (EFEFEF).

Gráfico de linhas em cinza escuro com plano de fundo em cinza claro e área do gráfico em gradiente linear de branco a azul, da esquerda para a direita

chf=
  c,lg,0,
  FFE7C6,0,
(pêssego)
  76A4FB,1
(azul)

A área do gráfico tem um gradiente linear diagonal (da parte inferior à esquerda ao canto superior direito), especificado em um ângulo de 45 graus (45).

Pêssego (FFE7C6) é a primeira cor especificada. A parte inferior esquerda do gráfico está totalmente em pêssego.

Azul (6A4FB) é a segunda cor especificada. O canto superior direito do gráfico é totalmente azul. Especificamos um deslocamento de 0, 75 para fornecer um pico de azul que desaparece em direção ao canto superior direito.

O plano de fundo do gráfico é desenhado em cinza (EFEFEF).

Gráfico de linhas em cinza escuro com plano de fundo em cinza claro e área do gráfico em gradiente linear diagonal de branco a azul, da parte inferior esquerda para a parte superior direita

chf=
  c,lg,45,
  FFE7C6,0,
(pêssego)
  76A4FB,0.75
(azul)

A área do gráfico tem um gradiente linear vertical (de cima para baixo), especificado com um ângulo de 90 graus (90).

Azul (76A4FB) é a primeira cor especificada. A parte superior do gráfico é totalmente azul.

Pêssego (FFE7C6) é a segunda cor especificada. A parte inferior do gráfico está totalmente em pêssego.

O plano de fundo do gráfico é desenhado em cinza (EFEFEF).

Gráfico de linhas em cinza escuro com plano de fundo em cinza claro e área do gráfico em gradiente linear vertical de branco a azul, de baixo para cima

chf=
  c,lg,90,
  FFE7C6,0,
(pêssego)
  76A4FB,0.5
(azul)

Voltar ao início

 

Preenchimento listrado chf [linha, barra, Googleômetro, radar, dispersão, Venn]

Você pode especificar um preenchimento listrado para a área do gráfico ou para o gráfico inteiro Gráficos de pizza e Googleômetro: somente em segundo plano.

Sintaxe

chf=
  <fill_type>,ls,<angle>,<color_1>,<width_1>
    ,...,
  <color_n>,<width_n>
<fill_type>
A área do gráfico a ser preenchida. Uma das seguintes opções:
  • bg: preenchimento do plano de fundo
  • c: preenchimento da área do gráfico
  • b<index>: preenchimento listrado de barras (somente para gráficos de barras). Substitua <index> pelo índice da série de barras para preencher com listras. Consulte Cores das séries do gráfico de barras para ver um exemplo.
ls
Especifica o preenchimento de listras lineares.
<angle>
O ângulo de todas as listras em relação ao eixo y. Use 0 para listras verticais ou 90 para listras horizontais.
<color>
A cor dessa listra, no formato hexadecimal RRGGBB. Repita <color> e <width> para cada listra adicional. Use pelo menos duas listras. As listras se alternam até que o gráfico seja preenchido.
<width>
A largura dessa listra, de 0 a 1, em que 1 é a largura total do gráfico. As listras se repetem até que o gráfico seja todo preenchido. Repita <color> e <width> em cada listra adicional. Use pelo menos duas listras. As listras se alternam até que o gráfico seja preenchido.

 

Exemplos

Descrição Exemplo
  • bg,ls,0: preenchimento listrado de plano de fundo com listras em ângulo de zero em relação ao eixo y (paralelo ao eixo y). As listras preenchem o plano de fundo e a área do gráfico.
  • CCCCCC,0.15: a primeira listra é cinza-escuro, com 15% da largura do gráfico.
  • FFFFFF,0.1: a segunda listra é branca, com 10% da largura do gráfico.
Gráfico de linha azul com listras cinzas e brancas se alternando da esquerda para a direita
chf=
  bg,ls,0,
  CCCCCC,0.15,
  FFFFFF,0.1
  • c,ls,90: área do gráfico com listras horizontais em um ângulo de 90 graus em relação ao eixo y. As listras preenchem a área do gráfico, mas o plano de fundo é omitido.
  • 999999,0.25: a primeira listra é cinza-escuro, com 25% da largura do gráfico.
  • CCCCCC,0.25: igual à primeira listra, mas em cinza mais claro.
  • FFFFFF,0.25: igual à primeira listra, mas em branco.
Gráfico de linha azul com listras em cinza escuro, cinza claro, branco e cinza escuro se alternando de baixo para cima
chf=
  c,ls,90,
  999999,0.25,
  CCCCCC,0.25,
  FFFFFF,0.25

Voltar ao início