[jqPlot] Axes d'un graphique

Version imprimable

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.

http://img11.hostingpics.net/pics/507344graph.png

Voici mon code JS :

Code:

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 !

29/08/2014, 14h55
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.
01/09/2014, 14h13
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...
01/09/2014, 15h35
NoSmoking

Bonjour,

Citation:

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

es tu sûr d'avoir choisi le bon type de graph ?
01/09/2014, 15h40
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%.
01/09/2014, 20h22
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:

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:

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:

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

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:

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

Idem en rajoutant des []

Code:

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:

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
        }
	}
	);

Concernant la partie PHP tu pourrais faire par exemple
Code:

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:

1 2 prefix : 'S', formatString: '%i'
pouvait être remplacé directement par

Code:

formatString: 'S%i'