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.

Aktueller Stand, März 2018

Seit ich einen 4K-Bildschirm mit hoher Pixeldichte nutze, sind mir auch verschiedene Probleme mit Grafiken in Browsern aufgefallen, die dadurch entstehen, dass der Browser die Einhheit „Pixel“  nicht mehr als einzelnen Bildpunkt interpretiert sondern abhängig von der DPI-Skalierung des Bildschirms. Ich bin daher umgestiegen auf Chart.js, was auch Bildschirme mit skalierter Darstellung unterstützt.

Öffentlichen Kommentar hinterlassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Wenn Du mich persönlich erreichen möchtest, siehe Impressum.