plugin jqPlot : inverser l'ordre d'affichage

Version imprimable

Bonjour ou bonsoir :)

j'utilise un graphique jqplot pour afficher l'evolution du classement d'un joueur lors d'un concours.
Tout marche très bien, mais malheureusement, la première place au classement se retrouve contre l'axe des abscisses alors que le 50 ème tout en haut. J'aurais voulu savoir s'il était possible d'inverser l'axe des ordonnées pour afficher le 1 en haut et le 50 en bas ?

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
$(document).ready(function(){
      $.jqplot.config.enablePlugins = true;
 
line1 = [[1, 50],[2,15],[3,2]];
plot2 = $.jqplot('chart', [line1], {
    title: 'Progression du rang de <?php echo $pseudo; ?>',
 
    axes: {
        // options for each axis are specified in seperate option objects.
        xaxis: {
          label: "Journée",
          ticks: [[1,1], [2,2], [3,3], [4,4], [5,5], [6,6], [7,7], [8,8], [9,9], [10,10],
           [11,11], [12,12], [13,13], [14,14], [15,15], [16,16], [17,17], [18,18], [19,19], [20,20],
           [21,21], [22,22], [23,23], [24,24], [25,25], [26,26], [27,27], [28,28], [29,29], [30,30],
           [31,31], [32,32], [33,33], [34,34], [35,35], [36,36], [37,37], [38,38]],
          pad: 0
        },
        yaxis: {
          label: "Rang",
        }
      },
    series:[{},{lineWidth:1, color:'#999999', showMarker:true}]
});
});

Je bloque là dessus et je ne trouve aucune doc m'expliquant si c'est possible ou non.

Merci d'avance :)

12/07/2011, 19h32
danielhagnoul

Bonjour

La documentation de jqPlot : http://www.jqplot.com/docs/files/usage-txt.html

Je n'avais pas encore utilisé jqPlot.

Comme j'avais un peu de temps, j'ai lu rapidement la documentation et j'ai joué avec un exemple.

Je n'ai rien vu dans l'API qui permet de réaliser la chose facilement, mais j'ai lu en diagonale. ;)

J'y suis arrivé, mais c'est "chinois" : il faut regarder le monde à l'envers. :mouarf:

Il faut donner l'axe des Y à "l'envers" ~~et surtout il faut donner la coordonnée Y des points de la ligne à "l'envers".~~

[EDIT 2011-07-17]

Non ! Une inversion suffit ! Voir mon dernier message.

WOUAH !!! Bravo !

Merci, j'ai un peu adapté ton code au niveau des journées en abscisses, je les affichent toutes d'un coup.

Par contre, au niveau des ordonnées, j'ai un léger soucis, les données peuvent osciller entre 1 et 600 (1ère et dernière place du classement).

En prenant appuie sur ton code, je créé tous les points des ordonnées. Et du coup ca fait un peu "moche" car toutes les données se chevauchent...

Voici mon code:

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
$sql = "select * from pronos_rang where prono_user = ".$_GET['idUser']." and prono_journee = ".$row['journee']." order by prono_journee desc";
          $exeRang = mysql_query($sql);
          $RSRang = mysql_fetch_array($exeRang);
 
          $line .= '['.$row['journee'].', '.($rangMax - ($RSRang['prono_rang'] - 1)).'], ';
          $i++;
        }
        $line = substr($line, 0, strlen($line)-2);
        $ticks = '';
        $k = 0;
        for($j = 1; $j<=$rangMax; $j++){
          $ticks .= '['.$j.', '.($rangMax - $k).'], ';
          $k++;
        }
        $ticks = substr($ticks, 0, strlen($ticks)-2);
