Discussion :

[demcoul]

Bonjour � tout le monde,

Je veux construire des histogrammes sur une page web. Apr�s mes recherches et lectures diverses, j'ai alors choisi l'API Chart.bundle.js. Les donn�es de l'exemple trouv� fonctionnent bien. Je voulais construire un histogramme dont les donn�es viennent d'une base des donn�es.
Pour r�aliser cela, je r�cup�re les donn�es par une servlet que j'envoie vers ma page JSP dans un SCRIPT JS. J'ai presque utiliser toutes mes id�es en vain.
Je r�cup�re une liste de la base des donn�es. C'est une liste d'objets avec deux attributs (l'un est une String et l'autre un Integer). Je convertis ma liste d'objet en JSON dans la servlet et je le r�cup�re dans le SCRIPT comme variable Javascript. Pour l'instant �a n'a pas r�ussi.

Je demande alors aide aupr�s de la communaut�. Voici les codes de ma Servlet de mon SCRIPT JS.

Code de la servlet :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

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
 
		// création d'objet JSON
                JSONObject dataObject1 = null; 
		JSONObject dataObject2 = null;
// création de String pour récupérer les objets JSON
		String dataJSON1 = null;
		String dataJSON2 = null;
 
// listes pour stocker mes données venues de la BD
		 List<String> etiquetes = new ArrayList<String>();
 		List<Integer> donnees = new ArrayList<Integer>();
// récupération des données de la BD
		 List<Nonshi<String, String, Integer>> lnbplotis = new ArrayList<Nonshi<String, String, Integer>>();
		StatistiquesParcelle statp = new StatistiquesParcelle();
		lnbplotis = statp.nbreparcellesparlotissement();
// stockage des données dans les listes crées ci-dessus
		 int i = 0;
		while (i < lnbplotis.size()) {
			etiquetes.add(lnbplotis.get(i).getAttribut2());
			donnees.add(lnbplotis.get(i).getAttribut3());
			i++;
		}
// Convertion des listes en Objet JSON
		dataObject1 = new JSONObject(etiquetes);
		dataObject2 = new JSONObject(donnees);
// transformation des objets JSON en String		dataJSON1 = dataObject1.toString();
		 dataJSON2 = dataObject2.toString();
// envoie des données vars la JSP
		 request.setAttribute("dataJSON1", dataJSON1);
		request.setAttribute("dataJSON2", dataJSON2);
 
		this.getServletContext().getRequestDispatcher(VUE).forward(request, response);
	}

SCRIPT Javascript:

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

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
 
<script>
		var donnee=JSON.parse(dataJSON2); // convertion des données reçues par JSON 
 			//document.getElementById("donnee");
		 alert(donnee); // cette ligne affiche : {''empty":false}
		var etiquete=JSON.parse(dataJSON1);
			//document.getElementById("etiquete");
    	var myContext = document.getElementById("myChart");
   		 var myChartConfig = {
      		type: 'bar',
      		data: {
        		labels:etiquete,
        			//["Féminin", "Masculin", "Animaux"],
        		datasets: [
           			{
           				label: "Nombre de Parcelles",
           				data:donnee,
           					//[227, 331, 11],
		   				backgroundColor: ['green','yellow','red'],
           			},
 
           			//{
           			//label: "1ère Classe",
           		//	data: [107, 115, 2],
		   		//	backgroundColor: ['red','red','red'],
          		// },{
           		//	label: "2ème Classe",
           		//		data: [120, 116, 9],
		   		//		backgroundColor: ['blue','blue','blue'],
           			//}
        		]
      		}
    	}
  		var myChart = new Chart(myContext, myChartConfig);
 
	</script>

[NoSmoking]

Bonjour,
on ne sais m�me pas comment tes donn�es, g�n�r�es c�t� serveur, arrivent dans ton script qui sera pris en compte c�t� client !

Es-tu s�r que ton code serveur retourne bien les bonnes donn�es ?

Il existe un forum Java.

[demcoul]

Effectivement, vous avez raison, avec les multitudes variantes que j'ai fait, je me suis tromp� de code.

Voici, le code que je voulais envoyer :

Contenu de la Servlet: qui interroge la BD avec la m�thode nbreparcellesparlotissement() de l'objet StatistiquesParcelle et qui donne une liste du type List<Nonshi<String, String, Integer>>.

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

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
 
//Initialisation d'un objet Gson
final GsonBuilder builder = new GsonBuilder();
final Gson gson = builder.create();
 
//Initialisation des listes qui vont stocker les données reçues de la BD et qui seront converties en Gson
List<String> etiquetes = new ArrayList<String>();
List<Integer> donnees = new ArrayList<Integer>();
 
List<Nonshi<String, String, Integer>> lnbplotis = new ArrayList<Nonshi<String, String, Integer>>();
StatistiquesParcelle statp = new StatistiquesParcelle();
lnbplotis = statp.nbreparcellesparlotissement(); // récupération des données de la BD par l'appel de la méthode nbreparcellesparlotissement()
 
int i = 0;
while (i < lnbplotis.size()) { 
// cette boucle permet de récupérer des données de la liste obtenue après l'appel de la méthode nbreparcellesparlotissement()
// je stocke ici les contenus de chaque attribut dans une liste appropriée
	etiquetes.add(lnbplotis.get(i).getAttribut2());
	donnees.add(lnbplotis.get(i).getAttribut3());
	i++;
}
 
// je place les données dans l'entête request pour les envoyer vers la JSP
request.setAttribute("etiquete", gson.toJson(etiquetes)); 
request.setAttribute("donnee", gson.toJson(donnees)); 
 
