Voila mon probleme: Ca fait 4 jours que je me gallere sur la generation d'un graphique anime en SVG a partir de donnees contenues dans un fichier XML parse avec JAVASCRIPT.
J'ai cherche partout sur le net, et j'ai reussi a trouver pas mal de reponses mais la je bloque vraiment et je ne comprend pas pourquoi...
Pour commencer, voila un exemple de mon fichier XML (nomme chart.xml) qui contient 1159 noeuds <dataset> au total:
et voila mon parser JAVASCRIPT (la fonction init(evt) est chargee depuis mon fichier SVG avec un onload):
function init(evt) { svgdoc = evt.target.ownerDocument; getURL("chart.xml",parser); }
function parser(obj) {
if(obj.success) { var docXml = parseXML(obj.content).documentElement;
//declarations to retreive the nodes from the xml document containing the data var result = new Array(); var j=0,k=0;
var division = docXml.getElementsByTagName('division'); var type = docXml.getElementsByTagName('type'); var date = docXml.getElementsByTagName('date'); var cumulativeLitres = docXml.getElementsByTagName('cumulativeLitres'); var litres = docXml.getElementsByTagName('litres'); var kgCo2 = docXml.getElementsByTagName('kgCo2'); var cardsNo = docXml.getElementsByTagName('cardsNo');
for(i=0;i<division.length;i++) { var divisionVal = division.item(i).firstChild.nodeValue; var typeVal = type.item(i).firstChild.nodeValue; var dateVal = date.item(i).firstChild.nodeValue; var cumulativeLitresVal = cumulativeLitres.item(i).firstChild.nodeValue; var litresVal = litres.item(i).firstChild.nodeValue; var kgCo2Val = kgCo2.item(i).firstChild.nodeValue; var cardsNoVal = cardsNo.item(i).firstChild.nodeValue;
var divExist = false; for(key1 in result) { if(key1 == divisionVal) divExist = true; } if(!divExist) result[divisionVal] = new Array();
var typeExist = false; for(key2 in result[divisionVal]) { if(key2 == typeVal) typeExist = true; } if(!typeExist) result[divisionVal][typeVal] = new Array();
Le but de ma fonction parser est de reconstitue l'arborescence de mon fichier XML dans un tableau multidimentionnel indexe. J'ai teste ma fonction javascript dans un fichier HTML et elle marche tres bien, quand je parcours mon tableau j'arrive a prompter toute l'arborescence sans erreure.
Seulement, quand j'appelle mon fichier depuis SVG, ca ne marche pas. J'ai une erreur qui me dit "object doesn't support this property or method" en faisant reference a ma variable litresVal.
Pourtant, quand je test avec une valeure comprise entre 0 et division.length manuellement (ex: var litresVal = litres.item(230).firstChild.nodeValue;), ca marche tres bien.
En revanche, une simple boucle du style:
for(i=0;i<division.length;i++) { var divisionVal = division.item(i).firstChild.nodeValue; }
ne marche pas depuis SVG (erreur similaire)... C'est a n'y rien comprendre!
J'ai l'impression desagreable que mon JAVASCRIPT n'est pas interprete de la meme facon par SVG et HTML et qu'il est beaucoup moins performant (ou tollerant) dans SVG. Toutefois, je dois l'appeler depuis SVG car je dois creer des formes et les animer a la volee a partir des donnees que j'aurais recuperees dans mon fichier XML.
Voila, j'esprere avoir ete assez claire. J'offre le respect eternel a la personne qui trouvera la raison pour laquelle mon script ne fonctionne a partir de SVG.
Marsh Posté le 18-09-2008 à 11:50:40
Hello everyone!
Voila mon probleme: Ca fait 4 jours que je me gallere sur la generation d'un graphique anime en SVG a partir de donnees contenues dans un fichier XML parse avec JAVASCRIPT.
J'ai cherche partout sur le net, et j'ai reussi a trouver pas mal de reponses mais la je bloque vraiment et je ne comprend pas pourquoi...
Pour commencer, voila un exemple de mon fichier XML (nomme chart.xml) qui contient 1159 noeuds <dataset> au total:
<testData xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
<dataSet>
<division>Bidding</division>
<type>DIESEL</type>
<date>01/01/2007</date>
<cumulativeLitres>1772.41</cumulativeLitres>
<litres>1772.41</litres>
<kgCo2>4662.147264</kgCo2>
<cardsNo>8</cardsNo>
</dataSet>
<dataSet>
<division>Bidding</division>
<type>DIESEL</type>
<date>01/02/2007</date>
<cumulativeLitres>3371.7</cumulativeLitres>
<litres>1599.29</litres>
<kgCo2>4206.772416</kgCo2>
<cardsNo>7</cardsNo>
</dataSet>
...
</testData>
et voila mon parser JAVASCRIPT (la fonction init(evt) est chargee depuis mon fichier SVG avec un onload):
function init(evt)
{
svgdoc = evt.target.ownerDocument;
getURL("chart.xml",parser);
}
function parser(obj)
{
if(obj.success)
{
var docXml = parseXML(obj.content).documentElement;
//declarations to retreive the nodes from the xml document containing the data
var result = new Array();
var j=0,k=0;
var division = docXml.getElementsByTagName('division');
var type = docXml.getElementsByTagName('type');
var date = docXml.getElementsByTagName('date');
var cumulativeLitres = docXml.getElementsByTagName('cumulativeLitres');
var litres = docXml.getElementsByTagName('litres');
var kgCo2 = docXml.getElementsByTagName('kgCo2');
var cardsNo = docXml.getElementsByTagName('cardsNo');
for(i=0;i<division.length;i++)
{
var divisionVal = division.item(i).firstChild.nodeValue;
var typeVal = type.item(i).firstChild.nodeValue;
var dateVal = date.item(i).firstChild.nodeValue;
var cumulativeLitresVal = cumulativeLitres.item(i).firstChild.nodeValue;
var litresVal = litres.item(i).firstChild.nodeValue;
var kgCo2Val = kgCo2.item(i).firstChild.nodeValue;
var cardsNoVal = cardsNo.item(i).firstChild.nodeValue;
var divExist = false;
for(key1 in result)
{
if(key1 == divisionVal)
divExist = true;
}
if(!divExist)
result[divisionVal] = new Array();
var typeExist = false;
for(key2 in result[divisionVal])
{
if(key2 == typeVal)
typeExist = true;
}
if(!typeExist)
result[divisionVal][typeVal] = new Array();
result[divisionVal][typeVal][dateVal] = new Array();
result[divisionVal][typeVal][dateVal]["cumulativeLitres"] = cumulativeLitresVal;
result[divisionVal][typeVal][dateVal]["litres"] = litresVal;
result[divisionVal][typeVal][dateVal]["kgCo2"] = kgCo2Val;
result[divisionVal][typeVal][dateVal]["cardsNo"] = cardsNoVal;
}
}
else alert('failed');
}
Le but de ma fonction parser est de reconstitue l'arborescence de mon fichier XML dans un tableau multidimentionnel indexe.
J'ai teste ma fonction javascript dans un fichier HTML et elle marche tres bien, quand je parcours mon tableau j'arrive a prompter toute l'arborescence sans erreure.
Seulement, quand j'appelle mon fichier depuis SVG, ca ne marche pas. J'ai une erreur qui me dit "object doesn't support this property or method" en faisant reference a ma variable litresVal.
Pourtant, quand je test avec une valeure comprise entre 0 et division.length manuellement (ex: var litresVal = litres.item(230).firstChild.nodeValue;), ca marche tres bien.
En revanche, une simple boucle du style:
for(i=0;i<division.length;i++)
{
var divisionVal = division.item(i).firstChild.nodeValue;
}
ne marche pas depuis SVG (erreur similaire)... C'est a n'y rien comprendre!
J'ai l'impression desagreable que mon JAVASCRIPT n'est pas interprete de la meme facon par SVG et HTML et qu'il est beaucoup moins performant (ou tollerant) dans SVG. Toutefois, je dois l'appeler depuis SVG car je dois creer des formes et les animer a la volee a partir des donnees que j'aurais recuperees dans mon fichier XML.
Voila, j'esprere avoir ete assez claire. J'offre le respect eternel a la personne qui trouvera la raison pour laquelle mon script ne fonctionne a partir de SVG.
Merci pour votre aide.