Pesquisa por: google
Trabalhando com gráficos Chart
api, chart, google, gráfico, relatório
13 de agosto de 2009 21:49325 visitas
O Google possui uma API para gerar gráficos de forma dinâmica. Para mais detalhes, a documentação da API está disponível no endereço http://chart.apis.google.com/
Neste artigo, estarei explicando de uma maneira básica o funcionamento de alguns gráficos, que particularmente estou utilizando bastante na criação de relatórios. Com o tempo, você irá acostumar com a codificação e ganhará tempo, bastando consultar diretamente tal documentação da API.
Gráficos do tipo pizza
Para criar o gráfico abaixo, abra a URL a seguir:
http://chart.apis.google.com/chart?cht=p3&chtt=Servidores&chd=t:25,40,20,15&chs=450x200&chl=ASP|PHP|.Net|JS
Onde:
cht=p3 tipo do gráfico (p: pizza normal - p3: pizza tridimensional)
chtt título do gráfico
chd=t: valores do gráfico, separados por "|"
chs tamanho do gráfico, no formato largura x altura
chl rótulos do gráfico, separados por "|"
Podemos complementar o gráfico adicionando mais parâmetros:
http://chart.apis.google.com/chart?cht=p3&chtt=Servidores&chd=t:25,40,20,15&chs=450x200&chl=ASP|PHP|.Net|JS&chco=ff0000,00ff00,0000ff,555555
Onde:
chco Cor de cada valor no gráfico, no formato hexadecimal (html), separados por ","
*Nota: Na ocasião de suprimir algum valor do parâmetro, os posteriores irão adotar uma cor do mesmo gradiente de cores.
Diagrama de Venn - tipo bolha
Este tipo de gráfico é utilizado para comparar a grandeza entre 3 valores. Ao tentar citar mais de 3 valores, o excedente será ignorado. Para visualizar o gráfico a seguir, abra a URL abaixo:
http://chart.apis.google.com/chart?cht=v&chd=t:70,50,30,5,10,5,0&chs=250x200&chco=ff0000,00ff00,0000ff
Onde:
cht=v tipo do gráfico (venn)
chd=t: [tamanho A],[tamanho B],[tamanho C],[aproximação A+B],[aproximação A+C],[aproximação B+C],[Centralização A+B+C]
chs tamanho do gráfico, no formato largura x altura
chco cor de cada valor no gráfico, no formato hexadecimal (html), separados por ","
Complementando o gráfico com legenda:
http://chart.apis.google.com/chart?cht=v&chd=t:70,50,30,5,10,5,0&chs=250x200&chco=ff0000,00ff00,0000ff&chdl=ASP|PHP|.Net
Onde:
chdl Legenda dos valores, separados por "|"
Gráficos de linha
Este tipo de gráfico é um dos mais utilizados para criação de relatório. Consiste em dois eixos, X e Y. Segue o exemplo a seguir:
http://chart.apis.google.com/chart?cht=lc&chs=200x125&chd=t:5,15,10,20,40
Onde:
cht=lc tipo do gráfico (linha)
chs tamanho do gráfico
chd=t: ponto de valores, separados por ","
Podemos complementar o gráfico da seguinte maneira: adicionando rótulos no eixo x e y.
http://chart.apis.google.com/chart?cht=lc&chs=200x125&chxt=x,y&chd=t:5,15,10,20,40&chxl=0:|0|1|2|3|4|6|7|8|
Onde:
chxt habilita os eixos X e Y
chxl=0: exibe a escala no eixo x
chxl...1: exibe a escala no eixo y
*Nota: o eixo Y irá sempre adotar 100 como valor máximo.
Adicionar linhas de grade
http://chart.apis.google.com/chart?cht=lc&chs=400x250&chxt=x,y&chd=t:5,15,10,20,40&chxl=0:|0|1|2|3|4|6|7|8|9|10|1:|0|25|50|75|100&chg=10,25,1,2
Onde:
chg [passo do eixo x],[passo do eixo y],[tamanho do tracejado],[intensidade. 0: linha sólida - 5: linha tracejada]
Dica: Para obter uma melhor orientação nas linhas de grade, procure adotar no passo do eixo x, um valor da seguinte maneira: (100/(quantidade de rótulos - eixo x))
Adicionando mais uma linha
http://chart.apis.google.com/chart?cht=lc&chs=400x250&chxt=x,y&chd=t:5,15,10,20,40|15,10,50,30,10&chxl=0:|0|1|2|3|4|6|7|8|9|10|1:|0|25|50|75|100&chg=10,25,1,2
Onde:
chd=t: ponto de valores, separados por "," e sucessivamente por "|", de forma a separar os valores de ambas as linhas
Alterando a cor das linhas:
http://chart.apis.google.com/chart?cht=lc&chs=400x250&chxt=x,y&chd=t:5,15,10,20,40|15,10,50,30,10&chxl=0:|0|1|2|3|4|6|7|8|9|10|1:|0|25|50|75|100&chg=10,25,1,2&chco=990000,000099
Onde:
chco Cor de cada valor no gráfico, no formato hexadecimal (html), separados por ","
Inserindo legenda:
http://chart.apis.google.com/chart?cht=lc&chs=400x250&chxt=x,y&chd=t:5,15,10,20,40|15,10,50,30,10&chxl=0:|0|1|2|3|4|6|7|8|9|10|1:|0|25|50|75|100&chg=10,25,1,2&chco=990000,000099&chdl=ASP|PHP
Onde:
chdl Legenda de cada linha, separados por "|"
Estes foram apenas alguns gráficos que costumo utilizar. Consulte a documentação para obter um melhor gama de opções e diversidade de gráficos.
Graças à esta API, resolvi abandonar meus próprios chart desenvolvidos em c#, pois consumia muito processamento e não tem tanta opção igual à estas aqui.
A seguir, alguns exemplos que eu ainda não utilizei, mas ajuda na hora de você apresentar um relatório na sua empresa :-)
http://chart.apis.google.com/chart?chs=225x125&cht=gom&chd=t:70&chl=Hello
http://chart.apis.google.com/chart?cht=lc&chs=200x125&chd=s:ATSTaVd21981uocA&chco=224499&chxt=x,y&chxl=0:|Sep|Oct|Nov|Dec|1:||50|100&chm=B,76A4FB,0,0,0
http://chart.apis.google.com/chart?cht=lc&chd=s:pqokeYONOMEBAKPOQVTXZdecaZcglprqxuux393ztpoonkeggjp&chco=FF0000&chls=4.0,3.0,0.0&chs=200x125&chxt=x,y&chxl=0:|Jun|July|Aug|1:||20|30|40|50&chf=bg,s,efefef
http://chart.apis.google.com/chart?cht=bvs&chd=s:YUVmw1&chco=0000FF&chs=180x150&chtt=Site+visitors&chts=0000FF,20&chbh=22,4
http://chart.apis.google.com/chart?cht=bhg&chs=200x125&chd=s:elg,ors&chbh=10,15&chco=cc0000,00aa00http://chart.apis.google.com/chart?cht=bhg&chs=200x125&chd=s:elg,ors&chbh=10,15&chco=cc0000,00aa00
http://chart.apis.google.com/chart?cht=bvg&chs=200x125&chco=cc0000,00aa00&chd=t:30,-60,50,120,80&chds=-80,140
http://chart.apis.google.com/chart?cht=bvg&chbh=5,2&chm=B,C6D9FD,0,0,0|D,4D89F9,0,0,5,1&chbh=20&chs=200x150&chd=s:1XQbnf4&chco=76A4FB
http://chart.apis.google.com/chart?cht=ls&chs=200x125&chd=s:foeZ9Gat,lkjtf3asv&chm=D,C6D9FD,1,0,8|D,4D89F9,0,0,4
Renomeando páginas e mantendo o Pagerank
google, http 301, pagerank, seo, url amigável
28 de julho de 2009 06:49101 visitas
Estes dias estou trabalhando um pouco sobre URLs amigáveis no site do Instituto Chiavenato, onde resolvi fazer algumas mudanças da seguinte forma:
O endereço www.chiavenato.com/publicacoes/ possui uma relação de livros do autor Idalberto Chiavenato.
O endereço www.chiavenato.com/publicacoes/566/empreendedorismo-dando-asas-ao-espirito-empreendedor/ é um livro escrito por Idalberto Chiavenato, e tal URL está linkada dentro de /publicacoes/.
Porém, de acordo com a hierarquia, este modo está errado, uma vez que ao informar a URL /publicacoes/566/, o site irá parar em uma página de erro, tornando desconfortável e a navegação perdida, além do número ser uma id interna para consulta no banco de dados, o que não quer dizer nada em termos de navegação.
A minha solução encontrada foi renomear o caminho para www.chiavenato.com/publicacoes/empreendedorismo-dando-asas-ao-espirito-empreendedor-566.html.
Resultados:
- O destino é um arquivo html, localizado exatamente dentro do diretório /publicacoes/ (lógico que isso é um RewriteRule!);
- A hierarquiva de navegação agora está exata; tal URL é uma publicação e está dentro do diretório /publicacoes/;
- O id da página foi para o final, dando preferência ao termo empreendedorismo-dando-asas-ao-espirito-empreendedor, dando mais ênfase ao conteúdo da página.
Problema:
Como fazer então para que uma URL seja renomeada e se mantenha no topo do ranking do Google, igual a imagem abaixo?
A solução que tive que fazer é esta aqui: ir até o arquivo na qual localiza a URL antiga e inserir o seguinte código:
<% Response.Status="301 Moved Permanently"
Response.AddHeader "Location","/publicacoes/empreendedorismo-dando-asas-ao-espirito-empreendedor-566.html" %>
Este método é conhecido como http 301 (redirecionamento permanente). Sendo assim, quando for abrir a URL antiga, o navegador irá ser redirecionado para outra página, e o melhor, o PageRank do Google irá manter-se igual, além dos resultados já apontarem para a nova URL, como uma outra publicação do site, citado na figura abaixo:
Um detalhe: esta mudança não tem nem 24 horas até o momento que postei este artigo, e tal URL já foi alterada.
Se você estiver programando em ASP.Net:
<script runat="server">
private void Page_Load(object sender, System.EventArgs e)
{
Response.Status = "301 Moved Permanently";
Response.AddHeader("Location", "/publicacoes/empreendedorismo-dando-asas-ao-espirito-empreendedor-566.html");
}
</script>
Se você estiver programando em PHP:
<?php
header("HTTP/1.1 301 Moved Permanently");
header("Location: /publicacoes/empreendedorismo-dando-asas-ao-espirito-empreendedor-566.html");
exit();
?>
Monte um sitemap.xml dinâmico
bing, google, indexação, seo, sitemap.xml, yahoo
26 de julho de 2009 14:11361 visitas
Um bom mapa do site (sitemap.xml) armazena TODAS as urls de seu site, de modo que algum motor de busca (Google, Bing Yahoo!, etc) possa acessar tal arquivo e localizar quais páginas de seu site estará visível em alguma busca.
O meu mapa do site atual é este aqui:
<?xml version="1.0" encoding="utf-8"?>
<!-- Autor="Leonardo Breda"-->
<!-- Gerador="http://www.leobreda.net"-->
<!-- Paginas encontradas: "71"-->
<urlset xmlns="http://www.google.com/schemas/sitemap/0.84">
<url>
<loc>http://www.leobreda.net/</loc>
</url>
<url>
<loc>http://www.leobreda.net/artigos/</loc>
</url>
<url>
<loc>http://www.leobreda.net/artigos/asp-evitando-o-codigo-spaghetti-13.html</loc>
</url>
<url>
<loc>http://www.leobreda.net/artigos/criando-urls-amigaveis-20.html</loc>
</url>
<url>
<loc>http://www.leobreda.net/artigos/desativando-programas-na-inicializacao-do-windows-15.html</loc>
</url>
<url>
<loc>http://www.leobreda.net/contato.html</loc>
</url>
<url>
<loc>http://www.leobreda.net/curriculum.html</loc>
</url>
<url>
<loc>http://www.leobreda.net/game-design.html</loc>
</url>
<url>
<loc>http://www.leobreda.net/tags/ajax.html</loc>
</url>
<url>
<loc>http://www.leobreda.net/tags/asp.html</loc>
</url>
<url>
<loc>http://www.leobreda.net/tags/aspnet.html</loc>
</url>
<url>
<loc>http://www.leobreda.net/tags/banco-de-dados.html</loc>
</url>
<url>
<loc>http://www.leobreda.net/tags/google.html</loc>
</url>
<url>
<loc>http://www.leobreda.net/tags/seo.html</loc>
</url>
<url>
<loc>http://www.leobreda.net/tags/serverhtmlencode.html</loc>
</url>
</urlset>
Instruções
1. Seu site deverá ter suporte ao componente MOD REWRITE, com a seguinte regra no arquivo .htaccess (ou httpd.ini):
RewriteRule ^/sitemap.xml$ /sitemap.xml.asp
2. É necessário um Banco de Dados (Ms. SQL ou MySQL) para armazenar os endereços de seu site. Como o MySQL é gratuito e todos os servidores possuem este acesso:
CREATE TABLE TB_SITEMAP
(
SITEMAP_COD INT AUTO_INCREMENT,
URL VARCHAR(200),
PRIMARY KEY (SITEMAP_COD)
);
3. Abra TODAS as URLS de seu site e insira o seguinte código. Se você utiliza INCLUDES, Classes, melhor ainda!
<%
PAGINA_URL = Replace(request.ServerVariables("HTTP_X_REWRITE_URL"), "'", "''")
strSQL = "SELECT SITEMAP_COD FROM TB_SITEMAP WHERE URL='" & PAGINA_URL & "'"
call abreConexao : set objRecordset=createObject("ADODB.Recordset") : objRecordset.Open strSQL, objConexao
if objRecordset.EOF Then
objRecordset.Close : set objrecordset=Nothing : call fechaConexao
strSQL = "INSERT INTO TB_SITEMAP (URL) VALUES ('" & PAGINA_URL & "')"
Else
objRecordset.Close : set objrecordset=Nothing : call call fechaConexao
End If
4. Crie um arquivo chamado sitemap.xml.asp...
<%
response.ContentType="text/xml"
strSQL="SELECT URL FROM TB_SITEMAP ORDER BY URL"
call abreConexao: set obJRecordset=createObject("ADODB.Recordset") : objRecordset.cursorLocation=3 : objRecordset.Open strSQL, objConexao
i=0
Redim SITEMAP(objRecordset.RecordCount-1)
while NOT objRecordset.EOF
SITEMAP(i) = objRecordset("URL")
i=i+1
objRecordset.moveNext : wend : objRecordset.Close : set objRecordset=Nothing : call fechaConexao
%><?xml version="1.0" encoding="utf-8"?>
<!-- Autor="Leonardo Breda"-->
<!-- Gerador="http://www.leobreda.net"-->
<!-- Paginas encontradas: "<%=uBound(SITEMAP)+1%>"-->
<urlset xmlns="http://www.google.com/schemas/sitemap/0.84">
<%for i=0 to uBound(SITEMAP)%>
<url>
<loc>http://<%=Servervariables("HTTP_HOST")%>/<%=server.HTMLEncode(SITEMAP(i))%></loc>
</url>
<%next : erase SITEMAP%>
</urlset>
5. Rode algumas páginas, e agora acesse o arquivo sitemap.xml, verificando se indexou corretamente suas URLs...
Quanto ao meu site, possuo um painel de controle na qual posso gerenciar todo o meu sitemap da seguinte maneira:
Quando a estrela está cinza, significa que tal url não será publicada no sitemap; clico em tal estrela, e via Ajax, a url é publicada, além da estrela mudar de cor.
Ao clicar na imagem X em vermelho, posso excluir tal url do índice. Personalizando desta maneira, não há necessidade de ir manualmente no banco de dados e deletar tal registro.