Criando Gráficos Dinamicamente com Ajax e XML

Já usa Ajax há muito tempo? Usa o responseText? Então você não sabe o que está perdendo! Como vocês sabem o Ajax não foi feito para substituir o HTML, o termo já diz Hipertexto, links levam à páginas com mais links que levam a outras páginas com… Tá bom tem 2 artigos do Micox ou do Júlio que explicam tudo isso. Então como estava falando o Ajax e o XML te levam à outros horizontes, vou dessa vez, ensinar a criar um grafico, interpretando um arquivo XML, não importa de onde venha, de outro servidor via webservices(depois…) ou de seu próprio servidor (muito útil para modificações futuras), não estruturarei com XSLT, vai ser só Js mesmo. Bom aqui está o exemplo, foi feito em PHP e Js-Ajax, mude os valores.

Conhecendo esse tal de XML

XML não é nada mais que um arquivo parecido com o HTML, mas aonde você pode usar e criar suas próprias tags, mas atenção, não podemos errar, tags tem que ser obrigatoriamente fechadas, para um XML ser válido ele não pode conter erros, daí que vem XHTML. Ele foi criado pela W3C para que fosse o padrão de comunicação na Web, principalmente entre Maquinas, saiba mais lá na Wikipédia ou vá até esse post do Júlio que explica bem o início.

Pulando esse mero paragrafo aí de cima, vamos à prática. O XML que receberemos e interpretaremos contém dados para serem transformados em um simples gráfico, basea-se em categorias e items, que serão, no exemplo debaixo, fabricantes de carros.

<dados> <categoria> <name>Audi</name> <item value="70">Performance</item> <item value="60">Peso</item> <item value="60">Preço</item> </categoria> <categoria> <name>Ferrari</name> <item value="95">Performance</item> <item value="90">Peso</item> <item value="20">Preço</item> </categoria> <categoria> <name>Chevrolet</name> <item value="50">Performance</item> <item value="60">Peso</item> <item value="80">Preço</item> </categoria> </dados>

O que será feito

A partir desse XML criaremos um 3 gráficos de coluna horizontal simples, aonde cada categoria conterá um grafico que será montado sob um <fielset>. Dentro do <fielset> terá as barras, e essas vão ser <div>s.

Interpretando com Javascript

Não são todos os browsers que suportam XML, e nem todos que suportam parsing de XML, mas não utilizaremos demais metodos DOM, utilizaremos somente o básico e simples.

Os items foram preenchidos a pressa portanto sem discussões. Agora a partir desse XML criaremos o tal do Gráfico, feita a requisição Ajax, você recebera o XML via "responseXML" parecido com isso "xml = xmlhttp.responseXML", aonde "xmlhttp" é o seu objeto XMLHttpRequest. Repare na árvore XML, o que vem primeiro é o objeto <dados> e dentro dele se distribuem 3 objetos <categoria> aonde dentro de cada um há um objeto <name> e mais outros 3 <item>. O <name> poderia ser substituido por um atributo na tag <categoria> mas coloquei assim para enfatizar a liberdade se criar tags próprias. Como os dados não contém tags HTML, não usei o CDATA, se você não sabe o que significa deixemos de lado e continuemos.

Apos receber o objeto como sendo uma estrutura XML e não somente uma string de texto, utilizaremos DOM para manipular, aqui não utilizaremos todos os conceitos como tipos de nodo, próximo irmão, pai etc., só os básicos. Já descrevi a estrutura e árvore do nosso arquivo XML né? Intão agora é chegar aos elementos:

1 var border_text="#333333"; 2 var background="#CCCCCF"; 3 var categorias=xml.getElementsByTagName("dados")[0].getElementsByTagName("categoria"); 4 var theBody = document.getElementsByTagName("body")[0]; 5 var notas = document.createElement("div");

Aí temos a cor da borda e do texto de cada barra do nosso gráfico, elementos de estilo, e depois pegamos o <body> do HTML, e criamos uma Div, isso tudo para depois criarmos o nosso gráfico. Dispensando isso e voltando à arvore XML, atente à linha em negrito ela consiste em um array contendo todos os elementos categoria. Vamos navegar por esse array para pegar os elementos de dentro.

6 for(var i=0; i<categorias.length; i++)

Dentro desse for teremos como manipular cada elemento de dentro de cada elemento <categoria>. Como cada categoria só tem um nome, pegaremos o valor desse nome como descrito abaixo. Lembre-se não utilize innerHTML, cada elemento é um nodo, um texto é um elemento nodo de tipo 3 e então nosso texto é o primeiro filho de <name>.

7 var itens=categorias[i].getElementsByTagName("item"); 8 var name=categorias[i].getElementsByTagName("name")[0].firstChild.nodeValue; 9 var categoria=document.createElement("fieldset"); 10 categoria.innerHTML="<legend>"+name+"</legend>";

Agora precisaremos pegar o elemento <item> é isso que fazemos na primeira linha em negrito, depois pegamos o 1º e único <name>. Criamos o fielset do nosso gráfico e colocamos uma legend a ele. Como cada categoria tem vários items deveremos de novo navegar utilizando-se do for.

