[Flot] Graphique - classes d'individus

**popoliline** · 26/01/2010, 17h06

Bonjour à tous,

J'aimerais utiliser la bibliothèque Flot de JQuery pour réaliser un graphique sous forme de classes d'individus et je n'arrive pas à trouver la méthode pour le réaliser.
Les données seraient issues d'un fichier XML et se présenteraient de la façon suivante (résultat issus d'un traitement statistique réalisé sous R) :

Code :

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

1
2
3
4
5
6
7
 
<wps:LiteralData dataType="integer">
  one of 1,906,884 possible partitions of this variable into 6 classes
  [15,45]   (45,75]  (75,123] (123,192]  (192,255] 
         17         13          10            8              1 
 (255,390] 
           1 </wps:LiteralData>

Donc la première classe irait de 15 à 45 et contiendrait 17 individus.
la seconde irait de 45 (inclus) à 75 et contiendrait 13 individus et ainsi de suite ...

Le problème c'est que je n'ai pas trouvé comment réaliser un graphique présentant les données sous forme de classes. En gros j'aurais aimé faire comme un graphique sous forme de barre mais dont la largeur serait égale aux bornes des classes et la hauteur égale au nombre d'individus de la classe.

Quelqu'un aurait une petit idée de la procédure / modif à réaliser ?
Je pense que cela doit se faire (peut être même que quelqu'un l'a déjà fait) mais débutant sous jQuery je ne pas trop par où commencer ...
Mais peut-être existe-il d'autres libriaires qui pourraient répondre à ce besoin ?

En vous souhaitant une bonne fin de soirée
Merci

**danielhagnoul** · 27/01/2010, 00h59

Bonsoir.

J'ai parcouru les documentations et il me semble que les plugins Flot et Visualize n'offrent pas la possibilité de changer l'épaisseur de la barre individuellement.

Je pense que vous souhaiter un beau graphique canvas, hélas je ne peux vous proposer qu'un tracé en JavaScript qu'il vous restera à adapter suivant vos besoins :

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
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
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8"/>
	<meta name="Author" content="Daniel Hagnoul" />
	<title>Page type</title>
	<style>
		body {
			background-color:#dcdcdc;
			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:serif;
		}
		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {
			margin:0px;
			padding:0px;
		}
		p {
			padding:6px;
		}
		ul,ol,dl {
			list-style:none;
			padding-left:6px;
			padding-top:6px;
		}
		li {
			padding-bottom:6px;
		}
		div#conteneur {
			width:95%;
			margin:12px auto;
			padding:6px;
			background-color:#FFFFFF;
			color:#000000;
			border:1px solid #666666;
			font-size:0.8em;
		}		
 
		/* TEST */
		div#bars {
			width:600px;
			height:auto;
			margin:12px;
			background-color:#F5F5F5;
			border:1px solid black;
			font-size:0.9em;
			font-weight:bold;
		}
	</style>
	<script charset="CP-1252" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
	<script>
 
		function bargraph(){
			var couleurs = ['#be1e2d','#666699','#92d5ea','#ee8310','#8d10ee','#5a3b16','#26a4ed','#f45a90','#e9e744'];
 
			var values = [
				[17, 44-15, couleurs[0]],
				[13, 74-45, couleurs[1]],
				[10, 122-75, couleurs[2]],
				[8, 191-123, couleurs[3]],
				[1, 254-192, couleurs[4]],
				[1, 390-255, couleurs[5]]
			];
 
			var valuesLength = values.length;
			var maxValue = values[0][0];
 
			for(var i = 0; i < valuesLength; i++){
			  maxValue = Math.max(maxValue, values[i][0]);
			}
 
			for (var i = 0; i < valuesLength; i++){
				var newBar = $("<span>", {
					html: values[i][0] + " (" + values[i][1] + ")",
					css:{
						display:"block",
						width:"0px",
						height:"0px",
						backgroundColor:values[i][2],
						marginBottom:"3px", /* espace de 3px entre chaque barre */
						color:"#ffffff",
						border:"1px solid grey"
					}
				});
 
				$("#bars").append(newBar);
 
				newBar.animate({
					width: (100 * values[i][0] / maxValue) + "%",
					height: parseInt((6 + values[i][1])/2) + "px" /* min 6/2=3px */
				}, 2000);
			}
 
			$("#bars span").last().css("marginBottom","0px");
		}
 
		$(function(){
			bargraph();
		});
	</script>
</head>
<body>
	<div id="conteneur">
		<p>Mon beau graphique</p>
		<div id="bars"></div>
		<p>Explications</p>
	</div>
</body>  
</html>

**popoliline** · 27/01/2010, 10h17

Bonjour,

Merci beaucoup pour cette première réponse

Effectivement, c'est bien la possibilité de changer individuellement l'épaisseur de la barre que je souhaite obtenir.
J'ai beau fouiller un peu partout sur le net et je ne trouve pas vraiment de solution clé en main comme dirait l'autre

...

Petite question par rapport à la solution que vous me proposer, est-il possible d'obtenir comme sur Flot ou d'autres librairies des informations au survol de la souris ?
J'imagine que oui car vous faites appel à la librairie de JQuery (pour l'ouverture du graph) donc on devrait pouvoir adapter cette fonction de la même façon.

Bon, je vais essayer d'adapter ce que vous me proposez à mes besoins, ca va pas être simple

et je reviendrais vous faire part de mes avancées.
Mais si quelqu'un d'autre avait d'autres idées, ce serait pas de refus

Encore merci

**popoliline** · 16/03/2010, 14h20

Bonjour,

Désolé du manque de suivi pour ce post, je viens donner un peu de nouvelles
Donc juste pour rappel, cette question d'histogramme fait suite à un projet étudiant que j'ai eu à réaliser en peu de temps et dont l'objectif pour faire simple était de réaliser des traitements statistiques et carto par l'intermédiaire du logiciel R. Le but était de représenter des données sous forme de cartes et de graphiques d'où la question.

Pour cela il fallait absolument avoir une représentation sous forme d'histogramme et non pas de simple barres.
Après recherches, je n'ai rien trouvé qui aurait pus nous servir. La solution proposée par danielhagnoul était une bonne piste mais on est reparti de la bibliothèque Flot et on l'a modifiée (non sans mal

il faut l'avouer mais c'était finalement possible) pour répondre à nos besoins (classes de largeurs et de couleurs différentes avec affichage des données au survol)

Je vous joins une image de ce que cela donne. Si vous êtes intéressé par le script n'hésitez pas, je suis en train de faire une note dessus, il me manque juste un peu de temps pour la terminer.

Sur ce, bonne fin de journée à tous

[Flot] Graphique - classes d'individus

jQuery

Vue hybride

Discussions similaires

Partager

Partager