eCharts in FHEM (Version 0.0.12.1)

[andies]

<edit> Ich habe, nach zwei Monaten Arbeit, den Beitrag angepasst.</edit>

Ich habe ein Modul erstellt, das Grafiken mit Javascript erstellt. Es ist ähnlich angenehm anzuschauen wie Grafana, aber es gab zwei Gründe, weshalb ich grafana nicht mehr nutze: 1) ich konnte auf einem RPi keine Grafiken rendern und dann per Telegram versenden (das ist ein bekanntes Problem) und 2) ich hatte immer etwas Schwierigkeiten mit der SQL-Sprache.

Dann lief mir eCharts über den Weg (Link zu Beispielen) und ich wollte ein Modul bauen, bei dem man möglichst die Syntax von SVG nutzt und daraus ohne viel Aufwand eCharts erzeugt, also in etwa so

Code Auswählen Erweitern

## SVG Definition
defmod myChart   SVG   GartentorLog:GartentorSVG:CURRENT
## eCharts Definition
defmod myChart eCharts GartentorLog:GartentorSVG:CURRENT

Ich kann inzwischen alle meine Grafiken mit ihren Besonderheiten in eCharts umwandeln: Ich kann Maxima und Minima auszeichnen, vertikale Linien integrieren, ich kann die Grafiken rendern und per Telegram verschicken. Es gibt die Möglichkeit, analog zu SVG in den Datenreihen "zu wandern", also sich frühere und spätere Datenreihen durch Mausklick anzuschauen (man muss dazu auf die x-Achse klicken und vorher ein Attribut auswählen).

Es gibt aber für die Anwender ein paar Risiken, und deshalb habe ich auch nicht vor, dass Modul als offizielles Modul in FHEM einzuspielen:

• Ich werde den Support für Dinge, die SVG leistet, nicht leisten können: Ich überblicke nämlich nicht, was SVG kann und was eCharts noch können müsste. Ich bin ja kein Programmierer, mein Code ist schwierig lesbar und ich gehe für meine Ziele immer so vor, dass ich mir einen funktionierenden Code nehme und den so lange anpasse, bis es passt. Das ist nicht systematisch.
• eCharts nutzt eine javascript-Bibliothek, die man einbinden muss. Ich habe keine Ahnung, ob das mit anderen Tools von FHEM interagiert. Bei mir tut es das nicht, aber ich weiß über FHEM zu wenig. Der damit verbundene Aufwand ist sicher nicht für jeden etwas.

Am schönsten wäre es natürlich, wenn jemand wie Richard da mal draufschaut und das auf Vordermann bringt, aber es kann ja nicht immer Weihnachten sein.

Ich habe sehr viel Erläuterung in der Hilfedatei abgelegt, da ich (wegen inoffiziellem Modul) weder commandref noch Wiki bemühen werde. Zudem füge ich zwei Screenshots an, die zeigen, was ich meine. Hier ein kurzes Einführungsvideo (mit zwei kleinen Macken, die ich jetzt nicht mehr repariere): https://www.youtube.com/watch?v=Pay4DYlaPF8

Man muss unter diesem Link die Installationsdateien herunterladen. Ich habe sie bei mir in ...www/tablet/eCharts/dist/echarts.js gelegt (Groß- und Kleinschreibung beachten!), wenn man das woanders hinlegen will, muss etwa in Zeile 309f. der Code angepasst werden.

---------------------------------------------------------------------
aktuell hier: Version 0.0.12.1, 

ACHTUNG: In Version 11.1 (10.3.2024) habe ich einen Fehler ausgemerzt, wenn die gplot-Dateien nicht existieren. Je nach Installation führt das aber dazu, dass vor diesem Termin angelegte eCharts-Devices gelöscht werden. Also diese bitte vorher sichern, dann  die neue Version einspielen und dann die Devices erneut anlegen.

[carlos]

Also ich habe das mal getestet.
Ich bekomme einen  Fehler im UI(siehe Bild) und im log steht:

Code Auswählen Erweitern

2024.02.10 03:20:14 5: eCharts rendering: defining filter
2024.02.10 03:20:14 5: eCharts rendering: getting plot data
2024.02.10 03:20:14 5: eCharts rendering: defining options

Angezeigt wird natürlich nichts.

Gruß

Hubert

[andies]

Hallo Hubert,

ich war letzte Woche krank und ich habe ja geschrieben, dass ich da ziemlich anfängerhaft herangehe. Ich schaue mir das aber in jedem Fall an, nur wird es etwas dauern!

[andies]

So, jetzt habe ich mir das mal angeschaut, und ich verstehe den Fehler nicht. Kannst Du mir mal die Logdaten zukommen lassen? Mein File hat keine 657 Zeilen und das scheint eher so zu sein, dass in den Daten was nicht passt.

