Pour commencer, voilà la structure html du diagramme:

1
2
3
4
5
6
7
8

<div id="content">
  <div id="graph">
    <div class="bar"></div>
    <div class="bar"></div>
    <div class="bar"></div>
    <div class="bar"></div>
  </div>
</div>

Vous l’aurez compris, notre diagramme est composé de 4 barres! Passons maintenant à la première partie du CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

.bar {
  width: 100px;
  height: 100px;
  float: left;
}
.g1 {
  background: #029FD6;
  position: relative; 
}
 
.g2 {
  background: #E2017B;
  position: relative;
}
 
.g3 {
  background: #A4C409;
  position: relative;
}
.g4 {
  background: #939393;
  position: relative;
}

Maintenant, notre div .gX étant en position absolute, il suffit de lui donner la bonne taille et le bon attribut TOP dans votre feuille de style, et le tout est joué!
Si vous souhaitez votre un exemple qui fonctionne, voilà la page complète:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

 
<div id="content" style="height:300px;width:400px">
	<div id="graph" style="height:300px">
		<div class="bar">
		        <div class="g1" style="height:300px;width:100px"></div>
		</div>
		<div class="bar">
			<div class="g2" style="height:180px;width:100px"></div>
		</div>
		<div class="bar">
			<div class="g3" style="height:75px;width:100px"></div>
		</div>
		<div class="bar">
			<div class="g4" style="height:45px;width:100px"></div>
		</div>
	</div>
 
</div>

NB: Bizarrement, le plugin qui affiche le code HTML ne semble pas afficher l’attribut top dans le style des gX… Il suffit de le rajouter comme ceci: style= »height: 180px; top: 120px; width: 100px; » ou la valeur de top est la hauteur totale moins la hauteur de la barre souhaitée.

N’oubliez pas d’enregistrer la feuille de style dans le fichier styles.css

Le résultat devrait ressemble à ça:

Pour ne plus avoir à calculer le TOP et la hauteur de chaques barres, une petite fonction PHP ne fera pas de mal. Je ne la donnerai pas ici, ce n’est pas le but de l’article, mais si vous rencontrez un problème, n’hésitez pas à laisser un commentaire !