[Featurewunsch] Diagramme mit VSE1014 HighCharts / VSE1013 ApexCharts

[Winni]

Hallo gaert ,

nachdem man sich ja jetzt eigene VSEs basteln kann, habe ich mich an eine alternative Lösung für die Diagramme gewagt. Grundlage ist bei mir aktuell APEXCHART. Einiges geht sehr schön, für anders, was bei deinen Diagrammen möglich ist, habe ich aktuell keine Lösung. Möchte aber den Weg gerne weiter beschreiten.
Jetzt komme ich an die Stelle, an der ich gerne weitere Daten auf Basis Diagramm bzw. Datenquelle haben würde (Beispiel Einheit der Werte in der Datenquelle).
Wärst du bereit in einer kommenden Version in diesen beiden Tabellen ein Textfeld mit z.B.1000 oder auch 10000 zu spendieren, welches man dann für solche Zwecke nutzen könnte? Dort könne man z.B. eine JSON Information hinterlegen die dann von einem oder mehreren VSEs ausgewählt werden könnte. EDOMI-Standard würde das ja nicht tangieren.
Das wäre echt toll.

Beispiel:
apexchchart.png

Viele Grüße
Winni

[MrIcemanLE]

Grundlage ist bei mir aktuell APEXCHART

Hast du dir in diesem Zusammenhang mal HighCharts angesehen? Auch ein recht mächtiges DiagrammTool. Ist aber vom Grundprinzip her wahrscheinlich sehr ähnlich.

OffTopic:
Wie misst du den Pegel in deinem Brunnen? Ist das ein Bohrbrunnen oder ein Schachtbrunnen. Ich versuche aktuell das ganze mit Ultraschall und Arduino in einem alten Schachtbrunnen umzusetzen.

[Winni]

Ich hab' mir Chart.js angesehen, danach APEXCHART, dann erstmal entschieden... Mir geht's fast mehr um den Spass das hinzubekommen und will hier nicht die verschiedensten Tools ausprobieren.

Meinen Schacht-Brunnen messe ich mit Analogaktor und Drucksensor, alles mit Ultraschall haben ich wegen des Kondenswassers aufgegeben (hatte auch schon einen Oilfox mit WLAN-Anbindung drin).

[Winni]

So, das VSE läuft jetzt erstmal rudementär. Nicht alles, was gaert eingebaut hat, konnte ich übernehmen, insbesondere die automatische Verdichtung aufgrund der Auflösung. Macht ja auch keinen Sinn, wenn man später Zoomen will.
Leider sind da in APEXCHART glaube ich noch jede Menge Bugs enthalten. Wenn jemand das mal ausprobieren will, dann Info per PM. Hochladen will ich aktuell nicht, da ich mir nicht sicher bin, ob ich es veröffentlichen soll / will. Ich fürchte da eine Menge Requests, die ich zeitlich nicht abdecken kann.
Hilfe gibt's akutell noch keine, sollte sich jemand melden, schreib ich noch kurz zusammen, welche Diagramm-Informationen aktuell Berücksichtigung finden.

Diskussionen können / sollen dann aber in diesem Thread geführt werden.

Fast hätte ich's vergessen: Ich hab kein Feedback von gaert bisher bzgl. der Textfelder... deshalb sind einige Features nur über die manuell angelegten Tabellen edomiLive.wchart und edomiLive.wchartList möglich. Auch eine Pflege dieser Tabellen (ein VARCHAR(10000)-Feld) müsste manuell passieren. Aktuell sind aber nur die Optionen zur Formatierung der Wertausgaben (Benennung, Nachkommastellen, Umwandlung 0/1 in aus/an statt einfacher Zahlen) hinterlegt.

Winni

P.S.: zu HighChart: Evtl. stabiler aber kostenpflichtig, das ist's mir nicht wert

[Brick]

Find ich sehr cool...

kannst du nur ne kleine Kurzinfo geben, was du da genau gemacht hast.. also ich vermute ja mal, das diese APEXCharts auf der Maschine nachinstalliert werden müssen, diese greifen dann auf die Daten aus den Edomi Archiven zu, oder ?

[MrIcemanLE]

P.S.: zu HighChart: Evtl. stabiler aber kostenpflichtig, das ist's mir nicht wert

https://shop.highsoft.com/highcharts/

2020-05-05 08_39_29-Highcharts JS.png

[Winni]

Brick Das VSE kann das VSE Diagramm mehr oder weniger 1:1 ersetzen, greift also auf die Archive von Edomi zu. Additiv sind Möglichkeiten zur Interaktion möglich. Es muss nichts lokal installiert werden, die Quellen werden direkt online geladen

MrIcemanLE : Ich will keine Watermarks in meiner Visu:
Highchart.png

[MrIcemanLE]

Wobei die Kennzeichnung äußerst dezent ausfällt (siehe Beispiel), aber ich kann deinen Einwand durchaus verstehen.

