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

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

• Q1

  • $18,450.00

  • $16,500.00

• Q2

  • $34,340.72

  • $32,340.72

• Q3

  • $43,145.52

  • $32,225.52

• Q4

  • $18,415.96

  • $32,425.00

Elle na rien de particulier :

<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>

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! !!

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

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

• • 5%

  • 5%

  • 75%

  • 15%

<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 :

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

— iDo 03/02/2006 17:41