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>