Diagramme und Datenvisualisierung im Browser

Durch die immer besser werdende Unterstützung von Canvas und SVG in modernen Browsern müssen Diagramme und Visualisierungen nicht mehr serverseitig erstellt und als Bild ausgeliefert werden. Die Server werden durch die Visualisierung direkt im Client entlastet und bei einfachen Diagrammen nimmt auch die zu übertragende Datenmenge ab. Auch sind durch das rendern im Browser interaktive Diagramme möglich. Inzwischen existierten einige Bibliotheken die dem Entwickler bei der Umsetzung unterstützen. Nachfolgend werden drei freie Bibliotheken vorgestellt. Flotr2 und Chart.js eignen sich besonders für das erstellen einfacher Diagramme. D3 ermöglicht es darüber hinaus auch komplexe Visualisierung zu erstellen.

Chart.js ist in der gezippten Version nur 4,5 Kb groß. Es bietet 6 Diagrammarten: Linien, Baken, Radar, Kuchen, Doughnut und Polar-Diagramme werden unterstützt. Alle Diagramme können animiert werden. Die Verwendung ist einfach, die Konfiguration sowie die darzustellenden Daten werden als JSON übergeben.

Flotr2 ist mit 29,8 Kb größer als Chart.js, bietet aber mehr Funktionen und Möglichkeiten die Darstellung zu beeinflussen.

D3 steht für "Data-Driven-Documents" und ist eine Bibliothek für das Manipulieren und Visualisieren von Daten mit Hilfe von SVG. D3 ist Modular aufgebaut, so das nur die benötigten Funktionen geladen werden müssen. Im Gegensatz zu den beiden vorherigen Bibliotheken bietet D3 weniger fertige Diagramme, sondern erleichtert das Erstellen komplett eigener an die eigenen Bedürfnisse angepasster Diagrammarten oder Visualisieren. Auf der Webseite werden bereits über 160 Beispiele gezeigt. Darunter sind neben Diagrammen auch Karten, Graphen oder sogar Gen-Visualisieren zu finden. D3 bietet einen gigantischen Funktionsumfang erfordert allerdings auch einiges an Einarbeitung.