11 for(var n=0; n<itens.length; n++) 12 {var itemName=itens[n].firstChild.nodeValue; 13 var itemLength=itens[n].getAttribute('value'); 14 var itemDiv=document.createElement("div");

Nesse for pegamos o nome de cada item e o seu valor que será o comprimento de cada barra do nosso gráfico. Criamos a DIV que será a barra. Agora iremos estiliza-lá e colocar todos os elementos criados no documento HTML.

15 itemDiv.style.border="1px solid "+border_text; 16 itemDiv.style.backgroundColor=background; 17 itemDiv.style.width=itemLength+"%"; 18 itemDiv.style.margin="5px"; 19 itemDiv.style.padding="2px"; 20 itemDiv.style.color=border_text; 21 itemDiv.innerHTML=itemName+" - "+itemLength; 22 categoria.appendChild(itemDiv);} 23 notas.appendChild(categoria);} 24 conteudo.innerHTML=""; 25 conteudo.appendChild(notas);}

Lembra daquelas variáveis no ínicio, o "border_text" e o "background", agora iremos utiliza-lás, não explicarei as propriedades de estilos aplicadas, pode se também estilizar isso em um arquivo externo. Depois da regra de estilo, nós colocamos cada item no elemento categoria e colocamos o elemento categoria no elemento notas(que seráo gráfico). O elemento que está na variável "conteudo" é aonde colocaremos o gráfico, pode ser aonde você quiser, zeramos o interior de conteúdo e colocamos nosso gráfico lá.

É isso, espero que tenham gostado, apartir desse simples tutorial produzimos um gráfico apartir de um arquivo XML (parece SVG não?!) em Javascript com tecnicas simples, veja ele aqui, nesse arquivo o XML é gerado dinamicamente em PHP dependendo dos valores passados.

Como podem ver isso pode ser muito útil para criar gráficos de notas, de benchmarks, tudo dinamico, diretamente ao inserir os dados, isso é um bom uso do Ajax!

Anúncios

15 Responses to Criando Gráficos Dinamicamente com Ajax e XML

  1. JulioGreff disse:

    Gostei. Não havia pensado nisso ainda. Já sei até onde usar… Aguardem-me, hahahahaha (risada de alguém que quer conquistar o mundo). Parabéns, Bernardo. Muito bom.

  2. […] Update: o Bernardo fez um ótimo post sobre criar gráficos através de XML e Ajax. Lá tem mais umas vagas informações que não foram passadas aqui, leia lá! […]

  3. […] Link: Criando Gráficos Dinamicamente com Ajax e XML […]

  4. Micox disse:

    Há. Muito bom Bernardo. Vou linkar lá no meu tuto este exemplo também.

  5. Opa vlw Micox! Já tinha visto tava sem tempo di agradecer. Vlw!

  6. […] o Bernardo fez um ótimo post sobre criar gráficos através de XML e Ajax. Lá tem mais umas vagas […]

  7. Rosemeire disse:

    Muito bom o artigo!
    Preciso de um help… fiz um exemplo simples sugerido pelo Micox, no seu artigo: Trabalhando com XML usando Javascript. O problema é que não está funcionando… a função que retorna o xml pra mim está retornando vazia… Alguém sabe me dizer pq?

    Obrigada pela atenção!

  8. Everson disse:

    Mas e se eu quiser utilizar o xml de outro site? O objeto XMLHttpRequest não faz requisição em outro domínio.

  9. Não, o objeto em si não, mas fazer isso é muito simples. Dá uma olhada no post do Júlio.

  10. Boa noite! não consigo passar comunicação de xml. Porque o programa pede porta e outros elementos, estou trabalhando com o tiss e ele abre somente com o java ja instalei os dois, mais não não tem transmição com a operadora que é a capsesp, por favor mim ajude uma vez que vc é a minha esperança pois necessito de emprego que estou trabalhando. um muito obrigado.

  11. […] o Bernardo fez um ótimo post sobre criar gráficos através de XML e Ajax. Lá tem mais umas vagas […]

  12. […] fazer requisições síncronas e assíncronas. Esse XML pode ser usado de diversas maneiras: criar um gráfico, importar informações para uma aplicação, e, talvez no futuro, importar SVG direto no […]

  13. Wedla disse:

    Olá, gostei muito do tutorial, mas fiquei com uma pequena dúvida. O gráfico funciona corretamente para o navegador Firefox, já com o IE ou o Google Chrome a página ficou vazia, branca, sem nada.

    A atribuição do objeto independente do navegador foi feita. Logo, não poderia ser esse o problema. Então, eu gostaria de saber – primeiramente perdão por “desenterrar” o post – qual seria o problema que está causando isso.

    É que sou iniciante em AJAX, logo essas pequenas coisas ainda me deixam em dúvida.

    Fico grata pela atenção

  14. Cara, era isso que eu precisava.
    Muito bom tutorial, parabéns.

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s

%d blogueiros gostam disto: