• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Werte in balken darstellen

Status
Für weitere Antworten geschlossen.
logisch :grin:

so habe das hier nun so gemacht!
leider wird der hintergrund weiß!

PHP: 
    while($row = mysql_fetch_assoc($sql))
    {
    //Wert aus DB einer Variable zuordnen
    $wert = $row['prozent'];
    // in Prozent umrechnen
    $prozent = round(100 / $ganz * $wert);

switch ($wert) {
    case 0: case 15:
        $farbe = "#FB3807";
        break;
    case 15: case 30:
        $farbe = "#F41809";
        break;
    case 30: case 45:
        $farbe = "#B4781A";
        break;
    case 45: case 60:
        $farbe = "#B8B11B";
        break;
    case 60: case 75:
            $farbe = "#9EE113";
        break;
    case 75: case 90:
        $farbe = "#1AB41F";
        break;
    case 90: case 100:
        $farbe = "#02FD06";
        break;
    default:
        $farbe ="#FFFFFF";
    }

      echo '<tr>';
      echo '<td id="titel" align="center" height="40" width="45%"><b>'.$row['titel'].'<img src=">" alt=""></td>';
      echo '<td><div align="left" style="background-color: ' .$farbe. '; overflow: hidden; width: '.$prozent.'%; height: 20px;"><b>'.$row['prozent'].' %</b></div></td>';
      echo '</tr><tr>';
      echo '<td colspan="2" align=\'left\' width=\'10%\'>'.$row['beschreibung'].'</td>';
      echo '</tr>';
    }

MfG Marcel
 
Werbung:
kein wunder da die schleife nur angesprochen wird, wenn ein wert genau stimmt ^^ also bei dir nur bei

0, 15, 30, 45, 60, ... ;)
 
Ich hatte aber gelesen, wenn man das so schreibt, dann bedeutet das "von bis"!

Wie bekomme ich denn ein "von - bis" hin??

MfG Marcel
 
Werbung:
ich würde die farben nicht so "zuteilen" sondern mit einer farbe arbeiten, die ich in mehreren stärken anzeige oder evtl mit den farbwerten spielen, dazu solltest du wissen wie RGB funktioniert, so kannst du für jede % zahl eine nette farbe generieren und z.b. den rot / grün gehalt spielend anhand der anderen anpassen.
 
vergess den farbverlauf, wenn du nichtmal normale balken schaffst, dann diesen auch nicht.

ansätzte:

Bild stauchen *bitte schnell wieder vergessen*
php gdlib *viel arbeit*

entweder erzeugt man dann direkt das ganze diagramm in der gdlib oder man erzeugt balken für balken, andere möglichkeit wäre einen 1 px verlauf zu erzeugen und die einzelnen farblayer übereinander zu legen (transparent) oder direkt in der richtigen farbe zu erzeugen, denke da gibt es viele möglichkeiten, denke aber auch, davon solltest du vorerst die finger lassen.

dennoch ist viel möglich, wie dieses beispiel zeigt:
Diagramm Linien Fläche
 
Werbung:
Ok lasse das vorerst als normalen Balken, habe gerade nen anderes Problem, mein install-script ist fehlerhaft auf server, obwohl local einwandfrei funktioniert!

fehlermeldung:
Code: 
You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near ')' at line 6
Script:
PHP: 
<?php
error_reporting(E_ALL);
  include '../../inc/config.php';
  // Konfigurationsdatei laden

@mysql_select_db('Verein') OR die('Kann keine Verbindung zur Datenbank hergestellt werden.');
$qry = '
    CREATE TABLE `status` (
      `id` INT AUTO_INCREMENT PRIMARY KEY,
      `titel` VARCHAR(30) NOT NULL,
      `beschreibung` VARCHAR(300) NOT NULL,
      `prozent` INT(3) NOT NULL,
    )';

mysql_query($qry) OR die(mysql_error());

if($qry)
  {
  echo '<h1 align="center">Installation abgeschlossen</h1>';
  echo '<p align="center">Datenbank und Tabellen wurden erfolgreich angelegt.</p>';
  echo '<br>';
  echo '<p align="center"><a href="index.php">zurück</a></p>';
  }
?>
MfG Marcel

EDIT.: Habe Fehler gefunden!
 
Zuletzt bearbeitet:
der fehler ist das er hier

PHP: 
$qry = ''.
    'CREATE TABLE `status` ('.
    '  `id` INT AUTO_INCREMENT PRIMARY KEY,'.
    '  `titel` VARCHAR(30) NOT NULL,'.
    '  `beschreibung` VARCHAR(300) NOT NULL,'.
    '  `prozent` INT(3) NOT NULL,'. // <==
    ')';

ein komma zu viel gemacht hat
 
Werbung:
Hallo,
Der Eintrag ist etwas alt, trifft aber exakt mein Thema, damit habe ich auch schon die Grundstruktur dessen was ich jetzt machen will.

Undzwar, möchte ich, dass es in etwa so aussieht, wie bei Plesk:

sysinfoog5.jpg


Ich habe auch schon 4 Bildchen gebaut die ich benutzen will, einmal die Anfangsrundung, dann der Grüne Teil, der Weisse Rahmen und den Abschluss des Rahmens.

Nur meine Frage, wie kann ich ihm sagen er soll das Bild sooft wiederholen, bis er z.B 80% oder auch 76,5% dargestellt habe? oder eben 123Mb ?

