Schönere Diagramme mit RGraph

Schon lange gibt es auf meiner Website auch ein Diagramm mit den aktuellen Zugriffszahlen. Bisher habe ich dafür eine statische Grafik mit einem serverseitigen Script erzeugt. Jetzt habe ich das Diagramm umgestellt auf RGraph, eine JavaScript-Bibliothek, die unter Verwendung des Canvas-Elements von HTML5 Diagramme im Browser erzeugt und auch interaktive Elemente bietet.

Die statische Grafik hat grundsätzlich auch ihren Zweck erfüllt, war aber nicht optimal:

  • Die Grafik ist eine Bitmap fester Größe, die sich nicht ohne Qualitätsverlust verkleinern oder vergrößern lässt
  • Für die Beschriftung wird eine Schrift auf dem Server verwendet, die nicht das selbe Schriftbild und die selbe Größe hat, wie der übrige Text auf der Website
  • Interaktive Elemente sind nur aufwendig zu integrieren

RGraph setzt zwar JavaScript und HTML5-Unterstützung voraus – aber das trifft mittlerweile auf praktisch alle aktuellen Browser zu, auch auf mobilen Systemen wie iOS oder Android.

Mit RGraph nutzt das Diagramm automatisch den verfügbaren horizontalen Platz und exakt die selbe Schrift wie die Website. Es bietet auch interaktive Tooltips zur Anzeige der exakten Datenwerte.

Kommentar hinterlassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.