Os gráficos de barras seguem exatamente a mesma mecânica dos gráficos pizza, ou seja, você deve fazer a chamada à URL da API passando todos os parâmetros desejados e receberá como retorno a imagem do gráfico pronta para ser inserida na sua página. Veja o exemplo de um gráfico de barras verticais e os parâmetros usados para criá-lo:

<img src="http://chart.apis.google.com/chart?cht=bvs&chxt=x,y&chd=t:20,40,60,80,30&chco=76A4FB&chs=200x125&chxl=0:|Jan|Fev|Mar|Abr|Mai" />

As principais características do exemplo que acabei de criar são: ele é um gráfico de barras verticais, com 2 eixos visíveis (20, 40,… e Jan, Fev,…) e tem 180 x 150 pixels. Essas características foram passadas à API usando estes parâmetros:
Tipo cht=bvs – informa que quero um gáfico de barras verticais;
Eixos chxt=x,y – significa que quero os eixos X e Y visíveis;
Dados chd=t:20,40,60,80,30 – os dados;
Cor chco=76A4FB – mostra que desejo apenas uma cor;
Tamanho chs=200×125 – define o tamanho da imagem;
Labels chxl=0:|Jan|Fev|Mar|Abr|Mai – informo as labels do eixo X (0);

Alterando valores e escala

Por default o eixo vertical vai sempre de 0 a 100, então quando editar os valores do gráfico e quiser que o eixo fique abaixo ou acima desses valores você deverá usar a escala. Por exemplo, se eu tenho um gráfico onde o valor mais alto é 41% não há necessidade do meu gráfico exibir valores até 100, veja abaixo a diferença entre os dois exemplos:

<img src="http://chart.apis.google.com/chart?cht=bvs&chxt=x,y&chd=t:12,22,26,35,41&chco=fa432a&chs=180x150&chxl=0:|Jan|Fev|Mar|Abr|Mai" />
<img src="http://chart.apis.google.com/chart?cht=bvs&chxt=x,y&chd=t:12,22,26,35,41&chco=fa432a&chs=180x150&chxl=0:|Jan|Fev|Mar|Abr|Mai &chxr=1,0,50&chds=0,50" />

Perceba que no segundo gráfico usei 2 parâmetros a mais, que indicam que quero uma escala diferente da default:
Eixo chxr=1,0,50 – define o eixo Y em 0 a 50;
Escala chds=0,50 – define a escala de 0 a 50;

Definindo 2 ou mais séries

Um gráfico de barras pode ter mais de uma série de dados em cada intervalo o que muitas vezes se faz necessário. Tudo o que você tem que fazer é passar os valores de cada série separados por “|” e definir o tipo de gráfico para bvg (cht=bvg). Veja os exemplos abaixo e compare suas URLs:

<img src="http://chart.apis.google.com/chart?cht=bvg&chxt=x,y&chd=t:12,22,26,35,41|20,40,60,80,30&chco=fa432a,76A4FB&chs=320x150& chxl=0:|Jan|Fev|Mar|Abr|Mai" />
<img src="http://chart.apis.google.com/chart?cht=bvg&chxt=x,y&chd=t:12,22,26,35|15,26,33,34|25,40,34,12&chco=fa432a,76A4FB,faae2a &chs=370x150&chxl=0:|Jan|Fev|Mar|Abr&chxr=1,0,50&chds=0,50" />

Note também que foi definida uma cor para cada série através do mesmo parâmetro chco que já havíamos usado, mas agora com as cores separadas por vírgula. Você pode usar quantas séries desejar em cada gráfico, basta tomar cuidado para que o seu tamanho comporte todas as barras.

Legendas e grids

Para uma melhor visualização das informações dos gráficos quase sempre é necessário que usemos um grid por trás das barras, que facilitará a comparação entre elas, e claro uma legenda para informar melhor o visualizador. Para tanto basta usar outros dois parâmetros bem simples: chg para adicionar grids e chdl para legendas. O primeiro aceita 4 parâmetros principais: o intervalo entre grids do eixo X, intervalo para o eixo Y, largura do traço, espaço entre os traços. O segundo aceita como parâmetro o texto das legendas separados por |. Veja o exemplo:

<img src="http://chart.apis.google.com/chart?cht=bvg&chxt=x,y&chd=t:12,22,26,35|15,26,33,34|25,40,34,12&chco=fa432a,76A4FB,faae2a &chs=450x200&chxl=0:|Jan|Fev|Mar|Abr&chxr=1,0,50&chds=0,50&chg=25,25&chdl=China|EUA|Alemanha" />