Bin gespannt, wie sich das Thema Diagramme weiterentwickelt. VSE ist hier sicher ein guter Ansatz um gaert dahingehend zu entlasten. Zum testen fehlt mir leider die Zeit. Wenn es ohne DB-Eingriff gehen würde, würde ich mir das Teil mal anschauen. Oder verstehe ich ich dich da falsch? Wird der Eingriff in die DB nur benötigt, wenn man spezielle Konfigurationen vornehmen möchte?

2020-05-05 09_30_36-Aktuelle Werte.png

[Winni]

Ja, nur wenn du wie in deinem Beispiel °C an der y-Achse haben willst....
mal sehen, evtl. probier ich Highchart mal aus, wenn's wirklich so dezent ist...Im Moment reichts mir aber
Bin ja eigentlich mit dem was gaert so bietet recht zufrieden, mich reizt mehr die Herausforderung.

Zum Zoomen und Verschieben hab' ich ja das VSE1003, was teilweise sogar besser reagiert als APEXCHART, leider ungenau wird (im Detail), wenn sich die Diagrammbreiten verändern. Leider habe ich dafür im Diagramm von gaert nicht gefunden, wie ich diese Breite ermitteln könnte.

[Winni]

Nachdem ich jetzt mal den Chart-Konstruktor ausgetauscht habe scheint schonmal was zu passieren..... (oben ApexCharts unten HighCharts)Apex-High.png

[Brick]

Find ich cool !! 👍👍

[givemeone]

Ich auch, bin mega gespannt darauf! Sobald ich wieder mal zuhause bin, möchte ich gerne in den vorab-test mit einsteigen!

[Winni]

So mal wieder ein Zwischenstand:
ApexChart werde ich zwar veröffentlichen, so als Testwiese für andere, aber Highchart (VSE1014) ist mittlerweile meine neue Wahl.

Auch hier könnte ich eigentlich schon veröffentlichen, auch wenn noch nicht alle Features unterstützt werden.
Leider gibt es ein Problem beim Nachladen der Javascript-Dateien. Das passiert ja asynchron und ist leider manchmal nicht fertig, wenn das Diagramm aufgebaut wird. Hab' schon beim CONSTRUCT gewartet bis fertig, aber dann wird der REFRESH getriggert, bevor der CONSTURCT gelaufen ist.....

Wie gesagt, JavaScript / HTML ist so überhaupt nicht meine Heimat. Kann mir jemand Vorschläge unterbreiten, wie ich hier weiterkommen könnte? Ich hab' jetzt schon so viele Stunden in den Sand gesetzt und immer wieder kommen die Fehler hoch, insbesondere wenn ich das Debugging ausschalte und sich die Laufzeiten verändern.

Gibt es irgendeine Möglichkeit das Laden der .js Dateien synchron zu erzwingen?

Hier wieder ein Bildchen mit beiden:

Apex-High.png
StockChart wäre auch ne tolle Spieler, aber mal sehen wie sehr ich hier noch ins Detail gehen werde...
Apex-High.png

[rdeckard]

Bin da auch kein Experte, aber zufälligerweise befasse ich mich im Moment für ein anderes privates Projekt (ohne Edomi) mit chart.js. Da wurde in einem Tutorial auch das Problem geschildert, dass das dynamische Auslesen der Daten noch nicht abgeschlossen war und das Chart schon gezeichnet wurde.
Dort wurde das Problem gelöst, dass sowohl das Daten auslesen (in ein Array) asynchron läuft und das Chart zeichnen anschliessend auch. So muss die Seite warten, bis das Chart gezeichnet wurde und das Chart selber muss warten, bis die Daten vollständig geladen wurden.

Da sah dann im Code ungefähr so aus (nur ein Auszug):

chartIt();

async function chartIt() {
const data = await getData();
...
}

async function getData() {
...
}

chartIt wäre also die Funktion für das Zeichnen des Charts. Und in dieser Funktion wird die Funktion für das Einlesen der Daten (getData) asynchron ausgeführt. Das Chart wartet somit auf alle Daten.

Ob man das auch in Edomi so umsetzen kann, weiss ich nicht. Hab mich noch nicht mit VSE beschäftigt.

Bin aber trotzdem sehr an deiner Arbeit interessiert, weil ich mit den Edomi Diagrammen irgendwie nicht so warm werde.

[Winni]

rdeckard Das hilft nicht weiter, weil das Problem ja weniger im eigenen Code liegt, man bräuchte irgendwo eine saubere offizielle Möglichkeit solche Dateien zu integrieren, ich kenne die zumindest nicht. Seit ich für mich das direkt im index.php eingetragen habe, habe ich keine Probleme mehr. Die erste .JS Datei klappt ja soweit auch immer, aber für Higcharts sind es mehrere Dateien.
Die Grundstruktur der Edomi-Diagramme bleibt aber auch bei meiner Lösung erstmal die
Gleiche, es gibt nur visuell etwas mehr Möglichkeiten. Will man noch tiefer Einsteigen muss man mit JSON-Strings die Funktionen selber basteln (aktuell fest im VSE). Ich werde das wahrscheinlich auch mal mit dem KO3 ermöglichen.

Ich habe am Sonntag die beiden VSEs hochgeladen. Sobald vento66 sie eingestellt hat, könnt ihr ja mal testen