Discussion :

[jpwitz]

Bonjour,

J'essaie d'afficher un graphique, barres horizontales (view:'stackedBarH') avec dhtmlXChart. Les données sont actualisées au format xml (barChart1.load(URL,'xml')).

J'ai deux problèmes :

1. comment définir la largeur des labels de l'axe Y (ce sont des noms qui apparaissent tronqués) ?
2. le nombre de séries pour l'empilement des barres étant variable, comment accéder au nombre de séries. J'ai pensé ajouter une balise <nombre_series> dans le fichier xml. Mais comment accéder au contenu de cette balise ?

Voici le JavaScript :

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
23
24
25
26
27
28
29
 
barChart1 =  new dhtmlXChart({
	view:'stackedBarH',
	container:'chart1',
	value:'#D2013_11#',
	label:'#nom#',
	gradient:'light',
	color:'#a7ee70',
	width:50,
	xAxis:{
		title:'Nb jours de présence',
		start:0,
		template:'{obj}'
	},
	yAxis:{
		template:' '
	}
});
barChart1.load(x,'xml');
barChart1.addSeries({
	value: '#D2013_12#',
	label:'#D2013_12#',
	color: '#a7ee70',
});
barChart1.addSeries({
	value: '#D2013_10#',
	label:'#D2013_10#',
	color: '#a7ee70',
});

Et le contenu du ficher xml renvoyé par l'adresse URL :

Code xml :

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
<data>
<nombre_series>
2
</nombre_series>
<item id='0'>
	<nom>BEvan</nom>
	<D2013_02>5</D2013_02>
	<D2013_03>9</D2013_03>
	</item>
<item id='1'>
	<nom>Brole</nom>
	<D2013_02>5</D2013_02>
	<D2013_03>7</D2013_03>
</item>
<item id='2'>
	<nom>Bomas</nom>
	<D2013_02>5</D2013_02>
	<D2013_03>7</D2013_03>
</item>
<item id='3'>
	<nom>Bais</nom>
	<D2013_02>0</D2013_02>
	<D2013_03>0</D2013_03>
</item>
</data>

[NoSmoking]

Bonjour,
je commencerais par le 2, lu dans la documention, tu peux utiliser la méthode dataCount(). ex console.log( barChart1.dataCount());.

Pour le 1, il semblerait que tu puisses joué sur la padding du graphe, donc ajouter dans les options passées au constructeur

Code :

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

1
2
3
padding:{
    left: 100   // par exemple à ajuster
}

[kdmbella]

Salut,

Je n'ai pas encore utilisé le composant dhtmlxChart bien que connaissant très bien ce framework DHTMLX. Je vais néanmoins donnez quelque piste pouvant permettre de résoudre votre problème :

• Comment définir la largeur des labels de l'axe Y (ce sont des noms qui apparaissent tronqués) ? Je pense qu'il faut regarder les propriétés suivantes : pading et label. Voir également si les labels un peu plus courts posent le même problème.
• Le nombre de séries pour l'empilement des barres étant variable, comment accéder au nombre de séries ? J'ai pensé ajouter une balise <nombre_series> dans le fichier xml. Mais comment accéder au contenu de cette balise ?

Je pense qu'il faut essayer ça :

Code xml :

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

1
2
3
4
5
<item id="1">
     <sales>7.3</sales>
     <year>2008</year>
     <nombre_series>3<nombre_series>
</item>

Ou :

Code xml :

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

<data nombre_series="3">

Et récupérer la valeur comme avec les autres balises en gardant à l'esprit cette recommandation prise dans la documentation du framework :

There isn't a requirement for incoming XML (it can be in any format), all top-level tags will be converted to objects.
<data>
<item id="1">
<sales>7.3</sales>
<year>2008</year>
</item>
<item id="2">
<sales>7.6</sales>
<year>2009</year>
</item>
</data>The names of top-level tags make no matter. The attributes of the top-level tags (<item> in the code snippet showed above) and values of nested tags will be available as properties in a template and for scripting. If you want to process only tags with specific names, you can change xpath used for data collecting:

J'espère avoir aidé.
++

[jpwitz]

Merci pour vos réponses.
1) Ce qui marche: définir la largeur des labels de l'axe Y par padding:{ left: 200 } (c'est OK)
2) Ce qui ne marche pas : dataCount() ;-( alert(barChart1.dataCount()) affiche systématiquement 0
3) Nouveau problème: J'ai défini les labels à afficher

Code :

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

1
2
barChart1.define('value','#tbSeries0#');
barChart1.define('label','#tbSeries0#');