Largura e espaçamento das barras

Muitas vezes por conta de espaço ou por falta dele, será necessário fazer algumas adaptações nos tamanhos do gráfico. Um dos truques que ajuda nesse processo é alterar a largura e espaçamento entre as colunas e séries de colunas. Podemos fazer isso com o parâmetro chbh, que aceita 3 parâmetros: largura das barras, espaço entre barras, espaço entre os grupos de barras (séries). Veja os exemplos:

<img src="http://chart.apis.google.com/chart?cht=bvg&chxt=x,y&chd=t:12,22,26,35|15,26,33,34|25,40,34,12&chco=fa432a,76A4FB,faae2a& chs=205x200&chxl=0:|Jan|Fev|Mar|Abr&chxr=1,0,50&chds=0,50&chg=25,25&chdl=China|EUA|Alemanha &chbh=5,1,10" />
<img src="http://chart.apis.google.com/chart?cht=bvg&chxt=x,y&chd=t:12,22,26,35|15,26,33,34|25,40,34,12&chco=fa432a,76A4FB,faae2a& chs=445x200&chxl=0:|Jan|Fev|Mar|Abr&chxr=1,0,50&chds=0,50&chg=25,25&chdl=China|EUA|Alemanha &chbh=25,1,10" />

Conclusão

Mesmo com exemplos bastante simples e passagem bem rápida apenas pelos principais parâmetros da Chart API, fica claro que o seu potencial de utilização pode envolver desde posts simples em um blog até a integração com sistemas de informação que necessitem oferecer uma melhor visualização de dados. Se você ficou interessado, recomendo fortemente que visite a página da API e sua documentação pois há dezenas de outras possibilidades de customização para os gráficos.

QR Codes com links

Uma das maneiras mais comuns de utilização de QR Codes é o direcionamento do usuário para o site de uma promoção ou produto através de um link. Para isso basta criar o código contendo o link para onde desejamos enviar o usuário. Por exemplo, para gerar um QR Code com link para o Top rated basta usar esta URL:

http://chart.apis.google.com/chart?chs=200x200&cht=qr&chld=|0&chl=http://www.toprated.com.br

Ao lado a imagem gerada. Entenda como montei essa URL:

http://chart.apis.google.com/chart? é o endereço padrão da API;

chs=200×200 informa o tamanho da imagem que eu desejo, 200×200px;

cht=qr informa o tipo de saída que eu espero, QR Code;

chld=|0 retira as margens (bordas) da imagem;

chl=http://www.toprated.com.br e aqui eu informo o texto que quero.

A grande maioria dos leitores de QR Code identifica automaticamente este texto como sendo um link e direciona o usuário para a página.

QR Codes com frases, senhas e outras informações

Outra utilidade dos QR Codes é servir para passar textos ou frases curtas para os usuários. Por exemplo, vamos supor que eu queira espalhar pela minha loja QR Codes com dicas de produtos em promoção para que meus clientes possam explorar:

http://chart.apis.google.com/chart?chs=200x200&cht=qr&chld=|0&chl=tv de plasma R$ 1499

Ao usar o leitor do seu celular para decifrar o código ao lado, o cliente encontrará a seguinte frase: TV de plasma R$1499. A URL é exatamente igual à do exemplo anterior, só muda o texto do final.

Como dá pra perceber, esta é uma ferramenta muito interessante para estimular a interação com seus consumidores e usuários, que pode ainda ser usada para vários tipos de ações diferentes. Além disso com a constante queda de preço de celulares com suporte aos leitores de QR Code, cada vez mais pessoas terão acesso a esse tipo de tecnologia. Vale a pena começar a pensar nos QR Codes como uma boa opção de comunicação.

A Chart API

A API do Google Chart Tools, também conhecida como Chart API, é a caçula do projeto Google Visualization que também engloba a ferramenta Interactive Charts, um pouco (bem pouco) mais complexa. Sua principal vantagem é a simplicidade, já que tudo o que você precisa fazer para usá-la é uma chamada para sua URL enviando os dados do gráfico via query string. A chamada retornará a imagem do gráfico. Por exemplo, veja como fica a URL para criação de um gráfico de barras simples e a imagem resultante:

