Dygraphs -- JS framework zur Datenvisualisierung

Entwicklung / Development Benutzerschnittstelle / User interface / API
1

Während wir bei hiveeyes schon lange den “Tanker” Grafana als Visualisierungstool für Sensor-Daten verwenden, um bienenbezogene und imkerliche Daten als Grafiken auf https://swarm.hiveeyes.org/ oder Wetterdaten auf https://weather.hiveeyes.org anzuzeigen, hat ein tool, das ich seit mindestens 2013 verwende (s. unsere erste Aufzeichnung von Sounddaten 2013 oder Testdaten von Bienenwaagen-Prototypen) noch gar keinen expliziten thread hier bekommen, what a shame! Nun aber dygraphs:

dygraphs – a fast, flexible open source JavaScript charting library to allows users to explore and interpret dense data sets.

Was vielleicht etwas unscheinbar und clean daherkommt hat es aber in sich! Damals war ich sehr begeistert, was das kleine JS-framework alles kann und vor allem wie schnell es auch sehr große Datenmengen in responsible Grafiken verwandelt:

  • sehr schnell auch bei vielen Daten
  • Daten brauchen keine Datenbank, sondern können als *.csv abgelegt werden
  • Datenbank ist optional aber auch möglich
  • funktioniert ohne PHP / dynamischen Dingen auf dem Server
  • kann auch mit lokalen Daten auf einem Rechner einfach im Browser laufen
  • zwei unabhängige y-Achsen möglich
  • mehrere Grafiken auf einer HTML-Seite möglich, die sich synchron (z.B. beim Zoomen) ändern
  • optionaler grafischer range selector
  • Datenreihen können per einfache HTML-Elemente ein- und ausgeblendet werden
  • horizontales (time line) und vertikales (data range / y-Achse) zoomen mit der Maus!

Gerade den letzten Punkt finde ich bei der Datenexploration super wichtig, nichts ist schlimmer als ein statisches Diagramm, bei dem ich nicht reinzoomen kann, um mir Details anzuzeigen! Einen schönen Überblick bietet auch die Demo-Seite oder die Test-page.

Zugegeben, es ist etwas in Vergessenheit geraten und ich dachte mit mächtigeren tools auf dem Markt wäre die Entwicklung auch eingeschlafen. Dem ist aber nicht so, und das ist auch der Grund warum ich das hier poste, es gab 01/2023 ein neues release 2.2.0: Dygraphs — version history

Die Kollegen von Beelogger verwenden dygraphs glaube ich immer noch für die Visualisierung, Etwas weniger aufgeräumt als das Original und mit den vielen Optionen unübersichtlich, aber auch da scheint es gute Dienste zu leisen!

3 Likes
2

Damals war es noch möglich das Ding lokal im Browser laufen zu lassen (“URL” file:///C:/example/dygraphs.html) und über die HTML-Datei sehr einfach die Daten-Datei per JS hier im Beispiel als temperatures.csv einzubinden:

<script type="text/javascript">
Dygraph.onDOMready(function onDOMready() {
  g2 = new Dygraph(
    document.getElementById("graphdiv2"),
    "temperatures.csv", // path to CSV file
    {}                  // options
  );
});
</script>

Die aktuellen Browser meckern allerdings, da es die Same-Origin-Policy nicht erlaubt von einer lokal aufgerufenen HTML-Datei eine ebenfalls lokale csv-Datei zu lesen. Mein Verständnis wäre zwar same origin, aber Sicherheitsexperten sehen das kritischer (s. Details im link oben).

Ich dachte, wenn ich im Firefox die Same-Origin-Policy deaktiviere, siehe Same-Origin-Policy im Firefox für lokale Dateien deaktivieren · seeseekey.net müsste es gehen, bringt aber leider nichts.

Ein Kollege wollte das nutzen um lokale Daten oflline und einfacher als mit Excel & Co zu visualisieren und mich sträubt es gerade ihm nur wegen der ollen “Same-Origin-Policy-geht-nicht-auszuschalten” extra einen lokalen webserver aufzuschwatzen.

3

Hi Clemens,

ohne Anspruch auf Gültigkeit, Aktualität, und ohne dass ich für Schäden verantwortlich gemacht werden will ;]…

Viele Grüße,
Andreas.

Browser Einstellungen

Firefox

Chrome

Edge

Other references

Browser Addons

Firefox

Chrome

2 Likes
4

Lieben Dank für die Recherche, @Andreas! Die erste “Lösung” hatte ich auch gefunden und getestet, das hat aber nichts gebracht.

Der zweite Punkt ist die aber die Lösung für den lokalen Betrieb von Dygraphs:

Set security.fileuri.strict_origin_policy to false

Die beiden FF Addons habe ich ebenfalls getestet, wären einfacher zu aktivieren / deaktiveren, die helfen uns hier leider nicht, funktionieren für unser Problem nicht.

Übrigens haben wir damit auf CSV Daten direkt im Browser darstellen - Mikrocontroller.net noch ein 11 Jahre altes Problem gelöst! :-)

2 Likes
5

Hoi,

also zu cross origin Problemen kann ich dir als Web Developer ein Lied singen. Reverse Proxy ist hier oft dein Freund.

Vom Deaktivieren wird halt oft auch deswegen abgeraten, weil man meist dann weiter “surft” und man es vergisst wieder zu aktivieren.

Ja, kann ich verstehen, obwohl so schwer ist es auch nicht unbedingt. Außer er hat damit wirklich nichts am Hut, zB ist in Python ein lokaler Webservice sogar inkludiert.

cd /example/
python3 -m http.server

Als weitere Alternative, ich bin natürlich biased als Developer, würde ich einen Bundler empfehlen, zB Python (Flexx), Rust (Tauri) oder Javascript (Electron). Da kann man seine html Seite für cross-plattform kompilieren.

Cheers
Hannes

1 Like
6

Oh. Das war eher nur “für den internen Gebrauch” gedacht. Aber wenn es nun schon auf mikrocontroller.net steht, dann schreib bitte unbedingt noch den Tipp von Hannes dazu.

7

Done: CSV Daten direkt im Browser darstellen - Mikrocontroller.net Die erste haben natürlich schon gemeckert!

2 Likes
8

mein dygraphs läuft auch immer noch, seit über 10 jahren.
Bienenstockwaage - Bee Hive Scale - die werte dort sind aktuell, nur die aktualisierung der darstellung hab ich schleifen lassen, weil grafana so toll ist. aber nach klick auf die entsprechenden buttons werden die aktuellen werte in den kurven dargestellt:

dygraph

3 Likes