Daten/Messwerte auslesen und schön aufbereiten

[smashcb]

Hallo

der Titel ist etwas sperrig , aber ich hab gerade keine richtige Idee wie ich es in wenigen Wörtern umschreiben soll.

hier deswegen die Langfassung :

eingie von euch kennen vielleicht luftdaten.info oder änliches

wenn man den spass zusammenbaut, erhaelt man zum schluss eine webseite mit grafik , allerdings nicht in schön
https://www.madavi.de/sensor/graph.php?sensor=esp8266-4397661-dht

ich möchte die messwere irgendwie extrahieren und in einem modernen ansprechenden design auf einer webseite abrufen könne.

beispielsweise : temp.domain.de .... und dann soll da auch son ein tolelr kurvenverlauf sein und die aktuelle Temperatur und der verlauf des Feinstaubes etc.

Frage: Was brauch ich dazu? Wie macht man sowas am besten ?

 

[FranzvonAssisi]

Normalerweise hat man eine Datenbank in die man die Werte überträgt und dann eine "normale" Webseite, die diese Daten abruft.

Z.B. alle 5 Minuten aktualisiert man dann die Daten mit einem Skript / Programm / was auch immer du schreibst.

Lg

 

[adAstra]

Daten lassen sich prima mit Python ver- und aufarbeiten. Für die Online-Komponente solltest du dir einmal Django anschauen.

 

[xmarsx]

Die einfachste Variante wäre eine passende JavaScript Chart Bibliothek. Die Mutter aller JavaScript Bibliotheken ist für mich weiterhin https://d3js.org/ .
Viele andere JavaScript Chart Bibliotheken, setzen wiederum auf d3js auf, weil d3js relativ komplex ist.

In Deinem Fall wäre eine speziell auf "time series" oder "timeline" ausgelegte Bibliothek sicher sinnvoll, da die Daten allen was mit einem Zeitverlauf zu tun haben.

Die Daten werden per JSON an die Bibliothek übergeben. Das kann entweder mit einer speziellen Funktion sein oder ggf. auch direkt von der Datenbank als JSON ausgeliefert werden. PostgreSQL kann die normale Ergebnismenge einer SQL-Datenbankabfrage auch als JSON zurückgeben (z.B. mit row_to_json(...) - https://www.postgresql.org/docs/current/functions-json.html).

Bibliotheken (ohne ranking):

• https://metricsgraphicsjs.org/examples.htm#lines
• https://www.highcharts.com/demo
• https://www.amcharts.com/demos/#line-area (auch mal die Stock Charts ansehen - man muss ja nicht unbedingt Preise auf der Y-Achse darstellen - Beispiel: https://www.amcharts.com/demos/stock-chart/ )
• https://www.chartjs.org/samples/latest/
• https://canvasjs.com/javascript-charts/

 

[snaxilian]

@xmarsx Bist du JS Entwickler?^^

@smashcb Du brauchst das Rad nicht neu erfinden, die Stichpunkte sind "influxdb" sowie "grafana". https://github.com/opendata-stuttgart/meta/wiki/APIs ergibt für mich, dass influxdb direkt unterstützt wird und für Grafana hat schon mal jemand ein Dashboard gebastelt: https://grafana.com/grafana/dashboards/3763