<img src="http://chart.apis.google.com/chart?chxt=x,y&cht=bvs&chd=t:60,70,85,65,40&chco=76A4FB&chls=2.0&chs=180x150
&chxl=0:|Jan|Fev|Mar|Abr|Mai" alt="" />

Note que a imagem já vem com o gráfico pronto, com os eixos, labels (Jan, Fev, etc..) e barras. Perceba também que a altura e largura da imagem são definidas na própria URL, nesse caso 180×150. Você só precisa posicioná-la na sua página como uma imagem comum.
A mesma API pode ser usada para criar vários tipos de gráficos: barras, pizza, linhas, candlestick, etc.. Como não quero reescrever a documentação da API e sim dar uma introdução, vou mostrar aqui como criar gráficos pizza e de barras, que acredito serem os mais comuns.

Gráficos Pizza

O primeiro tipo de gráfico que vou mostrar é o do tipo Pizza. Como em todos os outros, o segredo para criar um bom gráfico é saber quais os parâmetros certos devemos passar para a API. Os principais são os do tipo de gráfico (cht), de dados (chd) e de tamanho (chs). Veja o exemplo de um gráfico usando apenas esses 3 parâmetros:

<img src="http://chart.apis.google.com/chart?cht=p&chd=t:45,20,20,15&chs=180x125" class="alignleft" />

No exemplo ao lado foram usados os seguintes parâmetros:
Tipo: cht=p – significa que quero um gráfico pizza (p);
Dados: chd=t:45,20,20,15 – envio os dados em formato texto (t) separados por vírgula;
Tamanho: chs=180×125 – indico o tamanho da imagem, 180×125;

Adicionando labels e legendas

Claro que apenas o gráfico, sem nenhuma indicação de valores ou legenda, não é lá muito útil já que dificilmente alguém vai conseguir entender e analisar os dados. Então é hora de começar a melhorar o gráfico. Para isso podemos usar 2 boas opções: labels e legendas. Com elas o gráfico vai ficar bem melhor.
Mais uma vez, tudo o que você precisa fazer é adicionar os parâmetros corretos, as labels usam o parâmetro chl e as legendas usam o parâmetro chdl. Veja então como fica o gráfico, agora com legendas e labels:

<img src="http://chart.apis.google.com/chart?cht=p&chd=t:45,20,20,15&chs=380x250&chl=45%|20%|20%|15%&chdl=Janeiro|Fevereiro|Março|Abril" alt="" />

Esse é exatamente o mesmo gráfico anterior, agora com os seguintes parâmetros:
Tipo: cht=p – gráfico pizza (p);
Dados: chd=t:45,20,20,15 – os dados;
Tamanho: chs=380×250 – o tamanho;
Labels: chl=45%|20%|20%|15% – labels;
Legendas: chdl=Janeiro|Fevereiro|Março|Abril – legendas;

Usando 3D

E se você quiser apresentar o seu gráfico em 3D basta fazer uma pequena alteração, trocando tipo de gráfico de pizza (p) para pizza 3D (p3). Realmente não podia ser mais fácil, veja como fica o gráfico anterior agora em 3D:

<img src="http://chart.apis.google.com/chart?cht=p3&chd=t:45,20,20,15&chs=480x200&chl=45%|20%|20%|15%&chdl=Janeiro|Fevereiro|Março|Abril" alt="" />

Olhe a URL da imagem e note que ela é praticamente a mesma do exemplo anterior, as únicas diferenças são no parâmetro cht, que agora pede um gráfico 3D (p3) e no tamanho do gráfico.

Customizando as cores

Existem três maneiras diferentes para customizar as cores de um gráfico mas todas elas usam o mesmo parâmetro chco. A diferença está na quantidade de cores que eu passo para esse parâmetro.

Usando uma cor

A primeira forma de definir as cores do gráfico é escolher uma cor base que será usada com intensidade gradual afim de diferenciar cada uma das áreas do gráfico. É exatamente como vínha fazendo antes, porém estava usando a cor default do gráfico (amarelo), mas eu posso escolher a cor de base, por exemplo:

<img src="http://chart.apis.google.com/chart?cht=p&chd=t:45,20,20,15,45,55&chs=320x200&chdl=IE6|Firefox|IE7|Chrome|Safari|Opera
&chco=c60000" alt="" />
<img src="http://chart.apis.google.com/chart?cht=p3&chd=t:45,12,20,5,20,15&chs=320x200&chdl=Corel|Adobe|Apple|Microsoft|Sun|Sony
&chco=1da3f8" alt="" />

