Arquivo da categoria: Google Chart API

Desenvolvimento, Google Chart API, QR Code, Tecnologia

QR Code: Gere com o Google Chart API

2 Comentários

Devido à rápida difusão e com vários sites e revistas dando ênfase a esse assunto, na semana passada tive mais de 100 visitas vindas diretamente de buscas sobre Qr code pelo Google.

Então resolvi continuar postando, e dessa vez, como gerar utilizando a ferramenta Chart API do Google.
Você que ainda não conhece esta tecnologia, pode ler mais em: https://rafaelbiriba.com/category/tecnologia/qr-code

A imagem ao lado está sendo gerada pela seguinte URL: ( dividida para uma melhor visualização )

http://chart.apis.google.com/chart?
&chs=150×150
&cht=qr
&chl=https://rafaelbiriba.com
&choe=UTF-8

Recomendo que apenas os valores em negrito/colorido sejam editados para facilitar a exibição. Qualquer alteração nos outros parâmetros, recomendo ler a documentação em http://code.google.com/intl/pt-BR/apis/chart/#qrcodes.

Clique aqui para acessar o link completo do gráfico.

&chs = Dimensões em pixel. De acordo com a documentação do google, a maior dimensão deve ter no máximo 300000 pixel, como por exemplo: 600×500, 300×1000, etc…

&cht = Tipo do gráfico. Neste caso qr

&chl = Conteúdo à ser codificado, lembrando que quanto maior o conteúdo, mais linhas e colunas a imagem vai ter, aumentando o seu tamanho, automaticamente.

&choe = Especifica opcionalmente como será a saída codificada. As opções mais comuns são UTF-8 e ISO-8859-1

Antes de gerar o código QR, considere o tipo de dispositivo a ser usado para a leitura do código. Os melhores leitores de código QR conseguem ler códigos versão 40, dispositivos móveis podem ler somente até a versão 4.

O Google recomenda manter a versão 4, que equivale a cerca de 100 caracteres alfanuméricos no nível de EC padrão.

Linhas e Colunas de um QR code:

  • A versão 1 tem 21 linhas e colunas e pode codificar até 25 caracteres alfanuméricos ( EC = L )
  • A versão 2 tem 25 linhas e colunas e pode codificar até 47 caracteres alfanuméricos ( EC = L )
  • A versão 3 tem 29 linhas e colunas e pode codificar até 77 caracteres alfanuméricos ( EC = L )
  • A versão 4 tem 33 linhas e colunas e pode codificar até 114 caracteres alfanuméricos ( EC = L )
  • …
  • A versão 40 tem 177 linhas e colunas e pode codificar até 4,296 caracteres alfanuméricos ( EC = L )

Parâmetro opcional: Correção de erros: ( EC )

&chld = Adicionando esse parâmetro no final da URL para gerar o QR Code, você pode especificar o tipo de correção de erros. Abaixo segue cada uma das opções disponíveis:

– L permite que 7% de um código QR seja restaurado
– M permite que 15% de um código QR seja restaurado
– Q permite que 25% de um código QR seja restaurado
– H permite que 30% de um código QR seja restaurado

Clique aqui para acessar o link completo do gráfico com o parâmetro de correção de erros ( EC = H ).

Acessando o link: http://code.google.com/intl/pt-BR/apis/chart/#ec_level_table, é possível analisar a tabela com informações de quantos caracteres podem ser armazenados em cada versão da imagem e com cada um dos nível de correção.

🙂

Share
Desenvolvimento, Google Chart API

Chart API: Medidor em formato de velocímetro

1 Comentário
Google: http://www.google.com/
Google Code: http://code.google.com/apis/chart/

Um gráfico em formato de velocímetro, pode ser usado para diversos fins, como indicar o uptime ou apresentar o espaço livre em disco e etc..
Abaixo segue a URL utilizada, e em seguida a explicação de cara parâmetro, para que você aprenda, configure e use conforme a sua necessidade !

No exemplo, utilizamos um gráfico de 0 a 200, onde o ponteiro vale 150 !
Lembrando que a URL deve ficar em uma só linha, abaixo ela está segmentada devido ao tamanho.

http://chart.apis.google.com/chart?
&chs=225×125
&cht=gom
&chd=t:150
&chds=0,200
&chl=Titulo 01
&chco=00ff00,ffff00,ff0000
&chxt=y
&chxl=0:|0|200

Recomendo que apenas os valores em negrito/colorido sejam editados para facilitar a exibição. Qualquer alteração nos outros parâmetros, recomendo ler a documentação em http://code.google.com/apis/chart/.

Clique aqui para acessar o link completo do gráfico.

&chs = Dimensões do gráfico, Comprimento X Altura. Deve ser alterado para ficar de acordo com o tamanho do gráfico a ser apresentado, senão alguns dados não serão corretamente exibidos na tela.

&cht = É o tipo de gráfico. Neste caso usamos o gom. Outras opções seriam: p3 = pizza, bvg = barras dentre outros…

&chd = Posição da seta. Em nosso exemplo deve estar diretamente associado ao valores do &chxl, no eixo Y. Observe que atribuimos o valor 150.

&chds = Valor mínimo e máximo para o eixo Y. Manteremos o valor inicial como zero e o maior valor sendo igual ou maior que o maior dado informado no &chd, para que o gráfico seja exibido corretamente.

