Discussion :

[ciols]

Bonjour bonjour,

Mon problème est simple : Le label de mon Xaxis ne se situe pas où je le voudrais. J'aimerai qu'il soit sur les | et pas au milieu.



Voici mon code JS :

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
37
38
39
40
41
42
43
44
45
46
47
48
<script type="text/javascript" class="code">
$(document).ready(function() {
    graph('Graph');
    graph('Camember');
});
 
function graph(div) {
	var traf = <?php echo json_encode($sommeTraf);?>;
	var abscisseSem = <?php echo json_encode($nbSem);?>;
	var plot1 = $.jqplot ('Graph', [traf], {
		axes : {
			xaxis : {
				renderer : $.jqplot.CategoryAxisRenderer,
				ticks : abscisseSem
			}
		},
		cursor:{
            show: true,
            zoom: true
        }
	});
 
	var nomeq = <?php echo json_encode($tabEq);?>;
	var valeach = <?php echo json_encode($pourcent);?>;
	var tabFin = [];
 
	for (i = 0 ; i < valeach.length ; i++)
	{
		tabFin.push([nomeq[i],valeach[i]]);
	}
 
	var plot2 = $.jqplot ('Camember', [tabFin],
	{
		title: ' ',
		seriesDefaults: {
			shadow: false,
			renderer: jQuery.jqplot.PieRenderer,
			rendererOptions: {
				startAngle: 180,
				sliceMargin: 4,
				showDataLabels: true }
  		},
  		legend: { show:true, location: 'w' }
    }
  	);
}
 
</script>

Je ne sais pas comment faire pour le placer correctement, j'ai pourtant épluché tous les exemples sur jQplot mais en vain.

Avez vous des idées ?

Merci d'avance !

[devyan]

Bonjour,

On dirait un problème de paramétrage... donc un coup d'oeil à la documentation sur tickOptions de jqPlot devrait permettre de trouver une solution.

[ciols]

J'ai regardé au niveau des différentes options de tickOptions et des différents exemples de graphs mais je n'ai rien trouvé de probant...

J'ai aussi changé le renderer mais toujours pareil, rien de concluant...

[NoSmoking]

Bonjour,

J'aimerai qu'il soit sur les | et pas au milieu.

es tu sûr d'avoir choisi le bon type de graph ?

[ciols]

Je pense que oui, j'ai utilisé cette base : http://www.jqplot.com/deploy/dist/ex...ne-charts.html

Cependant je ne suis pas sûr à 100%.

[NoSmoking]

J'ai regardé cette bibliothèque et le moins que l'on puisse dire c'est qu'elle me paraît moins souple que certaines.

Pour que les données s'écrivent sous les traits d'axe il semble qu'il faille que celles ci doivent être des valeur numérique. Dans ton cas, même si tu as oublié de nous fournir le code généré, cela ne devrait pas te poser de problème pour transformer tes données de ['S33', S34',....] en un Array de nombres.

Le mieux reste que tu récupères tes données sous la forme (valeurs pour exemple)

Code :

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

var data = [[26,31],[27,70],[28,39],[29,18],[30,51],[31,33],[32,88],[33,29],[34,57]];

Ainsi sur cette base tu pourrais avoir comme fonction d'affichage simple

Code :

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

var oPlot = $.jqplot ('id_plot', [data]);

Maintenant tu vas nous dire qu'il manque le S devant le numéro...mais là c'est prévue, il existe la propriété prefix, donc au final tu pourrais avoir ceci

Code :

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

1
2
3
4
5
6
7
8
9
var oPlot = $.jqplot ('id_plot', [data], {
    axes: {
        xaxis: {
            tickOptions: {
                prefix : 'S'
            }
        }
    }
});

[ciols]

Merci pour ta réponse.

Je rencontre cependant un souci concernant, la création de ce tableau parce que je récupère actuellement deux tableaux (dans mon PHP) que je remplis grâce à deux requêtes.

J'ai essayé de transformer ces deux tableaux en un seul avec leurs valeurs respectives séparées par une ',.

Code :

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

1
2
3
4
for ($i = 0 ; $i < count($nbSem) ; $i++)
{
	$tabTot[][] = $nbSem[$i].",".$sommeTraf[$i];
}

Idem en rajoutant des []

Code :

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

1
2
3
4
5
 
for ($i = 0 ; $i < count($nbSem) ; $i++)
{
	$tabTot[][] = "[".$nbSem[$i].",".$sommeTraf[$i]."]";
}

Mais ça ne marche pas...

J'essaye actuellement de le faire avec les différents exemples de récupération d'info via json/ajax etc

Ca marche avec ça :

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
	var traf = <?php echo json_encode($sommeTraf);?>;
	var abscisseSem = <?php echo json_encode($nbSem);?>;
	var tot = [[]];
 
	for (var i = 0 ; i < traf.length ; i++)
	{
		tot.push([abscisseSem[i],traf[i]]);
	}
 
	var plot1 = $.jqplot ('Graph', [tot], {
		axes: {
	        xaxis: {
	        	min: 1,
	        	max: 53,
	            tickOptions: {
	            	showGridline: true,
	                prefix : 'S',
	                formatString: '%i'
	            }
	        }
   		},
   		cursor:{
            show: true,
            zoom: true
        }
	}
	);

[NoSmoking]

Concernant la partie PHP tu pourrais faire par exemple

Code php :

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

1
2
3
4
for( $i = 0, $nb = count($nbSem) ; $i < $nb; $i++){
  $tab[] = array( $nbSem[$i], $sommeTraf[$i]);
}
echo 'var data = ' ,json_encode( $tab), ";\n";

Pour info j'ai vu que

Code :

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

1
2
prefix : 'S',
formatString: '%i'

pouvait être remplacé directement par

Code :

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

formatString: 'S%i'