Balken-Diagramme im Web-Design

Reine Neugier, ein entstehender Eintrag zu WoW und viele schlechte fremde Beispiele, sind Grund für das folgende kleine Tutorial. Diagramme im Web reduzieren sich zu 90% auf hübsch gemachte Bild-Daten. Meist hochkompromierte Jpegs aus höchstkomplizierten Excel-Diagrammen. Solche Daten sind zum einen langweilig und zum anderen nicht wirklich barierefrei zugänglich. Das möchte ich nun hiermit ändern.

Ich gebe zu, dass ich hier mit dem Titel Diagramme einen Bruchteil aller möglichen Diagramm-Arten verarbeite: Balkendiagramme. Der Grund ist simpel. Zum einen deckt man mit dieser Art fast alle möglichen darzustellenden Daten ab und diese Art eignet sich perfekt, um sie einfach, sauber und dennoch ansehnlich mit HTML und CSS darzustellen.

Struktur

Die erste wichtige Frage lautet, wie baue ich ein Balken-Diagramm inhaltlich korrekt, zugänglich und valide auf, um es anschließend möglichst variabel mit CSS zu stylen?

Optisch sehr gelungen sind für meinen Geschmack, Diagramme auf den Produkt-Seiten von Apple. Ein Augenschmauß, der seine Schwächen im HTML versteckt. Nehmen wir dieses Beispiel. Wer in den Quellcode schaut, entdeckt Gutes und Schlechtes. Apple’s Webdesigner strukturieren hier ausladend mit Div- und span-Elementen innerhalb einer Definitions-Liste. Andere Lösungen für Diagramme setzten ebenfalls auf komplizierte Span-Div-Gebilde oder auch die immer beliebten normalen Listen.

Beispiel für die Anwendung von Diagrammen im Web: Apple Produkseite zum MacPro

Wer hier öfters liest, wird mitbekommen haben, dass ich immer für möglichst einfache und effektive Lösungen bin. Zwar ist mein Beispiel sicherlich schon zu einfach, aber es zeigt hoffentlich die grundlegende Herangehensweise. Meine Wahl für die HTML-Struktur eines solchen Diagramms fällt wie auch bei Apple auf eine Definitions-Liste.

Fraglich ist, ob eine solche Liste inhatlich auch korrekt für diese Art der Daten ist. Für meinen Geschmack ist es das geeignetste Element zur Darstellung von Diagramm-Daten. Inhatlich hat man einen Namen samt Wert und diese Zuordnung ist auch vom W3C ausdrücklich gestattet.

Definition lists vary only slightly from other types of lists in that list items consist of two parts: a term and a description. The term is given by the DT element and is restricted to inline content. The description is given with a DD element that contains block-level content.

[…]

Another application of DL, for example, is for marking up dialogues, with each DT naming a speaker, and each DD containing his or her words.

Solch eine Definitionsliste hat zwei wesentliche Vorteile: sie bietet sowohl von in Struktur als auch vom Inhalt, zwei zusammengehörige Tags: dt und dd. Für ein solches Balkendiagramm deshalb perfekt geeignet, um jeweils den Namen und Wert der darzustellenden Daten zu tragen.

<dl class="data-1">
<dt>Wert 1</dt>
<dd>46%</dd>

<dt>Wert 2</dt>
<dd>24%</dd>

<dt>Wert 3</dt>
<dd>89%</dd>

<dt>Wert 4</dt>
<dd>62%</dd>

<dt>Wert 5</dt>
<dd>29%</dd>
</dl>

Viel einfacher kann man solche Daten sicherlich nicht mit HTML umsetzen. Mit solch einer Struktur habe ich erstmal alles was ich brauche: eine dl-Liste samt einer Klasse und jeweils passenden dl- und dd-Tags. Spans und Divs sind erstmal überflüssig, was nicht überflüssig ist, sind noch ein paar zusätzliche style-Definitionen innerhalb der dd-Tags, da diese später den eigentlichen Balken darstellen sollen.

