[AJAX] Charger les data d'un XML dans XSL pour générer un graphique

Bonjour,

Je souhaiterai afficher un graphique pour des données contenues dans un fichier XML grâce à la feuille XSL. Bon je n'y arrive pas du tout...

Voila ce que j'ai actuellement :

Le fichier XML:
Il est constitué d'une répétition de noeuds (comptage) avec des types différents.
Mais c'est moi qui le génère, donc si je dois le modifier pour faciliter le problème c'est possible.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<?xml-stylesheet href="panorama.xsl" type="text/xsl" ?>
<Rapport type="Panorama">
	<Comptage type="Individus">
		<Indicateur>Individus</Indicateur>
		<Period>11/2013</Period>
		<MoyenneIndicateur>254865</MoyenneIndicateur>
	</Comptage>
	<Comptage type="Individus">
		<Indicateur>Individus</Indicateur>
		<Period>12/2013</Period>
		<MoyenneIndicateur>265789</MoyenneIndicateur>
	</Comptage>
	<Comptage type="nbTelephone">
		<Indicateur>nbTelephone</Indicateur>
		<Period>11/2013</Period>
		<MoyenneIndicateur>55962</MoyenneIndicateur>
	</Comptage>
	<Comptage type="nbTelephone">
		<Indicateur>nbTelephone</Indicateur>
		<Period>12/2013</Period>
		<MoyenneIndicateur>60258</MoyenneIndicateur>
	</Comptage>
	<Comptage type="nbEmail">
		<Indicateur>nbEmail</Indicateur>
		<Period>11/2013</Period>
		<MoyenneIndicateur>137500</MoyenneIndicateur>
	</Comptage>
	<Comptage type="nbEmail">
		<Indicateur>nbEmail</Indicateur>
		<Period>12/2013</Period>
		<MoyenneIndicateur>155000</MoyenneIndicateur>
	</Comptage>
</Rapport>

Le fichier XSL
Il référence jquery et morris.js pour réaliser mon graphique et lire le XML.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" encoding="utf-8" doctype-public="-//W3C//DTD XHTML 1.0 Transitional//EN" doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"/>
 
<xsl:template match="/">
	<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
		<meta name = "viewport" content = "initial-scale = 1, user-scalable = no" />
		<title>Rapport - <xsl:value-of select="Rapport/@type"/></title>
 
    	<link href="morris/morris.css" rel="stylesheet" />
	</head>
	<body>
		<div id="graph"></div>
 
		<script type="text/javascript" src="morris/jquery-1.11.0.min.js"></script>
		<script type="text/javascript" src="morris/raphael-min.js"></script>
		<script type="text/javascript" src="morris/morris.min.js"></script>
 
		<script>
			//Ici le code JS pour générer mon graphique
		</script>
	</body>
	</html>
</xsl:template>
</xsl:stylesheet>

Alors mon souci est le suivant :
Je ne vois pas du tout comment parcourir mon XML afin de générer les objets data/xkey/ykeys/labels pour mon mon JS qui génère le graphique.
J'ai bien essayer quelque truc, mais si je les passe à morris (j'adore ce nom :mouarf:) ca ne lui va pas du tout et du coup je ne sais pas trop quoi faire
Voila mon code actuel qui correspond a la dernière balise script de mon fichier XSL

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
$(function () {
	$.ajax({
		type: "GET", 
		url: "panorama.xml",
		dataType: "xml",
		success: function(xml){
			var indic = {};
			$(xml).find("Fichier").each(function(){
				indic[$(this).attr('type')] = true; 
			});
			var resIndic = new Array();
			for(var i in indic){
				resIndic.push(i);
			}
			var Indicateurs = JSON.stringify(resIndic);
			console.log('Indicateurs : ' + Indicateurs);
			var Period = {};
			$(xml).find("Fichier").find("Period").each(function(){
				Period[$(this).text()] = true; 
			});
			var resPeriod = new Array();
			for(var i in Period){
				resPeriod.push(i);
			}
			var Periods = JSON.stringify(resPeriod);
			console.log('Periods : ' + Periods);
			new Morris.Area({
				element: 'graph',
				behaveLikeLine: true,
				data: [
					{x: '2011 Q1', y: 3, z: 3},
					{x: '2011 Q2', y: 2, z: 0},
					{x: '2011 Q3', y: 2, z: 5},
					{x: '2011 Q4', y: 4, z: 4} 
				],
				xkey: 'x',
				ykeys: ['y', 'z'],
				labels: ['Y', 'Z']
			});
		}
	});
});

Et petite question supplémentaire en passant :
Vu qu'on est dans la feuille XSL pour le fichier XML,
il n'y a pas une autre solution pour parcourir le fichier, car la je suis obligé de passer le nom du fichier a l'AJAX, ça me parait étrange...

Voila,

Par avance merci si quelqu'un peu m'aider pour ce souci

Ghosty