Balkendiagramm in Tabellenform?

filament

filament

Erfahrenes Mitglied
Hey Leute,

ich versuche mich gerade daran Datenbankergebnisse grafisch darzustellen. Ich habe gedacht ich nutze dazu einfach mal eine Tabellenstruktur. Das Problem scheint irgendwie zu sein, dass ich 4 mögliche Felder habe. (links oben, links unten, rechts oben, rechts unten)

Diese Felder sollen in Abhäbgigkeit voneinander dargestellt werden. Die rechte Seite gibt aus, wieviel ein User eingezahlt (unten links) und wieviel er ausgezahlt hat (oben links). Diese Grafiken sollen immer parallel angezeigt werden.

In der rechten Spalte soll dann die Differenz der beiden ausgegeben werden. Sprich der Balken soll nach oben gehen (oben rechts) wenn er mehr ausgezahlt hat und nach unten (unten rechts) wenn er mehr eingezaht hat. Das ganze soll noch farblich mit rot / grün hervorgehoben werden. In die Balken sollen auch noch die Eurosummen.

Ich verwende folgenden Code:

PHP: 
$depositdif = $data->sumein-$data->sumaus;
       $betsdif = $data->sumwin-$data->sumloss;
       $gesamt_one = $data->sumein+$data->sumaus;
       $erg_one = 100/$gesamt_one*$data->sumein;
       $erg_two = 100/$gesamt_one*$data->sumaus;
       $erg_three = 100/$gesamt_one*$depositdif;
       $zwischen = $depositdif*2;
       $zwischen2 = $depositdif-$zwischen;
       $erg_four = 100/$gesamt_one*$zwischen2;
       echo "<center>
             <table width='50%' cellpadding='0' cellspacing='1px'>
              <tr width='100%'>
               <td width='50%' valign='top'><font size='1'>Ein- / Auszahlung</font><br/>
                <table width='100%' cellpadding='0' cellspacing='1px'>
                 <tr width='50%' valign='bottom'>
                  <td height='".$erg_two."%' bgcolor='green'>$data->sumaus Euro</td>
                 </tr>
                 <tr width='50%' valign='top'> 
                  <td height='".$erg_one."%' bgcolor='red'>$data->sumein Euro</td>
                 </tr>
                </table>
               </td>
               <td width='50%' valign='top'><font size='1'>Differenz</font><br/>
                <table width='100%' cellpadding='0' cellspacing='1px'>";
                 if ($depositdif > 0)
                 {
                  echo "<tr width='50%' valign='bottom'>
                         <td height='".$erg_two."%'></td>
                        </tr>
                        <tr width='50%' valign='top'>
                         <td height='".$erg_three."%' bgcolor='red'>$depositdif Euro</td>
                        </tr>";
                 }
                 elseif ($depositdif < 0)
                 {
                  echo "<tr width='50%' valign='bottom'>
                         <td height='".$erg_four."%' bgcolor='green'>$zwischen2 Euro</td>
                        </tr>
                        <tr width='50%' valign='top'>
                         <td height='".$erg_one."%'></td>
                        </tr>";
                 }
                 else
                 {
                  echo "<tr width='50%' height='0' valign='bottom'></tr>
                        <tr width='50%' height='0' valign='top'></tr>";
                 }
          echo "</table>
               </td>
              </tr>
             </table>
             </center>";
Im Moment sieht es so aus, dass er keine Rücksicht auf die % Zahlen der Variablen in PHP nimmt und statt dessen 4 Zellen anzeigt, die gleichgroß sind. (Unabhängig von den Werten)

Das war mein 2. Versuch. Vorher hatte ich den <tr> Feldern keine 50% zugewiesen. Und auch valign war nicht vergeben. Jedoch hatte er das Differenz-Feld dann immer irgendwo in der Luft hängen, jedoch aber nicht dort wo das andere steht.

Geh ich den Aufbau der Tabelle falsch an?
 
Okay bin nun auf Div Container umgestiegen, da es übersichtlicher scheint.

Aber auch hier klappt es nicht wie ich will.

