201208Dez

xCharts: JavaScript-Bibliothek für SVG-Diagramme

Für die dynamische Erzeugung von HTML5-Diagrammen (SVG oder Canvas) aller Art empfiehlt sich der Einsatz eines Frameworks wie Highcharts, mit dem alle denkbaren Darstellungen (Säulen, Linien, Kreisdiagramm, usw.) möglich sind. Die Graphen werden durch SVG angezeigt und aus einem JSON-Array generiert. Wenn es etwas weniger sein darf, lohnt sich ein Blick auf die Bibliothek xCharts, die ebenfalls JSON-Daten verarbeitet und auf D3.js basiert. Auch bei xCharts kommt SVG zum Einsatz.

xCharts

Das Framework bietet aktuell Säulen- und Liniendiagramme, die sich in Echtzeit aktualisieren und verändern lassen. Tooltips können eingeblendet werden und auch die X- und Y-Achsen lassen sich anpassen. In der Dokumentation finden sich Beispiele und der Quellcode ist wieder bei GitHub verfügbar.