Die folgenden Diagramme zeigen Zeitreihen-Plots (am Beispiel von Umweltdaten)
mit "Rangeslider" auf Basis des JavaScript Plot-Frameworks Plotly.js.
Die Zeitreihen behandele ich als eine Einheit, wobei ich folgende
Bedienlogik realisiert habe:
-
In dem Diagramm, dessen Rangeslider
aktiviert ist (siehe Checkbox am jeweiligen Diagramm), kann mit der linken
Maustaste im Plot ein Zeitbereich ausgewählt und anschließend mit dem
Rangeslider durch den Gesamtbereich gescrollt werden. Das Zoomen und
Scrollen findet dabei über allen Diagrammen synchron statt. Bei
Doppelklick in den Plot-Breich wird der ursprüngliche Zustand über
allen Diagrammen wieder hergestellt.
-
Mit dem Button "Scale Y Axis" kann die Y-Achse auf den
Wertebereich der sichtbaren Daten skaliert werden. Dies ist nützlich, wenn
in einen Zeitbereich mit geringen Wertänderungen hineingezoomt wurde.
Bei einer zweiten Betätigung wird der ursprünglche Zustand der Y-Skalierung
wieder hergestellt. Bei Doppelklick in irgendein Diagramm werden alle
Y-Achsen gemeinsam wieder hergestellt.
-
Beim Überfahren der Plots mit
der Maus wird das Koordinatenpaar des nächstgelegenen Punktes
angezeigt.
-
Im Menü "Shape" kann die Kurvendarstellung eingestellt
werden. Spline: Die Messwerte werden durch eine Spline-Approximation
verbunden. Linear: Die Messwerte werden durch eine gerade Linie
verbunden. Marker: Die Messwerte werden nicht verbunden, sondern
durch einen Punkt dargestellt. Quality: Wie Marker, nur dass in der
Farbe des Punktes eine dritte Dimension (hier: die Qualität des
Messwerts) kodiert ist.
-
Mittels des Buttons "Download as PNG" kann das Diagramm als Grafik
heruntergeladen werden. Soll er Rangeslider darauf nicht erscheinen, bietet
es sich an, diesen vorher wegzuschalten.
-
Die geplotteten Daten sind nicht
Teil der HTML-Seite (!), sondern werden per Ajax-Request von einer anderen
Site via Cross-Origin Resource Sharing asynchron geladen.
-
Sonderfall "Keine Daten": Das letzte Diagramm (GlobalRadiation) zeigt
die Darstellung, wenn im gegebenen Zeitbereich keine Daten vorliegen.
fseitz.de