Usando gradiente

Outra maneira de definir as cores do gráfico é usando um gradiente. Para isso basta usar o parâmetro chco para passar 2 cores diferentes, separadas por vírgulas. Seu gráfico será apresentado com as cores formando um gradiente que inicia com a primeira cor e finaliza com a segunda:

<img src="http://chart.apis.google.com/chart?cht=p&chd=t:15,23,45,20,20,15&chs=320x200&chdl=NYTimes|Le Monde|AS|Estadão|Folha de SP|LATimes&chco=c60000,1da3f8" alt="" />
<img src="http://chart.apis.google.com/chart?cht=p3&chd=t:5,32,45,20,20,15&chs=320x200&chdl=Brasil|EUA|Japão|Itália|Alemanha|China
&chco=58e015,fffc00" alt="" />

Definindo uma cor para cada valor

Por fim, é possível ainda definir uma cor para cada um dos intervalos do gráfico, para isso basta passar para o parâmetro chco cada uma das cores, seguindo a mesma ordem dos valores, separadas por “|”:

<img src="http://chart.apis.google.com/chart?cht=p&chd=t:45,20,20,15&chs=320x200&chdl=China|França|México|Brasil
&chco=c60000|1da3f8|58e015|fffc00" alt="" />
<img src="http://chart.apis.google.com/chart?cht=p3&chd=t:45,20,20,15&chs=340x200&chdl=Janeiro|Fevereiro|Março|Abril
&chl=45%|20%|20%|15%&chco=67087b|e3007a|00a8eb|79c471" alt="" />

Finalizando com background e margens

Para finalizar o seu gráfico e deixá-lo perfeito você pode ainda usar mais 2 parâmetros bem simples para definir a cor do background do gráfico e suas margens. Veja como:

Background

Se a cor de fundo de seu site não é o branco (padrão de background dos gráficos), você pode customizá-la usando o parâmetro chf. Basta passar o valor da cor desejada, precedida por bg,s, dessa maneira: chf=bg,s,dddddd;

Margens

O parâmetro que define as margens do gráfico (chma) também é bem simples, você deve passar os valores desejados em pixels, separados por vírgula, seguindo esta ordem: esquerda,direita,superior,inferior|largura_da_legenda,altura_da_legenda. Um bom exemplo seria: chma=20,20,20,30|100,20.
Abaixo um gráfico usando estes dois últimos parâmetros, de cor de fundo e de margens:

<img src="http://chart.apis.google.com/chart?cht=p3&chd=t:45,20,20,15&chs=660x300&chl=45%|20%|20%|15%&
chdl=Janeiro|Fevereiro|Mar%C3%A7o|Abril&chco=c60000|1da3f8|58e015|fffc00&chf=bg,s,dddddd&
chma=20,20,00,30|100,20" alt="" />

Conclusão

Como dá para ver nos exemplos e na quantidade de opções de customização e combinações possíveis, é claro o potencial dessa API para agilizar e facilitar a vida de quem volta e meia precisa fazer um gráfico para seus artigos, notícias e sites, ou mesmo integrar com um banco de dados para criação dinâmica dos gráficos. Além da facilidade em usar uma API já pronta e muito bem feita, temos a segurança que vem do fato dela ser uma criação do Google e ser hospedada por ele, garantindo estabilidade e quase 100% de disponibilidade. Não há limite para o número de requisições que você pode fazer por dia, o Google só pede para que você avise (chart-api-notifications@google.com) caso sua necessidade seja maior que 250.000 chamadas por dia.

Se você gostou mas acha que ainda não dá pra usar essa ferramenta por conta de alguma outra necessidade que ela não cobre, vale a pena dar uma olhada na sua documentação completa, pois o intuito aqui era apenas de dar uma introdução, existem dezenas de outras configurações possíveis.

E se bateu aquela preguiça de escrever tantos parâmetros, você pode usar o Chart Wizard, ferramenta disponibilizada pelo Google para criação de gráficos baseados nessa API. Porém, recomendo que você leia bem o tutorial e a documentação para que não precise ficar voltando ao assistente toda vez que precise de uma pequena alteração ou variação do gráfico. E claro, um desenvolvedor que se preze tem que entender o que está fazendo.

No próximo post sobre essa API vou mostrar como criar gráficos de barras.

Observação

