Affichage d'une graphique dans une alerte

Bonjour,

Je suis actuellement en train de mettre en place une action qui intervient dans le cadre suivant :

  • L’objet métier sur lequel l’action se base doit afficher uniquelent les dernières occurences créées par rubrique et thèmatique (dernière occurence en fonction d’une date d’effet). Chaque occurence dispose aussi d’une valeur numérique.

  • L’action va permettre d’afficher un historique des valeurs en fonction de la date d’effet (toujours par rubrique et thèmatique) dans une pop up.

L’action a été configurée de la manière suivante :

  • Exécutée en Back
  • Située sur chaque ligne de la ligne

Lorsque je clique une première fois sur l’action ou lorsque je viens de vider un cache serveur, la fonction s’exécute correctement avec l’alerte qui affiche le graphique.

Cependant lorsque je tente de reclicker sur l’action, l’alerte s’affiche mais plus le graphique.

Ci-dessous se trouve le code BACK :

private JSONObject creationValeurGraphique(String information){
         //INITIALISATION DU JSON DES DONNES
			Grant g = getGrant();
			JSONObject data = new JSONObject();
            JSONArray dataSet = new JSONArray();
			JSONArray labels = new JSONArray();

		
			JSONObject compteur = new JSONObject();
			compteur.put("label", "Historique des valeurs");
			JSONArray dataCompteur = new JSONArray();

			

			//RECUPERATION DES VALEURS DU COMPTEURS
			String[] infoTab = information.split(";");
			for(int i = 0; i < infoTab.length ; i++){
				String date = infoTab[i].split(",")[0];
				String value = infoTab[i].split(",")[1];
				labels.put(date);
				dataCompteur.put(value);
			}
			
			
			// AJOUT DES VALEURS
			compteur.put("data",dataCompteur);
			dataSet.put(compteur);
			
			// CONSTRUCTION DU JSON
			data.put("datasets", dataSet);
			data.put("labels", labels);
			
			getGrant().setParameter(HISTORIQUE_ACTION,data.toString());
			
			AppLog.info(getClass(), "creationValeurGraphique", "DATA : "+data.toString() , null);
			return data;
	}

Ci-dessous se trouve le code FRONT :

p.list.onload = function(ctn, obj) {
			var titre = "Historique des valeurs"
			var nomDiv = $('.modal-body')
			
			app.getSysParam(function(v){
				if(v !== undefined || v!==""){
					console.log("DATA USER SET : "+v)
					var infoChart = { type:'line',	
						 data:JSON.parse(v),
						 options: { title: {display: true,text:"Test"},
						 responsive: true, 
						 scales: {xAxes: [{stacked: true,}],
						 yAxes: [{stacked: true }] },
						 }
					}
					
					var chart = $ui.loadCharts(function(){ 
						nomDiv.html('<div id="graph" <div/>');
						$ui.charts.chart($('#graph'), infoChart) }); 
		
					
					$ui.alert({ title:titre, content:chart,onOk:function(){} });
					app.setSysParam(null, 'SNG_HISTORIQUE_ACTION', ""); // erase
				}
			},"SNG_HISTORIQUE_ACTION");
		
		};

Avez-vous une idée sur le problème ?

Cordialement,

Nadège

  • votre selector $('.modal-body') semble très imprécis, car il peut remplir un autre body d’un dialog masqué (hidden) dans la page (fenetre about du footer par exemple).
  • et nomDiv.html('<div id="graph" <div/>'); semble manquer de >
  • manque de “;” un peu partout

Il serait préférable d’ouvrir un dialogue nommé comme suit :

var c = $('<div class="mychart"/>');
$ui.view.tools.dialog({
  name : "dlg_mychart",
  title : titre,
  modal: true,
  closeable: true,
  content: c,
  width: "400px"
});
$ui.loadCharts(function() { 
  $ui.charts.chart(c, infoChart);
}); 

En regardant en diagonale votre post j’ai l’impression (peut être fausse) que votre approche est très “tirée par les cheveux” alors que vous pouvez simplement configurer une action qui revoie du JS genre:

Avec le code suivant pour la méthode d’action:

public String action1() {
	return javascript("alert('Hello world! (row ID " + getRowId() + ");')");
}

Ici j’affiche une alerte avec un message qui contient le row ID du record sur lequel l’action a été lancée mais on peut bien entendu imaginer des choses plus complexes :

  • coté serveur pour la constitution des données passées au JS client
  • coté client où on peut utiliser une fonction JS complexe du script de l’objet

Personnellement j’aurai fait comme ça.

En “wrap up” de nos deux réponses:

Dans cet exemple l’action est configurée comme indiqué dans mon post précédent,

Le code serveur (les data sont en dur ici mais on peut bien entendu faire autre chose à ce niveau)

public String action1() {
	return javascript(getName() + ".action1(" + new JSONObject()
		.put("id", getRowId())
		.put("labels", new JSONArray("['January', 'February', 'March', 'April', 'May', 'June', 'July']"))
		.put("values", new JSONArray("[0, 10, 5, 2, 20, 30, 45]")) + ")");
}

Le code client qui affiche le chart avec ces données:

var AppObject1 = AppObject1 || (function() {
	function action1(data) {
		$ui.loadCharts(function() { 
			var div = $("<div/>");
			$ui.view.tools.dialog({ title : "Chart for " + data.id, content: div, closeable: true, modal: true });
			$ui.charts.chart(div, {
				type: "line",
				data: { labels: data.labels, datasets: [{ label: "Values for " + data.id, data: data.values }]},
				options: {}
			}); 
		});
	}

	return { action1: action1 };
})();

Résultat:

1 Like