05.11.2015 | Ein Bild sagt mehr als 1000 Worte

Farbliche Visualisierung mittels HTML und CSS

Das konkret „Problem“ stellte sich innerhalb der Planung/Verwaltung von Veranstaltungen. Zwar war klar, für wie viele Teilnehmer (TNmax) maximal Plätze vorhanden sind und auch die Anzahl der Anmeldungen (TNist) war bekannt, aber die reine Darstellung der Zahlen z. :B. in der Form 74 von 90 half den Mitarbeitern nicht immer gleich beim ersten Blick weiter. Es wäre daher schön, wenn man die aktuelle Auslastung (TNpro) gleich erkennen würde. Und wenn möglich, dies auch noch grafisch.

Die Berechnung der Auslastung ist einfach. Nachkommastellen brauchen wir dabei nicht.
In PHP sieht dies etwa so aus:

	$TNpro = round($TNist/$TNmax*100,0);

Der farbliche Hintergrund

Dies mittels HTML und CSS grafisch darzustellen ist letztlich genauso einfach. Hierfür brauchen wir als erstes einmal eine Grafik, welche uns als Hintergrund dienen kann:

div.auslast_bg {
	display: inline-block;
	height: 50px;
	width: 400px;
	background: linear-gradient(
		to right, 
		rgb(85, 85, 85) 5%, 
		rgb(255, 255, 0) 20%,
		rgb(0, 255, 0) 40%,
		rgb(255, 140, 0) 45%,
		rgb(139, 0, 0) 50%
	);
}

Die Breite von 400px entspricht dabei einer Auslastung von 200 % – Darüber hinaus macht wohl in den wenigsten Fällen Sinn.

<div class="auslast_bg"></div>

Die Maske

Als nächsten kann diese in den eigentlichen Container eingebunden werden. Dessen Definition sollte zumindest bei Höhe und Breite nicht größer sein als der Hintergrund. Zudem wird alles was nicht in den Container passt abgeschnitten:

div.auslast {
	display: inline-block;
	overflow: hidden;
	min-height: 10px;
	max-width: 400px;
}

Die Verwendung erfolgt prinzipiell in der Art:

<div class="auslast">
	<div class="auslast_bg"></div>
</div>

Farbliche Darstellung der Auslastung

Jetzt muss das Ganze nur noch in die entsprechende Breite (und ggf. passende Höhe) gebracht werden. Hierzu wird der oben berechnete Wert verdoppelt (400px entsprechen 200%) und als style="width:...px;" auf die Maske übertragen:

 82%
<div class="auslast" style="width:164px;height:1em;">
	<div class="auslast_bg"></div>
</div>&nbsp;82%

Fazit

Kaum Aufwand, große Wirkung.

Thema:    HTML / CSS
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _