5 JavaScript Lösungen zum Erstellen von interaktiven Charts

2015-09-07 08:08 (Kommentare: 0)

Infotainment ist gefragt: Mit den folgenden JS-Bibliotheken erstellt ihr aus euren Daten mehr als nur einfache statische Charts. Ihr erstellt eine interaktive Datenvisualisierung, mit der Webseitenbesucher spielen können.

Chart.js

Die JavaScript Lösung Chart.js verspricht als no-dependency Library Freiheit. Funktionsumfang müssen Programmierer jedoch nicht missen: Torten-, Balken-, Linien- Diagramme und noch einiges mehr unterstützt diese Bibliothek. Anbieter mobiler Seiten können sich ebenfalls freuen. Chart.js ist responsive und basiert auf dem modernen HTML5 Standard.

Die Performance von Chart.js kann sich ebenfalls sehen lassen. Günstig für einen guten Pagespeed ist die Größe der Library. Minified und gezippt schlägt diese mit nur knapp mehr als 11 Kilobyte zu Buche. Wer nicht alle der 6 verfügbaren Chart-Typen benötigt, kann den Umfang zudem nochmal drücken. Chart.js ist modular aufgebaut. Es ist möglich nur den Code für die gewünschten Chart-Varianten zu laden.

Jquery Plug-in Flot

Die Flot Library für interaktive Liniendiagramme basiert auf jQuery. Sie wird als Plug-in in das beliebte Framework eingebunden. Die Bibliothek ist gut zur Darstellung von Kurvendiagrammen und Plots geeignet: Unterstützt werden interaktive Visualisierungen mitttels Linien, Punkten und gefüllten Bereichen des Diagramms. Auch Kombinationen sind möglich.

Torten-, Balkendiagramme und Co beherrscht die Lösung von Hause aus nicht. Eine Reihe von optionalen Plug-ins erlaubt es den Funktionsumfang und die Möglichkeiten bei der Visualisierung mit Flot zu erweitern. Dazu zählt auch ein Plug-in für Tortendiagramme.

Nach Aussagen der Entwickler soll die leicht zu nutzende Bibliothek mit dem Internet Explorer ab Version 6 aufwärts, mit Chrome, Firefox ab Version 2, Safari ab Version 3 und Opera ab Version 9.5 zusammenarbeiten.

EChart – Enterprise-Lösung für große Datenmengen

Für umfangreiche Datenmengen bietet sich EChart an. Die aus China kommende Bibliothek ist in der Lage große Datenmengen zu handeln: Bis zu 200.000 Datenpunkte kann die Library in einem kartesischen Koordinatensystem darstellen. Laut Angaben der Entwickler werden fast alle gängigen Browser unterstützt.

Ein echtes Highlight von EChart ist das patentierte Drag-Recalculate Feature. Dieses erlaubt das interaktive und userfreundliche Hinzufügen oder Entfernen von Daten im Chart via Drag and Drop. Auch ein Austausch von Daten zwischen mehreren Charts unterstützt diese Funktion. Unterstützte Charttypen sind unter anderem Balkendiagramme, Liniendiagramme, Tortendiagramme, Funnel, Maps und Radar. Glow, Zoom und Scale Roaming Effekte erlauben eine interaktive und optisch ansprechende visuelle Aufbereitung von Daten.

Peity: kleiner SVG-Chart Generator

Peity ist eine jQuery-Plug-in Lösung, die Mini-SVGs aus euren Daten erstellt. Linien-, Balken-, Torten- und Donut-Diagramme beherrscht die 2009 gestartete JavaScript Bibliothek. Durch das Hinzufügen von Custom Charts lassen sich bei dem jQuery-Plug-in weitere Charttypen implementieren. Kompatibel sollen nahezu alle Browser sein, die über einen SVG-Tag Support verfügen.

Im Allgemeinen ist der Einsatz von Peity einfach und von Programmierern mit wenig Erfahrung zu meistern. Die Daten werden einem Element zugewiesen. Durch die Angabe von Optionen können Größe und Farbe beeinflusst werden. Auch dynamische Visualisierungen auf Basis der gegebenen Daten unterstützt die kleine Library.

Interaktivität kann beispielsweise durch JavaScript basierende Formularauswertungen realisiert werden. Für die Aktualisierungen vorhandener Charts dient dabei die Peity-eigene Change-Funktion.

Für Killer-Apps: Google Chart

Last but not Least gibt es mit Google Chart ein mächtiges JavaScript Tool zum Erstellen von interaktiven Charts. Technologisch basiert die Lösung auf HTML5 und SVG. Für ältere IE Versionen greift die Bibliothek auf VML zurück.

Der Suchmaschinen-Gigant trumpft bei seiner Lösung mit einer breiten Palette an ansprechenden Chart-Typen auf. Neben den klassischen Visualisierungen wie Balken- und Tortendiagrammen kennt Googles Lösung von Hause aus noch weniger gängige Typen wie GEO-Charts, Histogramme, Streudigramme, Flächendiagramme, Organisationsdigramme, Bubble Diagramme und Tachodiagramme.

Doch auch dies ist nur ein Auszug aus den möglichen Chart-Typen. Neben der offiziellen Chart-Galerie finden Entwickler in der Community Sektion weitere Chart-Typen.

Ein weiterer Vorteil neben der großen Palette an unterschiedlichen Chart-Typen ist die gute Dokumentation. Unter https://developers.google.com/chart/interactive/docs/ finden Anwender umfangreiche Code-Beispiele, Einführungen und Anleitungen zum Erstellen interaktiver Charts.

Zurück

 
domainssaubillig © 2007-2024 Alle Rechte vorbehalten. | Support | AGB | Datenschutzerklärung | Impressum