Bom, vamos ao que interessa, criar um gráfico que mostre qual distro é a mais utilizada.
O
Google Chart necessita que os parâmetros passados sejam igual a 100%, no nosso exemplo vamos criar um gráfico que compare três resultados.
Supondo que você já tenha feito a porcentagem para os parâmetros que deseja usar, vamos começar.
Ex.: total de votos = 100.
- Ubuntu recebeu 50 votos
- Slackware recebeu 30 votos
- Kurumin recebeu 15 votos
- Outros recebeu 5 votos
Fazendo a porcentagem logo temos Ubuntu 60%, Slackware 30%, Kurumin 15%, Outros 5%. Já temos os parâmetros mais importantes que necessitamos para a construção do nosso gráfico, então mãos à obra.
Com isso chegamos à URL:
http://chart.apis.google.com/chart?cht=p3&chd=t:50,30,15,5&chs=450x200&chco=ff0000|8B7765|7B68EE|00FF00&chdl=50+Ubuntu|30+Slackware|15+Kurumin|5+Outros&chtt=Grafico+de+Distro|mais+utilizada&chl=Ubuntu|Slackware|Kurumin|Outros
Colocando em uma tag img, seria o equivalente a:
<img src="http://chart.apis.google.com/chart?cht=p3&chd=t:50,30,15,5&chs=450x200&chco=ff0000|8B7765|7B68EE|00FF00&chdl=50+Ubuntu|30+Slackware|15+Kurumin|5+Outros&chtt=Grafico+de+Distro|mais+utilizada&chl=Ubuntu|Slackware|Kurumin|Outros" />
Onde:
- http://chart.apis.google.com/chart? é a localização da API do Google Chart;
- & separa os parâmetros;
- chs=450x200 é o tamanho do gráfico em pixels;
- chd=t:50,30,15,5 são os dados do gráfico;
- cht=p3 é o tipo de gráfico;
- chtt=Grafico+de+Distro|mais+utilizada é o título do gráfico (não pode conter espaços | quebra linha e + dá espaço);
- chco=ff0000|8B7765|7B68EE|00FF00 são as cores equivalentes a cada parâmetro passado;
- chdl=50+Ubuntu|30+Slackware|15+Kurumin|5+Outros são os parâmetros da legenda.
Existem outras inúmeras possibilidades para construir gráficos, é importante ressaltar que todos os parâmetros passados podem ser escritos dinamicamente com o PHP. Deve-se ter cuidado com os espaços, pois os mesmos não devem existir na string. Outro grande segredo é sempre separar os parâmetros com &.