Discussion :

[Zebulon777]

Bonjour tout le monde,

Sur les graphes, on affiche la légende, mais en plus de cette légende, dans un autre cadre du même genre, je voudrai pouvoir afficher d'autres informations.

Est-ce que c'est possible, siouplé ?

Merci d'avance.

[NoSmoking]

Bonjour,

Est-ce que c'est possible, siouplé ?

c'est plus que probable

Qu'entends tu exactement par « en plus de cette légende, dans un autre cadre du même genre » ?

[Zebulon777]

Bonjour et merci encore de te pencher sur mon cas

Et comme une image vaut mieux qu'on long discours...


L'idée, serait donc d'ajouter des infos dans une partie blanche du pourtour du graphe, tout en ne modifiant ni la légende, ni le nom des axes.

[NoSmoking]

là on est dans de la simple structure HTML ni plus ni moins !

Sachant que tout ce qui se trouve dans le conteneur du graphique est purement et simplement supprimer, il suffit de mettre un cadre autour et de mettre tes « infos supplémentaires » dedans.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
<div id="cadre-graphe">
  <div id="graphe">
    <p>Cet élément va être supprimé et remplacé par le graphique ...</p>
  </div>
  <div>
    <p>Ici tu mets ce que tu veux ...</p>
  </div>
</div>

[Zebulon777]

Sauf que pratiquement toute la page est créée dynamiquement et là, c'est le hic

Est-ce que je peux t'envoyer une bonne partie du code (html, js et css), parce que si je le mets en forum, ça risque de faire trop ?

[NoSmoking]

Sauf que pratiquement toute la page est créée dynamiquement et là, c'est le hic

Le « cih » c'est que tu peux également créer l'élément dynamiquement

[Zebulon777]

LOL, y a du hic.

Voici les fonctions qui permettent de créer les DIV

Code javascript :

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
	function initHTML(rowID){
		var html = "";
		for (var i = 0; i < rowID.length; i++) {
			html += '<div class="row graph" id='+rowID[i]+'>';
			html += '</div>';
			html += '<div id=Info_'+rowID[i]+'>ici tu mets ce que tu veux';
			html += '</div>';
		}
		$('#main').append(html);
	}

	function addHTML(rowID, graphArrayID, graphArraySize){
		var html = "";
		for (var i = 0; i < graphArrayID.length; i++) {
			html += '<div class="col-md-'+graphArraySize[i]+'">';
			html += '<div class="col-md-12 graph-content" id="'+graphArrayID[i]+'"></div>';
			html += '<div class="col-md-12 graph-loading"><span><i class="fa fa-line-chart fa-lg"></i> Chargement...</span></div>';
			html += '</div>';
		}
		$('#'+rowID).append(html);
	}

J'ai ajouté ce qui est en bleu et qui devrait correspondre à "ici tu mets ce que tu veux", ok, c'est bon, ça le fait, mais l'info est affiché hors du cadre du graphe ?

[NoSmoking]

...mais l'info est affiché hors du cadre du graphe ?

certes mais c'est une vue de l'esprit, il te suffit de reporter le style (cosmétique) appliqué à ton conteneur de graphe, son parent donc.

[Zebulon777]

Impec.
C'est tout simple et je n'y avais pas pensé
Merci.