?>
</table>
<script language="javascript" type="text/javascript">
    $(function(){
      /* --- */
      $.jqplot.config.enablePlugins = true;
 
      // il faut tenir compte à partir de zéro ?
      // donc ici 7 positions de 0 à 6
      // pour inverser on déduit de 7
      // pour obtenir [1,6] on doit donner [1, 7 - 6]
 
      $.jqplot("chartDivID", [[ <?php echo $line ?> ]], {
        title: "Progression du rang de <?php echo $pseudo ?>",
        axes: {
          xaxis: {
            label: "Journée",
            min: 1,
            max: 38,
            ticks: [[1, 1], [2, 2], [3, 3], [4, 4], [5, 5], [6, 6], [7, 7], [8, 8], [9, 9], [10, 10], [11, 11], [12, 12], [13, 13], [14, 14], [15, 15], [16, 16], [17, 17], [18, 18], [19, 19],
            [20, 20], [21, 21], [22, 22], [23, 23], [24, 24], [25, 25], [26, 26], [27, 27], [28, 28], [29, 29], [30, 30], [31, 31], [32, 32], [33, 33], [34, 34], [35, 35],[36, 36],[37, 37], [38, 38]]
          },
          yaxis: {
            label: "Rang",
            min: 1,
            max: <?php  echo $rangMax; ?>,
ticks: [<?php echo $ticks ?>]
          }
        },
        series:[{},{lineWidth:1, color:'#999999', showMarker:true}]
      });
    });
  </script>

Il y a-t-il un moyen de mettre des paliers plus larges si le rang max est très grand ?

Je continue de chercher de mon coté, mais merci de ton aide ;)

13/07/2011, 09h14
danielhagnoul

Bonjour

Impossible de tester votre extrait de code, le code PHP ne me sert à rien.

Si vous voulez que je puisse jouer aussi ;), il faut copier-coller le code qui apparaît dans votre navigateur ou me donner un lien vers votre page de test.

Citation:

Il y a-t-il un moyen de mettre des paliers plus larges si le rang max est très grand ?

Oui, on peut normalement choisir l'échelle des axes.

Pour élaborer un exemple plus complexe et réaliste, il me faudrait des données réalistes.

Bonsoir

Oops ! C'était bien mes débuts avec jqPlot ! En fait il suffit d'une inversion, celle de l'axe des Y. Exemple avec des "paliers" plus large.

http://www.developpez.net/forums/u285162-a273-i1102.png

#chartDivID {height:400px; width:600px; margin:12px; }.

<div id="chartDivID"></div>.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$.jqplot.config.enablePlugins = true;
 
$.jqplot("chartDivID", [[ [1, 131], [5, 128], [9, 105], [12, 100], [18, 98], [19, 92], [20, 89], [25, 80], [28, 65], [30, 60], [33, 55], [36, 50], [38, 26] ]], {
	title: "Progression du rang de XYZ",
	axes: {
		xaxis: {
			label: "Journée",
			ticks: [[1, 1], [3, 3], [5, 5], [7, 7], [9, 9], [11, 11], [13, 13], [15, 15], [17, 17], [19, 19], [21, 21], [23, 23], [25, 25], [27, 27], [29, 29], [31, 31], [33, 33], [35, 35], [37, 37], [39, 39]]
        },
        yaxis: {
            label: "Rang",
			ticks: [[131, 131], [121, 121], [111, 111], [101, 101], [91, 91], [81, 81], [71, 71], [61, 61], [51, 51], [41, 41], [31, 31], [21, 21], [11, 11], [1, 1]]
        }
    },
	series:[{lineWidth:3, color:'#ff4466', showMarker:true}]
});

[Edit 2011-07-18T00:50:00.000+02:00]

