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!
Dezembro, 5 - 2006 às 7:51 pm |
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.
Dezembro, 5 - 2006 às 8:00 pm |
[...] 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á! [...]
Dezembro, 5 - 2006 às 9:39 pm |
Opa! Valeu Júlio
Dezembro, 12 - 2006 às 1:35 pm |
[...] Link: Criando Gráficos Dinamicamente com Ajax e XML [...]
Dezembro, 12 - 2006 às 3:50 pm |
Há. Muito bom Bernardo. Vou linkar lá no meu tuto este exemplo também.
Março, 26 - 2007 às 12:27 pm |
Opa vlw Micox! Já tinha visto tava sem tempo di agradecer. Vlw!
Maio, 14 - 2007 às 1:19 pm |
[...] o Bernardo fez um ótimo post sobre criar gráficos através de XML e Ajax. Lá tem mais umas vagas [...]
Outubro, 8 - 2007 às 9:09 am |
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!
Outubro, 19 - 2007 às 3:03 pm |
Mas e se eu quiser utilizar o xml de outro site? O objeto XMLHttpRequest não faz requisição em outro domínio.
Outubro, 19 - 2007 às 4:21 pm |
Não, o objeto em si não, mas fazer isso é muito simples. Dá uma olhada no post do Júlio.
Novembro, 12 - 2007 às 11:25 pm |
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.
Outubro, 25 - 2008 às 4:30 pm |
[...] o Bernardo fez um ótimo post sobre criar gráficos através de XML e Ajax. Lá tem mais umas vagas [...]
Outubro, 26 - 2008 às 10:55 am |
[...] 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 [...]