Neun JavaScript-Bibliotheken zum Gestalten interaktiver Charts

Eine Menge Daten mit sehr vielen Variablen möchte gut strukturiert und möglichst interaktiv dargestellt werden. Rohe Datensätze sind schwer zu verstehen, deshalb müssen Daten erst aufbereitet werden, um sie verständlich zu machen. Diagramme können hier hilfreich sein. Im Webdesign können wir für diese Aufgabenstellung Charts nutzen, denn auch hier sind Diagramme eine der besten Möglichkeiten zur Visualisierung von komplexen Datensätzen. Das Hinzufügen von interaktiven Möglichkeiten gibt dem Leser die Möglichkeit, mit den Datensätzen zu interagieren. Interaktive Charts sind recht leicht in eine Website zu integrieren, vor allem mit der Hilfe einiger JavaScript-Bibliotheken. Im heutigen Beitrag stellen wir Ihnen neun Bibliotheken vor, mit denen sich interaktive Diagramme leicht realisieren lassen.

JavaScript-Bibliotheken zur Erstellung von Diagrammen

Wir haben Ihnen neun der besten Chart-Bibliotheken herausgesucht und bieten so viele Möglichkeiten, große Datenmengen gut verständlich zu visualisieren. Manche Bibliotheken sind recht einfach aufgebaut und nicht ganz so umfangreich. Einige andere hingegen lassen jede Art der Daten-Visualisierung zu, die man sich denken kann. Eine modular aufgebaute Bibliothek haben wir ebenfalls verlinkt. Ihr Vorteil dabei ist, dass Sie nur das in Ihre Website integrieren müssen, was wirklich notwendig ist. Das bläht die Website nicht auf und ist der Performance förderlich. Alle vorgestellten Chart-Bibliotheken sind kostenlos.

Chart.js – HTML5 Charts

Chart.js nutzt das HTML5 Canvas Objekt zur Darstellung der Daten. Die Bibliothek vermag Ihre Daten in sechs verschiedenen Diagramm-Stilen darzustellen und ist responsiv und modular. Modular bedeutet, dass nicht genutzte Chart-Typen entfernt werden können, um die Website nicht unnötig zu belasten. Farben und Animationen können recht leicht angepasst werden.

Chartist.js – Simple responsive Charts

Die Chartist.js Bibliothek nutzt die SVG-Technik zur Darstellung ansprechender Diagramme. Der Vorteil von Chartist ist die strikte Trennung von Design (CSS) und Funktion (JS). Für Entwickler sind die genutzten SASS-Dateien im Download-Paket enthalten. Mit Hilfe der Chartist Animation API können Sie jede Art von Diagrammen realisieren. Chartist hat sich der Kollege Denis Potschien schon einmal näher angeschaut.

C3.js – D3-based reusable chart library

Der Funktionsumfang von C3.js ist recht groß. Die Bibliothek ist mit interessanten Effekten und Animationen versehen, wie die Demo auf der Startseite zeigt. Über die API kann jederzeit Einfluss auf die Darstellung der Charts genommen werden. Eine Design-Anpassung ist ebenfalls leicht mit CSS möglich. Auf der Seite mit den Beispielen lässt sich schnell erkennen, wie wandelbar und vielseitig die Diagramm-Bibliothek ist.

Flot – Attractive JavaScript plotting for jQuery

Flot ist ein jQuery Plugin für die Erstellung von Interaktiven Charts. Unterstützt werden hierbei das Drehen der Diagramme, das Schwenken, Hinein- oder Hinaus-Zoomen und Datenpunkt-Wechselwirkungen. Einzelne Datenbereiche innerhalb der Diagramme können ab- oder hinzugeschaltet werden. Einige Demo-Beispiele sind online, man kann das Plugin vor dem Download testen. Flot bietet Ihnen eine Vielzahl von Diagramm-Typen und basiert auf dem HTML5 Element Canvas.

ECharts – Bring your Data to Life

Die ECharts-Bibliothek kommt aus China und scheint dort sehr populär zu sein. EChart ist erstaunlich umfangreich, wie die Liste der Features und die Demo-Beispiele zeigen. Die Bibliothek schafft es, große Datenmengen zu verarbeiten (Plotten von bis zu 200.000 Datenpunkten auf einem kartesischen Diagramm) und hat die Fähigkeit, mühelos Daten zu extrahieren, zu integrieren und den Austausch von Daten zwischen mehreren Diagrammen vorzunehmen. Man kann recht einfach von einen Diagrammtyp zu einem anderen wechseln und eine Menge mehr.

Peity – Progressive SVG Charts

Peity ist ein weiteres, auf SVG basierendes Chart-Plugin für jQuery. Es vermag jedes Element in ein Diagramm zu konvertieren, und bietet für die visualisierte Aufbereitung der Daten folgende Chart-Typen an: Torten und Donut Charts, Balkendiagramme und Liniencharts. Ein einfaches Element wie zum Beispiel ein <span> kann mittels eines Wertes (<span class=“donut“>1/5</span>) und dem Aufruf  $(‚.donut‘).peity(‚donut‘) in ein Donut-Diagramm gewandelt werden.

dc.js – Dimensional Charting Javascript Library

DC.js nutzt ebenso wie C3.js auch die D3-Bibliothek, um ansprechende Diagramme mittels SVG zu rendern. DC.js wurde entwickelt, um Daten und Analysen für den Desktop und mobile Geräte aufzubereiten. Benutzer-Interaktionen lassen sich zu Ihren Diagrammen hinzufügen. Die Software erlaubt Ihnen, alle Arten von Diagrammen – von einfach bis hochkomplex – darzustellen.

Google Charts

Die Google Charts API erlaubt es, interaktive Diagramme und Datentools mit der Google Visualization API zu erstellen. In der Chart-Galerie können Sie die einzelnen Chart-Typen ansehen und die von Ihnen benötigten auswählen. Um beginnen zu können, muss etwas JavaScript der Website hinzugefügt werden, damit die Google Charts Bibliothek geladen werden kann. Nach dem Auflisten der Daten in Ihrer Website, können Sie mit einigen benutzerdefinierten Änderungen der Chart-Optionen eine Darstellungsvariante bestimmen. Nun muss nur noch ein Chart-Objekt mit einer ID und innerhalb der Website ein <div> Element erstellt werden, innerhalb dessen sich die Diagramme befinden sollen.

NVD3 Re-usable charts for d3.js

NVD3 ist keine eigenständige Bibliothek, sondern eine Reihe von nutzbaren Vorlagen für die d3.js Bibliothek. Die Tabellen und Diagramme sind mit d3.js aufgebaut und dienen als Vorlage zum leichteren Erlernen von d3.js. Sie können die Vorlage beliebig verändern und so leichter verstehen, wie Sie gute Diagramme aufbauen sollten. Die Vorlagen finden Sie in den Beispielen.

Links zum Beitrag

• Chart.js – HTML5 Charts
• Chartist.js – Simple responsive Charts
• C3.js – D3-based reusable chart library
• Flot – Attractive JavaScript plotting for jQuery
• ECharts – Bring your Data to Life
• Peity – Progressive SVG Charts
• dc.js – Dimensional Charting Javascript Library
• Google Charts
• NVD3 Re-usable charts for d3.js
• Dr. Web: Daten spannend aufbereitet: Chartist.js erstellt responsive, animierte Diagramme mit SVG

(dpe)