Le code complet du même exemple avec une légende et l'affichage de la valeur de la coordonnée Y :

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
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<meta name="Author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<link rel='stylesheet' href='http://fonts.googleapis.com/css?family=Redressed&subset=latin&v2'>
	<link rel="stylesheet" href="http://danielhagnoul.developpez.com/lib/jPicker/css/jPicker.dvjh-1.1.6.min.css" />
	<link rel="stylesheet" href="../jqPlot/jquery.jqplot.css" />
	<style>
		/* Base */
		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {margin:0; padding:0; }
		body {background-color:rgba(210, 214, 98, 0.5); color:#000000; font-family:sans-serif; font-size:medium; font-style:normal; font-weight:normal; line-height:normal; letter-spacing:normal; }
		h1,h2,h3,h4,h5 {font-family:'Redressed', cursive; padding:6px; }
		p, div, td {word-wrap:break-word; }
		pre, code {white-space:pre-wrap; word-wrap:break-word; }
		img, input, textarea, select {max-width:100%; }
        img {border:none; }
		h1 {font-size:2em; text-shadow: 4px 4px 4px #bbbbbb; text-align:center; }
		p {padding:6px; }
		.conteneur {width:95%; min-width:800px; min-height:300px; margin:12px auto; background-color:#ffffff; color:#000000; border:1px solid #666666; }
 
		/* --- */
        #chartDivID {height:400px; width:600px; margin:12px; }
	</style>
</head>
<body>	
	<h1>Forum jQuery</h1>
	<section class="conteneur">
 
		<div id="chartDivID"></div>
 
	</section>
	<footer itemscope itemtype="http://data-vocabulary.org/Person">
		<time datetime="2011-07-18T00:50:00.000+02:00" pubdate>2011-07-18</time> <span itemprop="name">Daniel Hagnoul</span> <a href="http://www.developpez.net/forums/u285162/danielhagnoul/" itemprop="url">@danielhagnoul</a>
	</footer>
	<script charset="utf-8" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
	<script charset="utf-8" src="http://danielhagnoul.developpez.com/lib/jPicker/jpicker-1.1.6.min.js"></script>
	<script charset="utf-8" src="../jqPlot/jquery.jqplot.min.js"></script>
	<script charset="utf-8" src="../jqPlot/plugins/jqplot.pointLabels.js"></script>
	<script>
		$(function(){
			/* --- */
 
$.jqplot.config.enablePlugins = true;
 
$.jqplot("chartDivID", [[ [1, 131, "131"], [5, 128, "128"], [9, 105, "105"], [12, 100, "100"], [18, 98, "98"], [19, 92, "92"], [20, 89, "89"], [25, 80, "80"], [28, 65, "65"], [30, 60, "60"], [33, 55, "55"], [36, 50, "50"], [38, 26, "26"] ]], {
	title: "Progression du rang de XYZ",
	axes: {
		xaxis: {
			label: "Journée",
			ticks: [[1, 1], [3, 3], [5, 5], [7, 7], [9, 9], [11, 11], [13, 13], [15, 15], [17, 17], [19, 19], [21, 21], [23, 23], [25, 25], [27, 27], [29, 29], [31, 31], [33, 33], [35, 35], [37, 37], [39, 39]]
        },
        yaxis: {
            label: "Rang",
			ticks: [[131, 131], [121, 121], [111, 111], [101, 101], [91, 91], [81, 81], [71, 71], [61, 61], [51, 51], [41, 41], [31, 31], [21, 21], [11, 11], [1, 1]]
        }
    },
	series:[{
		pointLabels:{
			location:'nw',
			ypadding: 6
		},
		label: "Test",
		lineWidth:3,
		color:'#ff4466',
		showMarker:true
	}],
	legend: {show: true, location: "nw"}
});
 
			/* jPicker : http://www.digitalmagicpro.com/jPicker/, outil pour choisir rapidement une couleur */
			$.fn.jPicker.defaults.images.clientPath="http://danielhagnoul.developpez.com/lib/jPicker/images/";
			$(".conteneur").jPicker({window:{expandable:true,title:"jPicker : choissisez une couleur :",
			alphaSupport:true,position:{x:'screenCenter',y:'top'}},color:{ active:new $.jPicker.Color({ r: 210, g: 214, b: 98, a: 128 })}},
			function(color, context){var c = color.val("all");if (c){$("body").css("backgroundColor", "rgba(" +
			c.r + "," + c.g + "," + c.b + "," + (c.a/255).toFixed(2) + ")");}});
		});
	</script>
</body>  
</html>