// juste pour vérifier ici les données sont correctement récupérées de la BD
System.out.println(gson.toJson(etiquetes));
System.out.println(gson.toJson(donnees));
 
// appel de la JSP
this.getServletContext().getRequestDispatcher(VUE).forward(request, response);

Code de la JSP avec le script javascript

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

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
 
<div style="width:80%">
	<canvas id="myChart" ></canvas>
</div>
<script>
	var valeurs=${donnee};
	alert(valeurs); // affichage des données récupérées, elles sont bonnes sauf que les crochets sont absents
	var mydata="["+valeurs+"]"; // ajout des crochets pour respecter le format des données du Chart.
 
	var etiquetes=${etiquete};
	alert(etiquetes); // affichage des données récupérées, elles sont bonnes sauf que les crochets sont absents
	var mylabels="["+etiquetes+"]"; // ajout des crochets pour respecter le format des données du Chart.
 
    	var myContext = document.getElementById("myChart");
   	var myChartConfig = {
      		type: 'bar',
      		data: {
        		labels:mylabels, // ici je n'obtiens rien, pour que l'histogramme s'affiche. AXe des abscisses
        			//["Féminin", "Masculin", "Animaux"], // ici un exemple de présentation des données selon le format de l'API Chart.bundle.js
        		datasets: [
           			{
           				label: "Nombre de Parcelles",
           				data:mydata, // ici je n'obtiens rien, pour que l'histogramme s'affiche. AXe des ordonnées
           					//[227, 331, 11],
		   				backgroundColor: ['green','yellow','red'],
           			},
 
            		]
      		}
    	}
  	var myChart = new Chart(myContext, myChartConfig);
 
</script>

Excusez-moi de vous avoir infortun� avec mon probl�me.

[Toufik83]

Avec ce code

Code javascript :

S�lectionner tout - Visualiser dans une fen�tre � part

var mydata="["+valeurs+"]";

tu n'obtiens pas un tableau mais plut�t une cha�ne de caract�re.

essaies plut�t

Code javascript :

S�lectionner tout - Visualiser dans une fen�tre � part

var mydata=[valeurs];

la m�me chose pour la variable mylabels

[demcoul]

Bonjour,

J'ai test� votre proposition, malheureusement pas de satisfaction. En effet, quand l'affiche avec un System.out.println(donne) dans la servlet, j'obtiens dans ma console �a :


J'ai juste besoin de placer des listes de ce genre devant les attributs labels et data dans le fichier JSP au niveau du script js.

Merci.

[NoSmoking]

Regarde le code HTML g�n�r�, CTRL +U, et fait les corrections en cons�quence.

[demcoul]

Voici le code HTML g�n�r�.
Je constate que les valeurs des donn�es et des �tiquettes ne sont pas plac�es devant les propri�t�s labels et data .

Code HTML :

S�lectionner tout - Visualiser dans une fen�tre � part

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
<div style="width: 80%">
				<canvas id="myChart"></canvas>
			</div>
 
			<script>
                                var valeurs = ["DIALACOROBOUGOU","KATI-SAMAKEBOUGOU"];
                                alert(valeurs); // affichage des données récupérées, elles sont bonnes sauf que les crochets sont absents
                                var mydata = "[" + valeurs + "]"; // ajout des crochets pour respecter le format des données du Chart.
 
                                var etiquetes = [22,16];
                                alert(etiquetes); // affichage des données récupérées, elles sont bonnes sauf que les crochets sont absents
                                var mylabels = "[" + etiquetes + "]"; // ajout des crochets pour respecter le format des données du Chart.
 
                                var myContext = document.getElementById("myChart");
                                var myChartConfig = {
                                        type : 'bar',
                                        data : {
                                                labels : etiquetes, // ici je n'obtiens rien, pour que l'histogramme s'affiche. AXe des abscisses
                                                //["Féminin", "Masculin", "Animaux"], // ici un exemple de présentation des données selon le format de l'API Chart.bundle.js
                                                datasets : [ {
                                                        label : "Nombre de Parcelles",
                                                        data : valeurs, // ici je n'obtiens rien, pour que l'histogramme s'affiche. AXe des ordonnées
                                                        //[227, 331, 11],
                                                        backgroundColor : [ 'green', 'yellow', 'red' ],
                                                },
 
                                                ]
                                        }
                                }
                                var myChart = new Chart(myContext, myChartConfig);
                        </script>

Voir les lignes 18 et 22 concern�es.

[demcoul]

Merci pour vos conseils,
J'ai r�ussi � obtenir un graphe en secteurs (type pie) sans probl�me, avec l'histogramme, l'axe des ordonn�es commence par la plus petite valeur et non z�ro(0).

L'erreur �tait au niveau des valeurs, car j'avais invers� les valeurs des deux axes (axe-X �tait � axe-Y et vice-versa).

Encore merci beaucoup.

Voici le code correcte de la JSP.

Code HTML :

S�lectionner tout - Visualiser dans une fen�tre � part

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
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<script type="text/javascript" src="dist/Chart.bundle.js"></script>
<link rel="stylesheet" media="screen" type="text/css" href="style.css" />
</head>
<body>
        <div style="width: 80%">
	     <canvas id="myChart"></canvas>
	</div>
       <script type="text/javascript">
                var myContext = document.getElementById("myChart");
                var myChartConfig = {
                        type : 'pie',
                        data : {
                                labels : ${donnee}, // axe des ordonnées 
                                datasets : [ {
                                                label : "Nombre de Parcelles",
                                                data : ${etiquete}, // axe des abscisses
                                                backgroundColor : [ 'green', 'yellow'],
                                },]
                        }
                }
                var myChart = new Chart(myContext, myChartConfig);
        </script>
</body>
</html>