Habe es mal probiert...(PROBIERT!!) aus den Code Schnippseln hier aus dem Beitrag.
Code: 
<?php
$my100 = $fulram; // Die 100%
$calc  = $useram; // Diesen Wert wollen wir in einem Balken anzeigen.
$calc = round(100 / $my100 * $calc); ?>
<img src="img/gruen_rund.gif" width="9" height="4" /></img><?php
echo '<div style="background-image:img/rahmen.gif"; width: 150px; height: 4px;">
<div style="background-image:img/gruen.gif; overflow: hidden; width: '.$calc.'%; height: 4px;">
</div></div>';
?>
<img src="img/rahmen_ende.gif" width="9" height="3" /></img>
</div>

Gruß, raws17

PS: Man kann hier im Forum keine Beiträge erstellen mit dem Firefox Browser (V.3.0.3), kein Vorwurf sondern ein Hinweis ;)
 
So in etwa habe ich das Problem angegangen, mit farblich getrennten balken um Visuell zu unterstreichen was los ist.

Code: 
	if($auslastung >= "100"){$auslastung = "100";}
         if($auslastung <= "75"){$b="green.gif";}
         if($auslastung >= "75"){$b="yellow.gif";}
         if($auslastung >= "90"){$b="red.gif";}
         if($auslastung == "100"){$b="black.gif";}
         echo $languane['system']['serv1'].": $auslastung %<br>
        
<div style='border: 1px solid rgb(0, 0, 0); width: 700px; height: 10px;background-color:#EFEFEF;'>
<div style='width:".($auslastung*7)."px; height: 10px; background-image: url(files/bal/$b);'></div></div>";
 
Hallo,
habe es jetzt mal versucht mit einem Bild, doch er zeigt mir die ganze Zeit nur den leere Hintergrund.

Edit: So sieht es jetzt aus, er zeigt mir alles Richtig an - nur wie kann ich vorne und hinten noch diese Rundung anhängen? Sieht jetzt so aus: Oben alt unten neu.
sysinfo2222yz4.png


Nur vorne und hinten möchte ich noch eine Rundung haben ;)

Aktueller Code:
Code: 
<?php
$my100 = $fulram; // Die 100%
$calc  = $useram; // Diesen Wert wollen wir in einem Balken anzeigen.
$ausgabewert = round(100 / $my100 * $calc); // % ausrechnen
$b = "gruen_fill.png"; //Balken Grafik
echo " - ($ausgabewert%)";
echo '<div style="width: 150px; height: 9px;background-image: url(show/img/empty.gif);">
<div style="width:'.$ausgabewert.'%; height: 9px; background-image: url(show/img/fill.gif);"></div></div>'
?>
 
Zuletzt bearbeitet:
Werbung:
Häng halt einfach Deine Images vorne und hinten dran. Die sollten ja klein genug sein, um nicht in die Berechnung der Länge einzugehen, oder?
 
Efchen schrieb:
Häng halt einfach Deine Images vorne und hinten dran. Die sollten ja klein genug sein, um nicht in die Berechnung der Länge einzugehen, oder?
Zum Vergrößern anklicken....

ja klar ;) Nur wenn ich es mit <img> tags mache kommen die irgendwohin (drunter drüber usw) und mit <div> tags tut er so als ob keine da wären.
Sonst würde ich nicht fragen ;)
Hab schon probiert mit der "position" funktion rumzuprobieren, nur das ändern nichts.

Gruß
 
Werbung:
Wenn ich das jetzt richtig sehe, hast Du ein einziges <div>, das den Balken beschreibt. Also wäre denkbar, ein <div> davor und eines dahinter zu setzen.

Wir erinnern uns: Block-Elemente nebeneinander bekommt man mit float.

Wir erinnern uns: Wollen wir Bilder als Hintergrundgrafik einbauen in ein Element ohne Inhalt, muss das Element von uns manuell auf die benötigte Größe gesetzt werden.

Noch Fragen?
 
Wenn ihr floatet um die Hintergrundgrafiken nebeneinander zu legen,
müsste ihr den Wert für width entsprechend angepassen.
Eine Grafik die einigermaßen rund aussehen soll, müßte mindestens 6*6px groß sein. Bei kleineren werten für width würde das schon irritieren.

Es ist gar nicht nötig die Grafiken nebeneinander zu legen.
Der Balken könnte schon die rechte Rundung enthalten (mit background-position: top right; ausrichten).
Die linke Rundung würde ich einfach über den Balken legen.

Beispiel ( $wert1="$wert1"."px" )
Code: 
<div id="balken1">
<div class="der_balken" style="<?php echo "width:$wert1;" ?>">
<span></span>
</div>
</div>
Das css dazu:
Code: 
#balken1,#balken2 {
    width: 300px;
    background-color: #646464;
  }

.der_balken {
    height: 20px;
    background-color: blue;
    background-image : url(balken.png);
    background-position: right top;
  }

.der_balken span {
    display: block;
    background-image : url(linke_rundung);
    background-repeat: no-repeat;
    height: 100%;
  }
Ohne Grafiken würde der Balken eckig und blau angezeigt werden.

Das Floaten von Elementen, die nur eine Hintergrundgrafik tragen sollen, halte ich in den meißten Fällen für Vermeitbar.
 
Vergiß das ganze Gehampel und mach es gleich richtig:
Nimm die Klasse "phplot". Zu finden bei
SourceForge.
Damit kannst du wunderschöne Chart-Grafiken erzeugen: Balken-, Kreis- und Tortendiagramme in 2D und 3d-Ansicht.
 
Werbung:
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben