Niveau
..........
En rapport...

Introduction

Il y a peu de temps, je cherchais comment générer des graphiques…
Plusieurs solutions sont apparus : Applet java, Php couplé a GDlib et le CSS, la plus inattendu !
Cet article s'inspire de http://www.meyerweb.com/eric/css/edge/bargraph/demo.html

Exemple

L'exemple ci-dessous, est une balise UL mise en page via CSS (si si, je vous jure !)

  • Q1
    • $18,450.00

  • Q2
    • $34,340.72

  • Q3
    • $43,145.52

  • Q4
    • $18,415.96

Méthode

La liste

Elle na rien de particulier :

html4strict
<ul id="q-graph">
 
<li class="qtr" id="q1">Q1
<ul>
<li class="sent bar" style="height: 111px;"><p>$18,450.00</p></li>
<li class="paid bar" style="height: 99px;"><p>$16,500.00</p></li>
</ul>
</li>
 
<li class="qtr" id="q2">Q2
<ul>
<li class="sent bar" style="height: 206px;"><p>$34,340.72</p></li>
<li class="paid bar" style="height: 194px;"><p>$32,340.72</p></li>
 
</ul>
</li>
 
<li class="qtr" id="q3">Q3
<ul>
<li class="sent bar" style="height: 259px;"><p>$43,145.52</p></li>
<li class="paid bar" style="height: 193px;"><p>$32,225.52</p></li>
</ul>
</li>
 
<li class="qtr" id="q4">Q4
<ul>
<li class="sent bar" style="height: 110px;"><p>$18,415.96</p></li>
<li class="paid bar" style="height: 195px;"><p>$32,425.00</p></li>
 
</ul>
</li>
</ul>
On remarque néanmoins que les LI on une classe, pour leur esthétique mais que leur longueur est définie dans la balise style. Cette longueur est la longueur du bâton de l'histogramme. Ici on la vois en pixel mais vous pouvez l'exprimer en pourcentage, pour vous simplifier la vie !

Le CSS

La partie la plus difficile commence ici.
Pour des raison de simplicité de lecture, je vais directement commenter le CSS :
!!note : Ne pas confondre colonne et bâton! !!

css
#q-graph {
/* Ceci est la classe du UL principal qui contient toute les autres données */
/* Définir un With est un Height est essentiel, c'est ça qui donne les dimension du graphique */
  width: 600px;
  height: 300px;
/* Ne pas oublier d'enlever le point qui se trouve a coté des LI */
  list-style: none;
/* le reste n'est que positionnement et esthétique */
  position: relative; 
  margin: 1.1em 0 3.5em;
  padding: 0;
  background: #DDD;
  border: 2px solid gray;
  font: 9px Helvetica, Geneva, sans-serif;
}
#q-graph ul {
/* Une colonne étant un UL dans un UL, on défini les paramètres des colonnes */
  margin: 0; 
  padding: 0; 
  list-style: none;
}
#q-graph li {
/* Ceci défini les colonnes (largeur, positionnement des bâton a l'intérieur,position du titre...) */
  position: absolute; 
  bottom: 0; 
  width: 150px; 
  z-index: 2;
  margin: 0; 
  padding: 0;
  text-align: center; 
  list-style: none;
}
#q-graph li.qtr {
/* esthétique des colonnes */
  height: 298px; 
  padding-top: 2px;
  border-right: 1px dotted #C4C4C4; 
  color: #AAA;
}
#q-graph li.bar {
/* esthétique des batons */
  width: 60px;  
  border: 1px solid;  
  border-bottom: none;  
  color: #000;
}
#q-graph li.bar p { 
/* esthétique de titre dans les bâtons */
  margin: 5px 0 0;  
  padding: 0; 
}
#q-graph li.sent {
/* la position left est importante car le bâton 2 a comme left : left(baton1) + espacement. Il faut donc pensé a espacer les bâton !! */
  left: 13px;
/* esthétique d'un baton en particulier */
  background: #DCA;
  border-color: #EDC #BA9 #000 #EDC;
}
#q-graph li.paid {
/* la position left est importante car le bâton 2 a comme left : left(baton1) + espacement. Il faut donc pensé a espacer les bâton !! */
  left: 77px;  
/* esthétique d'un bâton en particulier */
  background: #9D9;
  border-color: #CDC #9B9 #000 #BFB;
}
/* position de la colonne 1 */
#q-graph #q1 {left: 0;}
/* position de la colonne 2 */
#q-graph #q2 {left: 150px;}
/* position de la colonne 3 */
#q-graph #q3 {left: 300px;}
/* position de la colonne 4 */
#q-graph #q4 {left: 450px; border-right: none;}

Simplification

On a pas forcement besoin de colonne, les bâton peuvent suffire.

    • 5%

    • 5%

    • 75%

    • 15%

Dans ce cas simplifier la liste comme ceci :

html4strict
<ul id="q-graph">
<li class="qtr" id="q1"><ul>
<li class="bar" style="left:13px;height:5%"><p>5%</p></li>
<li class="bar" style="left:77px;height:5%"><p>5%</p></li>
<li class="bar" style="left:141px;height:75%"><p>75%</p></li>
<li class="bar" style="left:205px;height:15%"><p>15%</p></li>
</ul></li></ul>

et modifier le CSS pour avoir ceci dedans :

css
#q-graph li.qtr { border:0 }
.bar { background: #9D9; }

iDo 03/02/2006 17:41