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 : '';
  },