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>