O tamanho dos gráficos, eis o calcanhar de Aquiles da Charts API: quando usamos gráficos com mais de um elemento (labels + legendas) o sistema tem certa dificuldade em acomodá-los sem que nenhum deles seja cortado. Então algumas vezes é preciso dar “uma mãozinha” e fazer pequenos ajustes no tamanho das imagens para uma perfeita visualização. Se isso acontecer com você, tente alterar a largura ou altura do gráfico, não é difícil de resolver.

Como todas as informações são importadas do XML, editando-o você pode facilmente configurar:
• o número de linhas
• a quantidade de fotos
• o tamanho das fotos
• a perspectiva
• o tamanho da galeria
• o raio do globo
• a imagem de fundo
• a cor de fundo
• a cor das legendas
• a cor de fundo das legendas

Nenhuma biblioteca externa! É comum o uso de bibliotecas externas (como o Papervision 3D) para a criação desse tipo de galeria, mas a Globe Gallery não usa nada além das bibliotecas nativas do Flash. Ou seja, você não precisa instalar nada (além do próprio Flash CS4) para configurar e editar a galeria. Isso é ótimo para aquelas pessoas que ainda não estão familiarizadas com o uso de bibliotecas externas em AS3.

Esta galeria é ótima para quem:
» quer modificar e customizar o arquivo
» precisa de solução fácil e simples para exibir imagens de maneira criativa
» não tem conhecimento avançado de Flash

Plus!! Arquivo de ajuda completo!
Exemplos de utilização inclusos.

Veja a demo.
Faça o download!

Para fazer uma boa limpeza e otimizar seu código/conteúdo, o ideal é saber exatamente onde é possível melhorar o desempenho, ou seja, saber quais elementos demoram mais a ser carregados e assim definir quais podem ser otimizados ou até decartados.

Sabendo disso, imagine o quão útil esse relatório pode ser (usando como exemplo o site bluebus.com.br):

O relatório acima contém a lista completa de todos os elementos carregados pela página, seu peso e o tempo que levou o seu download. Também informa o peso total da página e o tempo total de download. Perfeito para iniciar um bom trabalho de otimização.

Gerando o relatório para o seu site

E é muito fácil obter um relatório assim para o seu site, são 3 passos (supondo que você já tenha o Firefox instalado):

1 – Instale o Firebug e reinicie o Firefox.
2 – Abra o Firebug pressionando F12 e Clique na aba “rede” (ou “net” se a sua versão for em inglês).
3 – Agora basta entrar no seu site normalmente, o relatório será gerado instantâneamente.

Pronto, fácil assim. Agora você pode estudar cada um dos componentes da página e otimizá-los para melhorar o desempenho do seu site. Uma dica: imagens e javascript são os vilões mais comuns.

Ajustes nas metatags description e keywords.

O website Grader analisa as metatags de descrição e palavras-chave e, se houver alguma coisa errada, exibe um aviso para que você corrija o problema. Geralmente os problemas mais comuns são o excesso de texto na descrição e o excesso de keywords, ou até a ausência dessas tags.

Estrutura de títulos ou ‘headers’.

Outro ponto interessante analisado pela ferramenta é a estrutura de títulos: H1, H2, H3, etc. É importante manter uma estrutura de títulos bem definida, usando as tags corretamente e distribuindo os títulos conforme sua relevância.

Quais palavras-chave usar?

Uma das dicas mais valiosas que você pode tirar da análise feita é a lista de palavras, baseada nas keywords encontradas no seu site, que mostra os termos que têm o maior volume de buscas e a posição em que você aparece nos resultados do Google. Assim você pode ter uma idéia melhor sobre quais palavras valem mais a pena serem trabalhadas.

Passou de ano?

O relatório também dá uma ‘nota’ para o seu site, de 0 a 100 pontos, que mostra como você se saiu quando comparado a todos os outros sites que já passaram por esta análise. Como uma parte da nota refere-se a quantidade de links externos que apontam para o seu site, nem todo o poder está nas suas mãos, mas se o seu código estiver bem feito dá pra passar de ano.


Website Grader

Basta informar a URL do site, ele te dá boas informações sobre aquele endereço: resumo, tráfego, país em que é mais acessado, pessoas associadas ao site, descrição, popularidade e número de links em serviços como Del.icio.us e Technoratti, citações na Wikipedia e até informações técnicas como o nome e o sistema do servidor onde está hospedado, CMS, IP, etc.. Bastante útil.