PHP: 
$depositdif = $data->sumein-$data->sumaus;
       $betsdif = $data->sumwin-$data->sumloss;
       $gesamt_one = $data->sumein+$data->sumaus;
       $erg1 = 200/$gesamt_one*$data->sumein;
       $erg2 = 200/$gesamt_one*$data->sumaus;
       $erg3 = 200/$gesamt_one*$depositdif;
       $zwischen = $depositdif*2;
       $zwischen2 = $depositdif-$zwischen;
       $erg4 = 200/$gesamt_one*$zwischen2;
       $erg5 = 200-$erg2;
       $erg6 = 200-$erg1;
       $erg7 = 200-$erg4;
       echo "<div width='50%'>
              <div class='fleft' style='width: 50%'>
              <div>Ein- / Auszahlung</div>
              <div style='height:".$erg5."px'></diV>
              <div style='height:".$erg2."px background: green;'></diV>
              <div style='height: 2px; background: black;'></div>
              <div style='height:".$erg1."px background: red;'></diV>
              <div style='height:".$erg6."px'></diV>  
              </div>
              <div width='50%'>
               <div>Differenz</div>";
       if ($depositdif > 0)
       {
        echo "<div style='height:200px'></diV>
              <div style='height: 2px; background: black;'></div>
              <div style='height:".$erg4."px background: red;'></diV>
              <div style='height:".$erg7."px'></diV>";
       }
       elseif ($depositdif < 0)
       {
        echo "<div style='height:".$erg7."px'></diV>
              <div style='height:".$erg4."px background: green;'></diV>
              <div style='height: 2px; background: black;'></div>
              <div style='height:200px'></diV>";
       }
       else
       {
        echo "<div style='height:200px'></diV>
              <div style='height: 2px; background: black;'></div>
              <div style='height:200px'></diV>";
       }     
       echo "</div>
             </div>";
Angezeigt werden nur die beiden schwarzen Striche, aber nicht dort wo ich sie haben wollte eigentlich^^ Jemand eine Idee?
 
Um innerhalb eines Tabellengerüsts relative (prozentuale) Höhen definieren zu können, benötigt mindestens das/die umschliessende/n <table>-Element/e ebenfalls eine Höhenangabe als Referenzpunkt für die in ihm folgenden Angaben.

Übergibst du das HTML-Dokument den Browsern im standardkonformen Modus, ist zusätzlich für die beiden HTML-Elemente <html> u. <body> solch eine Regelung vonnöten, wenn die derzeit fehlenden Höhenangaben ebenfalls prozentual definiert werden.

CSS: 
html,body { height:100%; margin:0; }

Siehe hierzu Webmaster FAQ -> CSS Warum wird mein Layer nicht auf das gesamte Browserfenster gestreckt?


//edit: Gleiches gilt auf das zwischenzeitlich umgestiegene <div>-Element ;-)
 
Zuletzt bearbeitet:
Okay das ganze hat nun geklappt, aber warum floatet er mein div nicht sondern stellt es untereinander dar?

Ein clearer habe ich gesetzt. Und zwar nach den beiden div elementen. Liegt es vielleicht an der Verschachtelung in der sich die divs befinden die nebeneinander dargestellt werden sollen?
 
Zuletzt bearbeitet:
filament hat gesagt.:
warum floatet er mein div nicht sondern stellt es untereinander dar?
Zum Vergrößern anklicken....
Existiert da im Hintergrund ein CSS, von dem nur du was weißt?

Ein <div>-Element "floatet" nicht automatisch, indem seine Breite auf 50% herabgesenkt wird, und so "nach-Adam-Riese" nun zwei von seiner Sorte in der Reihe Platz finden.

Deine (aus den Tabellen übernommenen) width="50%"-HTML-Attribute besitzt dieser Elementtyp zudem gemäß seiner Attribut-Referenz überhaupt nicht, womit diese Angaben in den Browsern auch komplett ins Leere laufen.

Ein umlaufender Rahmen visualisiert hier die tatsächlich gegebenen Boxengrenzen.

HTML: 
<body>
    <div width='50%' style="border:thin solid #dedede;">...</div>
</body>

Damit behält es als Block-Element weiterhin eine Breite von 100%, die es im horizontalen Anzeigebereich seines Elternelements (in meinem Code <body></body>) ausfüllt, und erzeugt typischerweise Absätze im Dokument-/Textfluß.

Nutze hier komplett CSS zur Elementformatierung - float und clear scheinen dir zumindest ja ein Begriff zu sein.
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück