FTUI Neue Version chart_widget

[ChrisW]

okay hier die ganze Index aber noch mit dem normalen simplechart hab das mit deinem code ersetzt. Egal welches Beispiel sobald ich "cart" nutze zerhaut es mein design.

[eki]

Hallo ChrisW, ich habe Deine Index.html jetzt mal in meiner Umgebung geöffnet, und ein simple chart durch genau den Code ersetzt, den Standarduser gepostet hatte (für den Raum SERVER). Da zerschießt es bei mir nichts, das Layout sieht vorher und nachher gleich aus. Beim Klick auf das range widget öffnet sich brav das chart (natürlich ohne Graphen, weil ich die Devices ja nicht habe, hab mir lediglich einen dummy gebastelt, der "temp_server" simuliert).
Was mir an der Stelle aufgefallen ist, ist, dass Du in das Popup Widget jede Menge anderer Widgets reinpackst. Ich setze da immer nur das Widget auf das geklickt werden soll und den Dialog, der erscheinen soll rein. Keine Ahnung ob das Dein Problem beseitigt, aber probier mal das Popup widget so anzulegen, dass darin nur das Range und das Dialog Div enthalten sind und schiebe die anderern Wdigets (Klimatrend, Label etc. hinter das Popup).
Welchen Browser verwendest Du?

[ChrisW]

hmm sehr komisch ... das kann doch nicht sein, Nutze Chrome.
Was genau meinst du mit Popup? Das div starte ich oben damit ich da überall klicken kann damit das Popup auf geht.
Muss man vielleicht noch ein CSS anpassen ?

[eki]

