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 gleiche 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 gleiche 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.