Cependant, je voudrais, lorsque la valeur est 0, qu'il n'affiche rien. Je pense qu'il faut définir une fonction, mais comment et où la placer?

[NoSmoking]

Attention quand même, à quel moment demandes tu le nombre de série?

Comme visiblement tu charges via un barChart1.load(URL,'xml'), il te faut attendre que les données soient de retour...donc

Code :

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

1
2
3
barChart1.load(URL,"xml",function(){
    console.log( barChart1.dataCount())     // function callback
});

[jpwitz]

Merci NoSmoking
Je ne savais pas qu'on pouvait rajouter un 3° paramètre à la fonction barChart1.load, en l’occurrence une function.
Peut-on faire la même chose pour la fonction barChart1.define, pour le pb de non-affichage de la valeur 0 (barChart1.define('label','#tbSeries0#')?

[NoSmoking]

pourquoi ne pas utiliser le template de l'option yAxis et/ou mettre une fonction sur tes label.

Code :

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

1
2
3
4
// label:"#valeur#",  
label: function(obj){
    return (obj.valeur > 0) ? obj.valeur : '';
  },

[jpwitz]

J'essaie d'utiliser une fonction sur mes label:

Code :

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

1
2
3
4
 
barChart1.define('label',function(obj){
	return (obj.valeur > 0) ? obj.valeur : '';
});

ou obj.value ou...
Mais...: «obj.valeur (ou obj.value) is undefined»
Je ne trouve pas la propriété qui me rende la valeur en cours de traitement (obj.????)
Point positif néanmoins, à chaque donnée traitée pour affichage, le système entre bien dans la fonction.
La solution passe donc par la récupération de la valeur de la donnée en cours de traitement.
Mais comment?

[NoSmoking]

Mais...: «obj.valeur (ou obj.value) is undefined»
Je ne trouve pas la propriété qui me rende la valeur en cours de traitement (obj.????)

la propriété que tu dois mettre dépend de la structure de tes datas.

Dans l'exemple que j'ai mis, j'ai laissé en commentaire la méthode classique d'appel, il s'agit bien de valeur, dans ton cas si j'en crois (sic) (barChart1.define('label','#tbSeries0#') il te faut utiliser tbSeries0 donc

Code :

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

1
2
3
barChart1.define('label',function(obj){
    return (obj.tbSeries0 > 0) ? obj.tbSeries0 : '';
});

[jpwitz]

Re-Merci NoSmoking

Mais dans mon cas le débogueur me dit : «obj.tbSeries0 is undefined»
Cependant il me dit aussi
- que tbSeries0 a la valeur "D2013_02" (tbSeries0 -> "D2013_02")
- et que (obj.D2013_02 -> "0") 0 étant (enfin) la valeur convoitée

tbSeries0 n'est donc pas l'identifiant, dans obj, de la valeur recherchée, mais le nom de la variable contenant l'identifiant de la valeur recherchée.

????

[NoSmoking]

j'étais resté sur l'exemple que tu as mis juste avant mais effectivement dans ce cas il te faut visiblement utiliser obj.D2013_02

Code :

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

1
2
3
barChart1.define('label',function(obj){
    return (obj.D2013_02 > 0) ? obj.D2013_02 : '';
});

[jpwitz]

Sauf que D2013_02 est variable (D2013_03, D2013_05,D2014_17,etc...) et correspond à un empilement du barchart.
Cette variable a pour nom tbSeries0.
J'ai remarqué que chaque fois que le système affiche une donnée (une portion d'empilement d'une barre) il entre dans la fonction définie par
barChart1.define('label',function(obj){.....}
La solution résiderait dans l'obtention de la propriété qui défini cette position (obj.lapropriétéquivabien ou barChart1.lapropriétéquivabien ou????)
Mais quelle est son nom?

[NoSmoking]

L'objet passé à des propriétés qu'il t'appartient de connaitre pour faire le traitement en fonction de ce que tu souhaites.

J'ai du mal à saisir comment est articulé ton graphe, pas un spécialiste de dhtmlXChart.

Par contre tu peux parcourir ton objet à la recherche de la bonne propriété en te basant sur un radical commun par exemple 'D201'

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
var data = [
  {  'id': 1,  'D2013_02': 10 },
  {  'id': 2,  'D2014_17': 20 },
  {  'id': 3,  'D2015_21': 30 }
];
 
function getValeur(radical, obj){
  for( var cle in obj){
    if( cle.indexOf( radical) !=-1){
      return obj[cle];
    }
  }
  return 'undefined';
}
// test sur l'objet data avec radical D201
for (var i = 0, nb = data.length; i < nb; i++) {
  alert(getValeur('D201', data[i]));
}