Balkendiagramm

    Wenn man mal nach Balkendiagramm googlet findet man hauptsächlich so nette Tuts die auf imagecreate() bauen oder JavaScript-Lösungen.

    Geht aber auch ohne Grafiken oder JavaScript und is ganz einfach mit ein bisschen CSS und PHP.

    CSS: Hintergrund des Balkens

    Code
    .diahg
{
    width:20em; /* Gesamtbreite des Balkens */
    height:1em; /* Gesamthöhe des Balkens */
    background-color:#999999; /* Hintergrund des Balkens */
}

    CSS: Vordergrund des Balkens

    Code
    .diavg
{
    height:100%; /* An Hintergrund anpassen */


    /* Schrift im Vordergrund-Balken */
    font-size:0.8em;
    font-weight:bold;
    text-align:right;
}


    Die Breite und die Farbe des Vordergrunds werden im style-Attribut mit PHP festgelegt.

    PHP
    <div class="diahg">


    <?php echo'<div class="diavg" style="width:'.$width.'%; background-color:#'.$color.';">'.$width.'%</div>'; ?>


</div>


    Beispiel:

    PHP
    <?php
    // Werte aus einer Datenbank oder woher auch immer
    $width = '40';
    $color = 'ffaa00';
?>

    Ergebnis:

    [Blockierte Grafik: http://i35.tinypic.com/2jdozty.png]


    Gruss, Donkey

    Hehe, was ganz einfaches.
    Wär selber nicht auf die Idee gekommen, aber im Grunde ganz simpel.

    Einfach normales CSS.
    Wenn du jetzt noch ein Kuchendiagramm darstellen lassen könntest, dann wärst du Profi ;).

    Aber ehrlich gesagt ein richtiges Script ist das auch nicht, na? :P