Scribd Logo
Fazer o upload

Bem-vindo(a) ao Scribd!

  • Criando Gráficos Dinamicamente Com Ajax e XML

    Enviado por

    irineu_sa
    81 visualizações3 páginas

    Título original

    Criando Gráficos Dinamicamente com Ajax e XML

    Direitos autorais

    © Attribution Non-Commercial (BY-NC)

    Formatos disponíveis

    DOC, PDF, TXT ou leia online no Scribd

    Você considera este documento útil?

    Este conteúdo é inapropriado?

    Denunciar este documento

    Direitos autorais:

    Attribution Non-Commercial (BY-NC)
    Baixe no formato DOC, PDF, TXT ou leia online no Scribd
    Sinalizar o conteúdo como inadequado
    81 visualizações3 páginas

    Criando Gráficos Dinamicamente Com Ajax e XML

    Enviado por

    irineu_sa

    Direitos autorais:

    Attribution Non-Commercial (BY-NC)
    Baixe no formato DOC, PDF, TXT ou leia online no Scribd
    Sinalizar o conteúdo como inadequado
    de 3

    TUTORIAL

    Criando Grficos Dinamicamente com Ajax e XML

    O XML que receberemos e interpretaremos contm dados para serem transformados em um simples grfico, basea-se em categorias e items, que sero, no exemplo debaixo, fabricantes de carros.
    <dados> <categoria> <name>Audi</name> <item value="70">Performance</item> <item value="60">Peso</item> <item value="60">Preo</item> </categoria> <categoria> <name>Ferrari</name> <item value="95">Performance</item> <item value="90">Peso</item> <item value="20">Preo</item> </categoria> <categoria> <name>Chevrolet</name> <item value="50">Performance</item> <item value="60">Peso</item> <item value="80">Preo</item> </categoria> </dados>

    O que ser feito


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

    Interpretando com Javascript


    No so todos os browsers que suportam XML, e nem todos que suportam parsing de XML, mas no utilizaremos demais metodos DOM, utilizaremos somente o bsico e simples. Os items foram preenchidos a pressa portanto sem discusses. Agora a partir desse XML criaremos o tal do Grfico, feita a requisio 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 prprias. Como os dados no contm tags HTML, no usei o CDATA, se voc no sabe o que significa deixemos de lado e continuemos. Apos receber o objeto como sendo uma estrutura XML e no somente uma string de texto, utilizaremos DOM para manipular, aqui no utilizaremos todos os conceitos como tipos de nodo, prximo irmo, pai etc., s os bsicos. J descrevi a estrutura e rvore do nosso arquivo XML n? Into 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");

    -1-

    TUTORIAL

    Criando Grficos Dinamicamente com Ajax e XML

    A temos a cor da borda e do texto de cada barra do nosso grfico, elementos de estilo, e depois pegamos o <body> do HTML, e criamos uma Div, isso tudo para depois criarmos o nosso grfico. 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 no utilize innerHTML, cada elemento um nodo, um texto um elemento nodo de tipo 3 e ento nosso texto o primeiro filho de <name>.
    7 8 9 10 var itens=categorias[i].getElementsByTagName("item"); var name=categorias[i].getElementsByTagName("name")[0].firstChild.nodeValue; var categoria=document.createElement("fieldset"); 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 grfico e colocamos uma legend a ele. Como cada categoria tem vrios items deveremos de novo navegar utilizando-se do for.
    11 12 13 14 for(var n=0; n<itens.length; n++) {var itemName=itens[n].firstChild.nodeValue; var itemLength=itens[n].getAttribute(value); 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 grfico. 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 variveis no nicio, o "border_text" e o "background", agora iremos utiliza-ls, no explicarei as propriedades de estilos aplicadas, pode se tambm estilizar isso em um arquivo externo. Depois da regra de estilo, ns colocamos cada item no elemento categoria e colocamos o elemento categoria no elemento notas(que sero grfico). O elemento que est na varivel "conteudo" aonde colocaremos o grfico, pode ser aonde voc quiser, zeramos o interior de contedo e colocamos nosso grfico l. isso, espero que tenham gostado, apartir desse simples tutorial produzimos um grfico apartir de um arquivo XML (parece SVG no?!) em Javascript com tecnicas simples, veja ele aqui, nesse arquivo o XML gerado dinamicamente em PHP dependendo dos valores passados. -2-

    TUTORIAL

    Criando Grficos Dinamicamente com Ajax e XML

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

    -3-

    Você também pode gostar