Chart API: Medidor em formato de velocímetro

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