<dl class="data-1">
<dt>Wert 1</dt>
<dd style="width:46%;">46%</dd>

<dt>Wert 2</dt>
<dd style="width:24%;">24%</dd>

<dt>Wert 3</dt>
<dd style="width:89%;">89%</dd>

<dt>Wert 4</dt>
<dd style="width:62%;">62%</dd>

<dt>Wert 5</dt>
<dd style="width:29%;">29%</dd>
</dl>

Ein so einfache Stuktur lässt sich besonders auch ohne CSS ohne Bilder oder sonstiges sinnvoll auswerten, jeder Wert besitzt eine eigene Angabe. Wir nennen sowas barierefrei. Diese Informationen funktionieren schon jetzt, was fehlt ist nur noch eine bessere Visualisierung. Hier kommt wie immer CSS ins Spiel.

CSS

Auch das CSS ist wirklich einfach gestrikt. Ich definiere eine Breite für das DL-Tag, floate anschließend sowohl dt- als auch dd-Tags, lasse dt-Tag den Float clearen und verpasse beiden dann etwas Farbe und Kante. Zur besseren Übersicht hier jeweils nur die wichtigsten CSS-Zeilen:

dl.data-1 {
margin:20px 20px 10px 20px;
overflow:auto;
}
dl.data-1 dt {
border-right:0;
height:18px;
clear:left;
float:left;
text-align:center;
width:15%;
}
dl.data-1 dd {
text-align:center;
font-weight:bold;
float:left;
clear:none;
height:18px;
}

Da entsteht nun ein kleines Problem, sofern ich mein dt-Tag direkt neben dem dd- floaten möchte. Das dt-Tag braucht zum Floaten eine feste Breite, die dd-Tags daneben varieren aber in der Breite, durch die inline-style-Definitionen aus dem Schritt zuvor. Es gilt nun eine Lösung zu finden, die dem dt-Tag eine fixe Breite ermöglicht, ohne jedoch über die 100% der Gesamtbreite der Liste zu stossen. Angenommen ich gebe den dt-Tags eine feste Breite von 20%, dann habe ich ein Problem mit dem 3ten Wert im Diagramm, welches eine Breite von 89% darstellen soll. 20% + 89% = 109%. Ups.

An dieser Stelle lobe ich mir, dass zumindestens ein paar Dinge aus dem guten alten furchtbaren Mathematik-Unterricht hängen geblieben sind. Die Lösung besteht darin, der style-Breite den Wert der dt-Breite abzuziehen und schon kommen wir wieder auf die maximalen 100%. Angenommen ich möchte dem dt-Tag eine Breite von 15% geben, dann ändern sich die style-Werte wie folgt:

<dl class="data-1">
<dt>Wert 1</dt>
<dd style="width:31%;">46%</dd>

<dt>Wert 2</dt>
<dd style="width:9%;">24%</dd>

<dt>Wert 3</dt>
<dd style="width:74%;">89%</dd>

<dt>Wert 4</dt>
<dd style="width:47%;">62%</dd>

<dt>Wert 5</dt>
<dd style="width:14%;">29%</dd>
</dl>

dt- und dd-Tag besitzen nun zusammen die endgültige Breite, des darzustellenden Wertes. Der Rest ist ein kleiner farblicher Anstrich.

Beispiel Diagramm

Wert 1

46%

Wert 2

24%

Wert 3

89%

Wert 4

62%

Wert 5

29%

Zugegeben dieses Diagramm besitzt ein paar Einschränkungen, die in einem zweiten Teil hierzu behandelt werden. Was ich hier zeigen wollte war die Einfachheit von Balken-Diagrammen mit validem HTML und CSS, ohne aufgeblähte Struktur oder gar Grafiken. Das Thema bietet noch viel mehr… deshalb bis zum zweiten Teil.