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.
=)
Pingback: Code School vai liberar 48 horas de acesso gratuito aos cursos online | Planeta Globo.com()