# Balkendiagramm in Tabellenform?



## filament (23. Oktober 2010)

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:


```
$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?


----------



## filament (23. Oktober 2010)

Okay bin nun auf Div Container umgestiegen, da es übersichtlicher scheint.

Aber auch hier klappt es nicht wie ich will.


```
$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?


----------



## SpiceLab (23. Oktober 2010)

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.


```
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 ;-)


----------



## filament (23. Oktober 2010)

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?


----------



## SpiceLab (23. Oktober 2010)

filament hat gesagt.:


> warum floatet er mein div nicht sondern stellt es untereinander dar?


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.


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


----------



## SpiceLab (23. Oktober 2010)

Übrigens, wieso betreibst du überhaupt diesen Aufwand, wo es hierfür z.T. gebrauchsfertige PHP-Lösungen gibt, nach denen du dich erst gestern im hiesigen PHP-Board mit deinem Thema Datenbank Resultate grafisch darstellen? Wie gehts am besten? erkundigt hattest, und darin auch zwei interessante Empfehlungen erhalten hast? 

Oder konnten dich die drei JpGraph-Demos new_bar1.php,  new_bar3.php und new_bar6.php nicht überzeugen?


----------

