© saicle/Shutterstock.com
Kolumne: The Good Parts

Kolumne: The Good Parts


Wer mag sie nicht, die bunten Bildchen, die bei der täglichen Arbeit helfen, einen Überblick über komplexe Daten zu gewinnen? Linien-, Torten-, Donut- und Balkendiagramme sind nur einige Varianten. Die Erzeugung von aussagekräftigen Graphen jedoch ist keine leichte Tätigkeit: Viel Energie und Gedanken müssen aufgewendet werden, um Diagramme zu entwerfen, die einen wirklichen Mehrwert bieten. Und selbst wenn diese Aufgabe erfolgreich abgeschlossen ist, bleibt immer noch die Frage nach dem „Wie“. Wie werden die entworfenen Graphen nun gerendert? Dieser Artikel widmet sich einigen JavaScript-Bibliotheken, die das Rendern von Graphen erleichtern und Entwicklern somit das lästige „Wie“ abnehmen.

Vor einigen Jahren waren die Dinge noch einfach, ein Großteil der Businesslogik einer Applikation wurde serverseitig ausgeführt. War die Erzeugung von Diagrammen Bestandteil dieser Logik, so fand sie ebenfalls auf dem Server statt. Heute sind die Dinge komplizierter geworden. Der Wunsch nach dynamischen Diagrammen, die nicht nur durch Animationen glänzen, sondern dem Benutzer ebenfalls ein gewisses Maß an Interaktionsmöglichkeiten bieten, kann nur durch clientseitig gezeichnete Graphen erfüllt werden. Glücklicherweise bieten moderne Browser alle nötigen Technologien, die dies ermöglichen – ganz ohne Flash oder sonstige proprietäre Komponenten.

Das Zeichnen beliebiger Abbildungen im Browser ist allerdings noch nicht gleichbedeutend mit der Ausgabe sinnvoller Diagramme. Neben extrem spezialisierten Diagrammtypen existieren eine ganze Handvoll typischer Diagramme wie Linien-, Kuchen, Balken- und Donutdiagramme. Wird einer dieser Typen benötigt, so bieten sich zur Erzeugung fertige Bibliotheken an. Hierdurch wird Arbeitszeit gespart, die besser in den Entwurf und eine sinnvolle Darstellungsform der Daten fließen kann. Im Folgenden werden drei unterschiedliche Bibliotheken betrachtet. Es werden sowohl kurze Anwendungsbeispiele demonstriert als auch die jeweiligen Vor- und Nachteile beleuchtet.

Chart.js

Chart.js [1] ist eine extrem kompakte und recht neue Bibliothek zur Erzeugung von Diagrammen auf Clientseite mittels JavaScript. Ein großer Vorteil dieser Bibliothek ist, dass sie bewusst auf jegliche Abhängigkeiten von anderen JavaScript-Bibliotheken verzichtet. Durch diese Entscheidung ist Chart.js gerade einmal 4,5 kB groß (minifiziert und gzip-komprimiert). Unterstützt werden Linien-, Balken-, Netz-, Polar- und Donutdiagramme. Abbildung 1 zeigt Beispiele für jeden dieser ...

Neugierig geworden?

Angebote für Teams

Für Firmen haben wir individuelle Teamlizenzen. Wir erstellen Ihnen gerne ein passendes Angebot.

Das Library-Modell:
IP-Zugang

Das Company-Modell:
Domain-Zugang