Easy CSS Bar Chart

Für alle die ein ganz simples Balkendiagramm suchen, dass rein mit CSS und ohne Bilder umgesetzt wird und in allen Browsern funktioniert, gibt es nun die Easy CSS Bar Charts. Das ganze gibts in einer horizontalen und vertikalen Version, wobei der HTML Quelltext beinahe ident bleiben kann.

Example

Check out the Example | Beispiel ansehen
Works with: IE6, IE7, IE8, Latest Firefox, Chrome, Safari and Opera Versions

Easy CSS Bar Chart – Horizontal Style

HTML

<dl class="horizontal">
<dt>Avatar</dt>
<dd><span style="width:100%;">$ 2.740 Mio.</span></dd>
<dt>Titanic</dt>
<dd><span style="width:80%;">$ 1.843 Mio.</span></dd>
<dt>Lord of the Rings</dt>
<dd><span style="width:43%;">$ 1.119 Mio.</span></dd>
<dt>Pirates of the Caribbean</dt>
<dd><span style="width:40%;">$ 1.066 Mio.</span></dd>
<dt>Alice in Wonderland</dt>
<dd><span style="width:38%;">$ 1.021 Mio.</span></dd>
<dt>The Dark Knight</dt>
<dd><span style="width:35%;">$ 1.00 Mio.</span></dd>
</dl>

CSS

dl.horizontal {font-size:12px; font-family:Arial; width:500px;}
dl.horizontal dt {float:left; width:150px; clear:both; margin:0 0 5px 0; padding:3px;}
dl.horizontal dd {float:left; width:300px; border:1px solid #aaaaaa; margin:0 0 5px 0; padding:2px; -moz-box-shadow: 1px  1px 3px #aaaaaa;}
dl.horizontal dd span {background:#1770d3; display:block; color:#ffffff; text-indent:4px;}

Easy CSS Bar Chart – Vertical Style

HTML

<dl class="vertical">
<dt>Avatar</dt>
<dd><span style="height:100%;">$ 2.740 Mio.</span></dd>
<dt>Titanic</dt>
<dd><span style="height:80%;">$ 1.843 Mio.</span></dd>
<dt>Lord of the Rings</dt>
<dd><span style="height:43%;">$ 1.119 Mio.</span></dd>
<dt>Pirates of the Caribbean</dt>
<dd><span style="height:40%;">$ 1.066 Mio.</span></dd>
<dt>Alice in Wonderland</dt>
<dd><span style="height:38%;">$ 1.021 Mio.</span></dd>
<dt>The Dark Knight</dt>
<dd><span style="height:35%;">$ 1.00 Mio.</span></dd>
</dl>

CSS

dl.vertical {font-size:12px; font-family:Arial;}
dl.vertical dt {float:left; width:60px; margin:260px 0 0 0; text-align:center;}
dl.vertical dd {float:left; width:60px; height:200px; margin:50px 15px 0 -60px; padding:0px 2px 0px 2px; border:1px solid #aaaaaa;  position:relative; -moz-box-shadow: 1px  1px 3px #aaaaaa;}
dl.vertical dd span {width:60px; display:block; position:absolute; bottom:0px; background:#d3179c; color:#ffffff; text-align:center;

Der einzige Unterschied zwischen Horizontal & Vertical im HTML ist, dass bei der Horizontalen Version der span eine Breite bekommt und bei der vertikalen Version eine Höhe.

Download Horizontal & Vertical Version

  Easy CSS Bar Chart (1,0 KiB, 2.025 hits)