Am einfachsten ist es vielleicht, wenn Du eine Zeile einfügst in Deinen Code:

Code Auswählen Erweitern

  ######################
  # finished
  ######################
  eCharts_pO '</script>'; # js-Umgebung schliessen
Log3($name, 5, "debug: ".$eCharts_RET); # <=== das ist neu
  return;
denn da wird mir angezeigt, was er eigentlich darstellen will. Oder es geht auch noch einfacher. Du gehst (bei Chrome) auf Anzeigen->Entwickler->Quelltext und suchst

Code Auswählen Erweitern

<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));und schreibst die nächsten Zeilen bis </script> auf. Da wird nämlich die Grafik erzeugt.

Mich stört momentan auch, dass bei mir die Zeitschiene nicht richtig dargestellt wird. Da ist also mehrfach ein Wurm drin.

[carlos]

Da kommt eine ewig lange Ausgabe.
Hier nur der Anfang und das Ende:

Code Auswählen Erweitern

2024.02.12 15:10:53 5: debug: <div id="main" style="width: 160px;height:800px;"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
var option ={"title":{"text":"mySenec-2024-02.log"},"tooltip":{"axisPointer":{"type":"cross"},"trigger":"axis"},"xAxis":{"type":"time","boundaryGap":"false"},"series":[{"data":[["2024-02-01T00:00:25Z","0.00"],["2024-02-01T00:01:22Z","0.00"],["2024-02-01T00:02:24Z","0.00"],["2024-02-01T00:03:22Z","0.00"],["2024-02-01T00:04:24Z","0.00"],["2024-02-01T00:05:23Z","0.00"],["2024-02-01T00:06:25Z","0.00"],["2024-02-01T00:07:24Z","0.00"],["2024-02-01T00:08:25Z","0.00"],["2024-02-01T00:09:25Z","0.00"],["2024-02-01T00:10:25Z","0.00"],["2024-02-01T00:11:23Z","0.00"],["2024-02-01T00:12:24Z","0.00"],["2024-02-01T00:13:24Z","0.00"],["2024-02-01T00:14:25Z","0.00"],["2024-02-01T00:15:25Z","0.00"],["2024-02-01T00:16:25Z","0.00"],["2024-02-01T00:17:25Z","0.00"],

........


2-12T14:58:05Z","0.00"],["2024-02-12T14:59:05Z","0.00"],["2024-02-12T15:00:08Z","0.00"],["2024-02-12T15:01:06Z","0.00"],["2024-02-12T15:02:05Z","0.00"],["2024-02-12T15:03:05Z","0.00"],["2024-02-12T15:04:06Z","0.00"],["2024-02-12T15:05:05Z","0.00"],["2024-02-12T15:06:05Z","0.00"],["2024-02-12T15:07:05Z","0.00"],["2024-02-12T15:08:05Z","0.00"],["2024-02-12T15:09:06Z","0.00"],["2024-02-12T15:10:07Z","0.00"]],"smooth":"0.6","type":"line"}],"yAxis":{"type":"value"}};myChart.setOption(option);
</script>


Gruß

Hubert

[andies]

Nur zur Sicherheit: wo liegt bei Dir

Code Auswählen Erweitern

www/tablet/eCharts/dist/echarts.jsUnd kannst du mal schauen, ob in der Quelldatei der Dateiname echarts.js erwähnt wird? Vor dem riesigen Text, den du kopiert hast?

[carlos]

Problem gelöst, schreibfehler:

Code Auswählen Erweitern

www/tablet/echarts/dist/echarts.js
versus

Code Auswählen Erweitern

www/tablet/eCharts/dist/echarts.js
Kaum macht man es richtig, geht's.

Danke für die Hilfe.

[andies]

<edit>Alle hier genannten Probleme sind in der Version oben behoben.</edit>

Ich schaffe es nicht, die Zeitschiene auf der x-Achse einzustellen. Was geht ist, dieser Achse die Kategorie "category" zuzuweisen, wenn ich da "time" nehme, sieht man nichts.

Ärgerlich ist an category, dass man anscheinend die Format-Funktionen nicht nutzen kann. Dennoch sieht man wenigstens irgendwelche Daten auf der x-Achse. Ich verlinke oben die Version 0.0.0.2.

[andies]

So, jetzt klappt das mit der zeit und ich habe auch einen Zoom installieren können; muss als Attribut angegeben werden. Oben im ersten Post ist Version 0.0.0.3.

[andies]

Anscheinend hat FHEMApp das Tool eCharts integriert, https://forum.fhem.de/index.php?topic=119470.0

Ich muss mal schauen, ob es sich dann lohnt hier weiter zu machen. Ich habe ein paar Kleinigkeiten verbessert (die meisten Dinge werden jetzt aus der Konfigurationsdatei von SVG eingelesen wie grid, tics etc.), aber ich kann nach wie vor nicht mehrere Daten zusammen einlesen, was natürlich echt schwach ist. Wenn das FHEMApp kann, wäre das super.

[andies]

Nun habe ich es geschafft, auch mehrere Datensätze in einer Grafik zu integrieren, danke auch an Beta-User (siehe hier). Was ich als nächstes machen will sind zwei y-Achsen (links und rechts) und dann will ich mal bei logProxy schauen, das geht bisher auch nicht.

Es gibt auch noch zwei Probleme, von denen ich wenigstens eines nicht auf dem Schirm hatte:

• Ich kann bisher nicht die Zeiträume auswählen, das kommt irgendwie aus der gplot-Datei. Das heißt, manchmal werden sehr viele Daten geladen und das führt zu dem nächsten Problem:
• Bei mir dauert der Aufruf relativ lang und das ist etwas, womit ich nicht gerechnet habe und wo ich auch keine Idee habe, wie man das handelt.

Die neue Version 0.0.5 ist im ersten Post.

[andies]

Ich habe noch ein wenig gespielt und eigentlich relativ viel geschafft von den Dingen, die ich mir vorgenommen habe:

• man kann jetzt mehrere Grafiken auf einer Seite darstellen (war vorher ein bug)
• ich kann inzwischen auch die Farbe aus der entsprechenden svg.css holen, da gibt es noch die eine oder andere Kleinigkeit (beim füllen sieht die Linie anders aus als die Füllung)
• man kann so genannte marker einfügen, die minimum, maximum und average angeben (sieht man im Bild unten, im Modul gibt es dazu Erläuterungen)
• mehrere Achsen sollten gehen, jedenfalls so lange man sie in der gplot-Datei mit x1y1 und x1y2 angibt

Nach wie vor habe ich das mit dem Zeitraum nicht im Griff, so dass immer alle Daten angezeigt werden - was sehr lange dauern kann. Zum einen sehe ich Licht am Ende des Tunnels, merke aber auch immer mehr, dass ich nun wirklich an meine Grenzen komme. Die Sache ist doch sehr schnell sehr komplex. Ich will wenigstens versuchen die Dinge umzusetzen, die ich brauche. Anbei noch zwei Screenshots - einmal SVG und einmal eCharts.

Version 0.0.6 ist oben im ersten Post.

[carlos]

Schön dass du immer weiter machst. Ich bin bis jetzt stiller Tester.
Aber gefällt mir bis jetzt sehr gut, dein modul.
In der Version hat sich ein Fehler eingeschlichen:

Code Auswählen Erweitern

my @attrList = qw(
      captionLeft:1,0"
..

das muss wohl so lauten:

Code Auswählen Erweitern

my @attrList = qw(
      captionLeft:1,0
..

Gruß

Hubert

[andies]

Das hat mich schon bei SVG gewundert, da steht das nämlich auch so da. Ich werde die Attribute mal bereinigen und nur diejenigen in dem Modul drin lassen, die ich auch implementiert habe.

[andies]

So, wieder was hinbekommen. Am schwierigsten fand ich das ja mit der Festlegung der Daten, die angezeigt werden (also $from und $to). In SVG ist das so gelöst, dass diese Daten aus der URL ausgelesen werden. Das ergibt auch Sinn, weil man dort Links hat, und wenn man die anklickt, werden aus den Links die neuen Daten für $from und $to ausgelesen. Alternativ gibt es noch Attribute, die das festlegen (fixedrange usw.).

In eCharts geht das mit den Links nicht. Es müssen bei der Definition der Grafik alle Daten bereits vorhanden sein, und man kann nur "in" den Daten zoomen. Es gibt auch keine Möglichkeit, in der eChart-Grafik URLs anzugeben, so dass man durch anklicken andere Daten einladen kann. Jedenfalls habe ich nichts dergleichen gesehen.

Deswegen habe ich das jetzt so gemacht, dass ich mich auf Attribute verlassen und die auslese (war ja alles schon super programmiert vom Chef). Und wenn keine da sind, wird ein Tag genommen. Alles getestet habe ich nicht, aber es sollte gehen. Sonst melden. Und ein paar kleinere Bugs habe ich beseitigt (zB Marker jetzt in der Farbe der Linien selbst usw). Neueste Version 0.0.7 im ersten Post.

Es wäre doch so schön, wenn sich mal ein richtiger Programmierer dieser Sache annehmen könnte. Es gibt so coole Sachen in eCharts, zB "gauge" als Batterienanzeige usw. Aber na ja, muss man halt mit meinem Code leben. Vielleicht reizt es irgendwann jemanden, da mal aufzuräumen.

Letzter Schritt von mir wird noch speichern sein. Deswegen habe ich das ja alles gemacht, damit ich das per TelegramBot schicken kann. Da muss ich jetzt mal suchen.