[Erledigt] Integer Variable als Grafik ausgeben...

[Abweichler]

Hallo zusammen!
Gerne würde ich in meinen Statistik-Script die Ausgabe optisch etwas aufwerten. Hierzu würde ich jeweils eine Integer Variable in Form eines horizontalen Balken ausgeben.

Nun wollte ich gerne Anfragen, ob jemand von euch eine Lösung oder zumindest einen Ansatz kennt, die man studieren kann und als Vorlage dient.


Ich stelle mir das so vor:

1. Zuerst wird der höchste Counter-Stand ermittelt. Dieser Wert entspricht der Balkenbreite von 100%, z.B. 200 Pixel.
2. Jede weitere integer Variable wird jetzt Prozentual zum höchsten Counter-Stand ausgegeben.

Wäre dankbar für einen Hinweis!

[drsoong]

Natürlich, die denken ja auch nicht über den Tellerrand hinaus

Das geht vielen Entwicklern leider genauso

[fab]

Hier ging es erstmal darum, wie der Balken an sich umgesetzt werden kann. Zugegeben, in der Praxis würde ich wohl noch ein span-Element mit dem Wert einbauen und das wiederum mit CSS ausblenden, ähnlich wie es bei grafischen Überschriften empfohlen wird.

Der Hinweis ist natürlich wichtig, also danke für die Ergänzung.

[ChrisB]

Ich nehme mal an, Du beziehst Dich da auf meinen vorangegangenen Kommentar.

Indirekt - ich habe dein „obercool“ nur als Aufhänger genommen, die Anregung auch noch unterzubringen.

Wo wird denn da eine Barierre aufgebaut

Das war eher auf die anderen Beiträge bezogen: Schau dir fabs Vorschlag an, oder auch den von eagle275 (solange er da nicht wenigstens ein alt-Attribut ergänzt) - ohne Anzeige von Grafiken oder ohne CSS ist der Informationswert dieser Vorschläge gleich Null.

Habe das selber in zwei Projekten so umgesetzt und die Kunden sind einfach nur hingerissen.

Natürlich, die denken ja auch nicht über den Tellerrand hinaus

[drsoong]

Noch cooler wäre, wenn man das ganze erst mal barrierearm aufbaut - und nicht zuerst an blinki-bunti denkt ...

Prozentwerte könnte man bspw. erst mal in einer Liste ausgeben;
CSS und ggf. JavaScript können dann daraus „Balken“ machen.

Ich nehme mal an, Du beziehst Dich da auf meinen vorangegangenen Kommentar.

1. Wo wird denn da eine Barierre aufgebaut, wenn Bars wie beschrieben animiert werden?

2. Habe das selber in zwei Projekten so umgesetzt und die Kunden sind
einfach nur hingerissen.

Sicherlich habe ich natürlich zuerst an den Anwendungszweck gedacht, bevor ich dann noch die Animation spendiert habe.

[ChrisB]

Noch cooler wäre, wenn man das ganze erst mal barrierearm aufbaut - und nicht zuerst an blinki-bunti denkt ...

Prozentwerte könnte man bspw. erst mal in einer Liste ausgeben;
CSS und ggf. JavaScript können dann daraus „Balken“ machen.

[drsoong]

Obercool wäre natürlich, wenn Du die Bars per Javascript nach Seitenaufbau von 0 auf x% wachsen läßt. So wie man das im Fernsehen oft bei Wahlhochrechnungen sieht.

[Abweichler]

Wow! Vielen Dank! Das sind wirklich sehr brauchbare Ansätze bzw. Lösungen!

[fab]

Ich würde es erstmal mit dynamischem CSS versuchen, etwa so:

<div class="bar_wrapper"><div class="bar" style="width:<?php echo bcdiv($value, $max, 3); ?>%"></div></div>

Die Klassen bar_wrapper und bar kannst du dann nach mit Hintergrundfarben usw. gestalten.

[robo47]

Jenachdem was für balken es sind ob einfarbig oder auch was anderes mit runden ecken oder so, kannst du auch einfach die bilder als hintergrund-grafik(en) via css setzen und den text ganz normal drüberlegen, macht das ganze schneller und einfacher.

[eagle275]

alles was mit dynamisch erzeugter Grafik zu tun hat .. schau dir mal die image... funktionen aus gd an ...

$graf=imagecreate(200,50);
$backgrnd=imagecolorallocate($graf,253,253,253); // fast weiß als Hintergrund
$balkenfarbe=imagecolorallocate($graf,255,0,0); // schön rot leuchtend 
imagefilledrectangle($graf,0,0,($score*200)/$maxscore,50,$balkenfarbe);
$dateiname="balken.png";
imagepng($graf,$dateiname);

echo '<img src="'.$dateiname.'" style="border: 1px solid #A1A1A1;" />'; 

so könnte das aussehen