&chl = É o título da seta. Também é possível deixar esse parâmetro em branco, para deixar a seta sem nenhum rótulo.

&chco = Cores do gráfico em hexadecimal, sendo o primeiro como cor inicial, o segundo como cor intermediária e o terceiro como cor final. Basta alterar conforme sua necessidade.

&chxt = Habilita o eixo  y.

&chxl = Nome dos pontos nos eixos. 0:| corresponde aos titulos do eixo Y. Não há limite para que seja adicionado dados no eixo Y, porém o primeiro e o ultimo valor do eixo Y, deve ser o mesmo que o informado no parametro &chds, para que seja exibido corretamente no gráfico.

Acho que isso já é um grande inicio para construir um gráfico em formato de velocímetro.
=)

Share
Desenvolvimento, Google Chart API

Chart API: Gráfico de visitantes do dia

2 Comentários
Google: http://www.google.com/
Google Code: http://code.google.com/apis/chart/

O gráfico abaixo, pode ser utilizado, não somente para visitantes do dia, mas pode ser adaptado para uma utilidade de sua preferência !

Abaixo segue a URL, utilizada para exibir esse gráfico, e logo depois as explicações de como personaliza-lo ! Lembrando que a URL deve ficar em uma só linha, abaixo ela está segmentada devido ao tamanho.

http://chart.apis.google.com/chart?
&cht=lc
&chco=ff0000
&chs=300×200
&chd=t:55,20,50,50,60,45,47,175,200
&chds=0,200
&chtt=Visitantes+do+Dia – 03/04/08
&chm=o,000000,0,-1,5.0
&chxt=x,y
&chxl=0:|00:00|03:00|06:00|09:00|12:00|15:00|18:00|21:00|24:00|1:|0||50||100||150||200

Recomendo que apenas os valores em negrito/colorido sejam editados para facilitar a exibição. Qualquer alteração nos outros parâmetros, recomendo ler a documentação em http://code.google.com/apis/chart/.

Clique aqui para acessar o link completo do gráfico.

&cht = É o tipo de gráfico. Neste caso usamos o lc. Outras opções seriam: p3 = pizza, bvg = barras dentre outros…

&chco = Cor da linha. FF0000 é vermelho em hexadecimal. Basta alterar conforme sua necessidade.

&chs = Dimensões do gráfico, Comprimento X Altura. Deve ser alterado para ficar de acordo com o tamanho do gráfico a ser apresentado, senão alguns dados não serão corretamente exibidos na tela.

&chd = Dados do gráfico. Em nosso exemplo deve estar diretamente associado ao valores do &chxl, no eixo Y.

&chds = Valor mínimo e máximo para o eixo Y, que no exemplo correponde ao número de visitas. O correto, é manter o valor inicial como zero, já que não temos visitas negativas, e o maior valor sendo igual ou maior que o maior dado informado no &chd, para que o gráfico seja exibido corretamente.

&chtt = Titulo do gráfico. Pode ser uma frase separada por ‘+’, ou simplesmente por espaços.

&chm = Responsável por criar as bolas em cada ponto. o segundo valor ‘000000‘, corresponde ao preto em hexadecimal, e 5.0 é o tamanho da bola. Ambos podem ser alterados.

&chxt = Habilita o eixo x e y. No manual, é possível ver que podemos mais eixos, passando por este parametro.

&chxl = Nome dos pontos nos eixos. 0:| correponde aos titulos no eixo X. Para que o gráfico seja exibido corretamente, a quantidade de dados informados &chd deve ser igual a quantidade de títulos no eixo X. Reparem que ambos tem 9 entradas.
1:| corresponde aos titulos do eixo Y. Não há limite para que seja adicionado dados no eixo Y, porém o primeiro e o ultimo valor do eixo Y, deve ser o mesmo que o informado no parametro &chds.

Com isso, é possível construir esse e muitos outros gráficos, e trabalhando em um pequeno script, é possível que o gráfico seja exibido sempre atualizado. Cabe a você definir a sua necessidade.

=)

Share
Desenvolvimento, Google Chart API

Chart API: Desenhe gráficos com o Google – Introdução

4 Comentários
Google: http://www.google.com/
Google: http://www.google.com/

O Google Chart API permite que você gere gráficos de forma dinâmica. Através de parâmetros informados pela URL, a API retorna uma imagem PNG com o gráfico especificado.

Existem diversos tipos de possibilidades, como gráficos de pizza, linear, múltiplas linhas, barra, radar, mapas geográficos e muitos outros, com opções de dimensões, legenda, cores, tamanhos, efeitos e muitas outras possibilidades.

Link: http://code.google.com/apis/chart/

Abaixo segue um modelo de exemplo:

URL Utilizada: http://chart.apis.google.com/chart?cht=p3&chd=t:60,40&chs=250×100&chl=Hello|World

Código html utilizado:

<img src=”URL” alt=”” width=”250″ height=”100″ />

Onde no lugar de URL deve ser informado o endereço do Chart API do Google conforme informado no exemplo a cima.

Estarei ensinando e apresentando nos próximos POSTs, formas e possibilidades de construções de gráficos simples e avançados em todos os formatos disponíveis.

Share