Mit Popup meine ich das <div> mit data-type="popup". Du hast dort innerhalb des <div> (also bevor das zugehörige </div> kommt, andere objekte definiert (label, klimatrend etc.).

Bezüglich der css kannst Du mir ja mal Deine css Dateien (die, die im index.html referenziert werden und die ftui_chart.css aus dem css Ordner in fhem/tablet/css). Dann kann ich das mit meinen vergleichen.

[Standarduser]

Hi eki,

im Moment ist das verhalten beim Chartwidget so, dass nur die Y-Achse gezeichnet wird, der die Y-Ticks zugeordnet sind.
Wäre es vielleicht möglich, auch die andere Achse anzeigen zu lassen? Im Code ist die ja vorhanden, nur ist sie mit Inline-Style hidden, sodass ich das nicht überschreiben kann.
Mein Diagramm wäre dann nicht so nackt auf der linken Seite

[devil77]

Hallo, leider bin ich nicht so richtig fündig geworden.
Ich möchte mir für die Regenvorhersage einen Plot anlegen.
Dabei soll aber die X-Achse nur ab "Jetzt" die nächsten 3 Stunden darstellen.
Habe aber keine Möglichkeit gefunden wie ich das bewerkstelligen kann oder ob das überhaupt möglich.
Also quasi

Code Auswählen Erweitern

data-daysago_start=jetzt
data-daysago_end=jetzt+3 Stunden

[viegener]

Keine eine idee ? Wieso wird mein Layout / CSS verstört ? Weiss leider auch nicht wo ich die Fehlersuche starten kann. Ist ja nur ein DIV getauscht worden mehr nicht.
Auch wenn ich es in eine eigene Box packe ..  auch wenn ich die Box an der größe anpasse daran liegt es nicht.

Nur so als Verdacht, hast Du mal geprüft ob das HTML/CSS korrekt ist - Tags nicht geschlossen / falsche Klammerung / Anführungszeichen / ...

Wenn durch eine lokale Änderung an anderer Stelle unerklärliche Phänomene auftauchen ist das eine gut mögliche Ursache

[eki]

Hi eki,

im Moment ist das verhalten beim Chartwidget so, dass nur die Y-Achse gezeichnet wird, der die Y-Ticks zugeordnet sind.
Wäre es vielleicht möglich, auch die andere Achse anzeigen zu lassen? Im Code ist die ja vorhanden, nur ist sie mit Inline-Style hidden, sodass ich das nicht überschreiben kann.
Mein Diagramm wäre dann nicht so nackt auf der linken Seite

Aktuell sehe ich 2 Möglichkeiten:
1. Codeänderung, Du müsstest in widget_chart.js die folgende:

Code Auswählen Erweitern

svg_new.find('line.'+data.gridlines_hidden).hide();
Zeile durch

Code Auswählen Erweitern

svg_new.find('line.yticks.'+data.gridlines_hidden).hide();
und

Code Auswählen Erweitern

elem.parent().parent().find('line.'+axis_hidden).hide();
durch

Code Auswählen Erweitern

elem.parent().parent().find('line.yticks.'+axis_hidden).hide();
ersetzen, dann würden die Achsen immer gezeichnet.

2. logproxy.
Mit folgender Columnspec für ein logproxy Logdevice

Code Auswählen Erweitern

"ConstX:$to,4,11:"
in der die Zahlen 4 und 11 durch 2 y-Werte ersetzt werden müssten, die den unteren und oberen y-Wert der entsprechenden y Achse wiedergeben, würde eine senkrechte Linie ans Ende des Plots gezeichnet (entsprechend dann mit

Code Auswählen Erweitern

"ConstX:$from,4,11:",
für eine Linie an den Anfang des Plots.

[eki]

Hallo, leider bin ich nicht so richtig fündig geworden.
Ich möchte mir für die Regenvorhersage einen Plot anlegen.
Dabei soll aber die X-Achse nur ab "Jetzt" die nächsten 3 Stunden darstellen.
Habe aber keine Möglichkeit gefunden wie ich das bewerkstelligen kann oder ob das überhaupt möglich.
Also quasi

Code Auswählen Erweitern

data-daysago_start=jetzt
data-daysago_end=jetzt+3 Stunden

Code Auswählen Erweitern


data-daysago_start="0h"
data-daysago_end="-3h"


[wkarl]

Hallo,

finde mal wieder Zeit an meiner GUI zu arbeiten. U.a. finden charts nun Einzug und es stellt sich mir die Frage, ob und wie man Wochen- bzw. Monatsansichten umsetzen kann. Also nicht die letzen 7 oder 30/31 Tage, sondern heute ist Freitag also soll das chart am Montag beginnen und am Sonntag enden. Ditto für den Monat.

Verträgt data-daysago_start/end Perl Syntax? Oder hat jemand einen anderen Ansatz?

ciao Walter

[eki]

Das geht schon. Einige Beispiele (zusätzlich mit Vorschlägen für sinnvolle Achsenbezeichnungen):

1. Aktuelles Jahr (beginnend am 1.1. und endend am 31.12.):

Code Auswählen Erweitern

data-daysago_start="0Y"
data-daysago_end="-1Y"
data-timeformat="MMM"

2. Aktueller Monat (beginnend mit dem 1 des Monats, endend mit dem letzten Tage des Monats).

Code Auswählen Erweitern

data-daysago_start="0M"
data-daysago_end="-1M"
data-timeformat="dd.MM"

3. Aktuelle Woche (beginnend mit So und endend mit Sa)

Code Auswählen Erweitern

data-daysago_start="0W"
data-daysago_end="-1W"
data-timeformat="eee"


[wkarl]

Oh, doch so einfach. Kaum beschäftigst Du Dich nicht mit fhem für ein paar Monate und schon stehst Du da wie ein Depp

[eki]

Was heißt hier Depp, so selbsterklärend ist es ja leider nicht  .

Allerdings haben ein paar fleißige Mitstreiter schöne Wiki Seiten zu den FTUI Widgets gemacht und dort ist auch einiges zum Umgang mit dem Chart Widget erklärt. Siehe also: https://wiki.fhem.de/wiki/FTUI_Widget_Chart

[viegener]

Ich würde gerne die Nutzung des charts dynamisieren - dazu wollte ich als erstes eine Datumsauswahl (ala datepicker) mit dem chart kombinieren, allerdings fehlt mir eine Möglichkeit dynamisch Parameter zu übergeben und zu verändern / NeuDarstellung anzustossen.

Hat da schon jemand etwas gebastelt oder müsste das chart widget dazu erweitert werden?

[Standarduser]

Aktuell sehe ich 2 Möglichkeiten:
1. Codeänderung, Du müsstest in widget_chart.js die folgende:

Code Auswählen Erweitern

svg_new.find('line.'+data.gridlines_hidden).hide();
Zeile durch

Code Auswählen Erweitern

svg_new.find('line.yticks.'+data.gridlines_hidden).hide();
und

Code Auswählen Erweitern

elem.parent().parent().find('line.'+axis_hidden).hide();
durch

Code Auswählen Erweitern

elem.parent().parent().find('line.yticks.'+axis_hidden).hide();
ersetzen, dann würden die Achsen immer gezeichnet.

2. logproxy.
Mit folgender Columnspec für ein logproxy Logdevice

Code Auswählen Erweitern

"ConstX:$to,4,11:"
in der die Zahlen 4 und 11 durch 2 y-Werte ersetzt werden müssten, die den unteren und oberen y-Wert der entsprechenden y Achse wiedergeben, würde eine senkrechte Linie ans Ende des Plots gezeichnet (entsprechend dann mit

Code Auswählen Erweitern

"ConstX:$from,4,11:",
für eine Linie an den Anfang des Plots.

Danke. Ist aber leider beides nicht so optimal.

Variante 1 ist beim nächsten Update wieder weg.

Bei Variante 2 liegt der vertikale Strich leicht außerhalb des Diagramms. Außerdem hat diese Variante den Nachteil, dass ich mich ja für eine Höhe entscheiden muss. Damit funktioniert dann die automatische Skalierung der Y-Achse nicht mehr.

Gibt es vielleicht noch eine andere Möglichkeit? Oder könntest Du das irgendwann mal fest einbauen? Von mir aus auch mit einem neuen Attribut?