Irmen's blog

(staaf)grafieken in CSS

Een van de meest gebruikte grafieken is toch wel de staafgrafiek denk ik. Staafgrafiekjes in een website kun je met een of ander server-side component ingewikkeld gaan zitten maken en dan een korrelig gifje gaan ophoesten. Waarom zou je het zo omslachtig, traag en lelijk doen, als je met een beetje CSS ook perfecte staafdiagrammen kan maken op basis van normale HTML tables/lijsten?

Een aantal voorbeelden:

• simpel voorbeeld inclusief lelijk gifje als vergelijking
• zowel horizontale als verticale diagrammen
• erg fraai voorbeeld met gradients
  (gebruik een willekeurige browser behalve IE, omdat die niet kan omgaan met de transparency. Voor IE zul je de "platte" versie moeten gebruiken die ergens genoemd wordt)