FTUI Neue Version chart_widget

[Ulm32b]

Gerne habe ich die neue Version getestet. Dieser Test beschränkt sich allerdings auf die Formatierung der x-Achse. Das Ergebnis kann sich sehen lassen, siehe Anhang. Nur ein kleiner Schönheitsfehler bleibt: In der Ansicht "1 Monat" fehlt der hintere Punkt in der Datumsangabe.

Nennenswerten Handlungsbedarf sehe ich hier nicht mehr. Aus meiner Sicht kann die Version ausgerollt werden. Sehr gute Arbeit. 

[M.Piet]

Hallo Zusammen,

ich habe eine Verständisfrage:

Mein Log ist wie folgt aufgebaut:

Code Auswählen Erweitern

2018-04-01_00:18:42 DS18S20_8CFA0C030800 temperature: 32.375
2018-04-01_00:19:42 DS18S20_8CFA0C030800 temperature: 32.1875
2018-04-01_00:20:43 DS18S20_8CFA0C030800 temperature: 31.9375
2018-04-01_00:21:43 DS18S20_8CFA0C030800 temperature: 31.75
2018-04-01_00:22:43 DS18S20_8CFA0C030800 temperature: 31.5625
2018-04-01_00:23:43 DS18S20_8CFA0C030800 temperature: 31.3125

Ich verstehe nicht ganz wie ich den "data-columnspec" definieren muss, damit er das Feld Temperatur auswertet. Mein Chart bleibt leer.
Danke für die kurze Hilfe.

Probiert habe ich es so:

Code Auswählen Erweitern


<div data-type="chart"
data-device="DS18S20_8CFA0C030800"
data-logdevice="S01Heizung_Vorlauf"
data-columnspec='["temperature:Temperatur"]'

[eki]

Das Thema Columnspec habe ich hier:
https://forum.fhem.de/index.php/topic,59934.msg776909/topicseen.html#msg776909

mal versucht zu erklären.

In Deinem Fall sollte ein

Code Auswählen Erweitern

data-columnspect="4:temperature"

reichen.

[M.Piet]

Super, danke dir. Das hat mir geholfen.

[M.Piet]

Hallo Zusammen,

nur ein paar kleine Fragen, hoffe sie wurden noch nicht beantwortet...:

1) kann man die Legende dauerhaft sichtbar schalten? Mit "data-showlegend="true"" kann ich sie bei Start sichtbar machen, sie lässt sich aber ausblenden indem man auf "Legend" drückt
2) kann man die Buttons "Legend" und "Cursor" ausblenden?
3) Die Legende sortieren? In meinem Beispiel sind sie nicht in der Reihenfolge wir unter "data-legend=" angezeigt.

Ich danke euch.

[eki]

Hallo Zusammen,

nur ein paar kleine Fragen, hoffe sie wurden noch nicht beantwortet...:

1) kann man die Legende dauerhaft sichtbar schalten? Mit "data-showlegend="true"" kann ich sie bei Start sichtbar machen, sie lässt sich aber ausblenden indem man auf "Legend" drückt
2) kann man die Buttons "Legend" und "Cursor" ausblenden?
3) Die Legende sortieren? In meinem Beispiel sind sie nicht in der Reihenfolge wir unter "data-legend=" angezeigt.

Ich danke euch.

zu 1) und 2): Das geht, indem Du dem div die CSS Klasse "nobuttons" gibst (<div class="nobuttons"...></div>) (siehe auch https://wiki.fhem.de/wiki/FTUI_Widget_Chart)
zu 3): Die Sortierung entspricht schon der Reihenfolge, allerdings umgekehrt zu der Reihenfolge, in der Du die einzelnen Graphen (und damit auch data-legend) angibst (hat historische und Überlappungsgründe). Du musst also die Reihenfolge nur umdrehen.

[M.Piet]

Hey eki.

Zu 1 und 2: damit werden aber alle Buttons ausgeblendet, also auch die zum Blättern und Zoomen. Aber nicht so schlimm, ich lasse sie dann einfach stehen.
Zu 3: perfekt, so mache ich es. Danke dir.

@eki: du hast mir bei den "data-columnspect" geholfen, habe es verstanden und es hat auch prima geklappt. Nun baue ich mir grad einen neuen Chart. Die Quelle sieht so aus:

Code Auswählen Erweitern

2018-05-03_10:39:06 Tankstelle_BFT_Wolfhagen SuperE5: 1.40
2018-05-03_10:39:06 Tankstelle_BFT_Wolfhagen Diesel: 1.22
2018-05-03_10:46:02 Tankstelle_ARAL_Wolfhagen SuperE5: 1.43
2018-05-03_10:46:02 Tankstelle_ARAL_Wolfhagen Diesel: 1.26
2018-05-03_10:48:45 Tankstelle_Esso_Wolfhagen Diesel: 1.23

Mein data-columnspec sieht so aus:

Code Auswählen Erweitern

data-columnspec='["4:Tankstelle_ARAL_Wolfhagen Diesel","4:Tankstelle_Esso_Wolfhagen Diesel","4:Tankstelle_BFT_Wolfhagen Diesel"]'

Der Chart soll nur Diesel anzeigen.
Da er Diesel und Super als eins annimmt, macht der Chart natürlich dauernd Sprünge...

Kann es sein das er das Leerzeichen nicht mag? In dem Chart taucht z.B. bei Aral Diesel und Super mit den Preisen auf auf, obwohl ich nur Diesel haben wollte. Ich könnte als Workaround einfach Diesel und Super in zwei verschiedene Logs schreiben lassen, aber vielleicht gibt es eine andere Lösung?

[eki]

Hey eki.

Zu 1 und 2: damit werden aber alle Buttons ausgeblendet, also auch die zum Blättern und Zoomen. Aber nicht so schlimm, ich lasse sie dann einfach stehen.

Wenn das für Dich wichtig ist, kann ich eine zweite Klasse einbauen, über die man nur die beiden Buttons ausblenden kann. In der Zwischenzeit könntest Du (als Würgaround) die Texte unsichtbar machen, indem Du im File ftui_chart.css folgende Änderung machst (die fill-opacity Zeile an dieser Stelle hinzufügst):

Code Auswählen Erweitern


/* Definition for caption texts ('legend' and 'cursor') */
.caption {
font-size: 11px;
font-weight: bold;
fill-opacity: 0;
}

Die Texte sind dann immer noch da und können auch angeklickt werden, wenn man sie blind erwischt, aber sie sind nicht mehr zu sehen.

Kann es sein das er das Leerzeichen nicht mag? In dem Chart taucht z.B. bei Aral Diesel und Super mit den Preisen auf auf, obwohl ich nur Diesel haben wollte. Ich könnte als Workaround einfach Diesel und Super in zwei verschiedene Logs schreiben lassen, aber vielleicht gibt es eine andere Lösung?

Deine Vermutung ist genau richtig, er kommt mit dem Leerzeichen nicht zurecht. Am einfachsten ist es, wenn Du das Leerzeichen durch einen Punkt ersetzt (der steht dann in der Regexp für irgendein einzelnes Zeichen, welches das Leerzeichen ja auch ist).

[M.Piet]

Hey Eki,
ne musst du nicht unbedingt, aber danke für das Angebot.

Mit dem Leerzeichen hat primar geklappt. Danke für deine Hilfe.

[Wasserwerk33]

Hallo Leute

Meins sieht irgendwie so komisch aus. Kann mir einer sagen was ich ändern muss damit es nur ein strich gibt und nicht diese vielen.

Code Auswählen Erweitern

<!DOCTYPE html>
<html>

<head>
    <!-- Template für Froststatus -->
</head>

<body>
<div data-type="popup" id="spritpreise" data-height="500px" data-width="1000px" data-return-time="300" data-draggable="false">
<div class="cell narrow top-space">
<div data-type="symbol"
    data-icon="fa-car"
data-color="white">
</div>
<div data-type="label">Raiffeisen</div>
<div class="center">
<div data-type="label"
data-device="Raiffeisen"                 
data-get="SuperE5"
     data-limits='[1.38,1.40,1.44]'
     data-colors='["Green","Yellow","Red"]'
data-unit="€"
     style="font-size:100%; margin-left:-15px;">
</div>
<div class="dialog">
<header style="background-color:#202020;">
<div class="sheet">
<div class="left" style="margin-left:50px; margin-top:10px; margin-bottom:10px; font-size:20px; color:white;">Spritpreise</div>
<div data-type="link" data-color="white" data-icon-left="fa-times" class="right bigger" style="margin-top:8px;" onclick="$('.dialog-close').trigger('click');"></div>
</div>
</header>
                 <table
                        <tr>
                            <td style="text-align:left;">
                                <div>Raiffeisen:</div>
                            </td>
                            <td style="text-align:right;">
                                <div data-type="label" data-device="Raiffeisen" data-get="SuperE5" data-unit=" Euro"
data-limits='[1.38,1.40,1.43,1.45]'
data-colors='["Green","Orange","Yellow","Red"]'></div>
                            </td>
                        </tr>
                        <tr>
                            <td style="text-align:left;">
                                <div>Jet:</div>
                            </td>
                            <td style="text-align:right;">
                                <div data-type="label" data-device="Jet" data-get="SuperE5" data-unit=" Euro"
data-limits='[1.38,1.40,1.43,1.45]'
data-colors='["Green","Orange","Yellow","Red"]'></div>
                            </td>
</tr>
                    </table>
</li>
<li data-row="1" data-col="6" data-sizex="12" data-sizey="7">
<div class="normal"
data-type="chart"
data-device='["Raiffeisen","Jet"]'
         data-logdevice='["FileLog_Spritpreise"]'
         data-columnspec='["4:Raiffeisen SuperE5","4:Jet SuperE5"]'
         data-style='["ftui l2","ftui l4"]'
         data-uaxis='["primary"]'
         data-legend='["Raiffeisen","Jet"]'
         data-ytext="Literpreis(Euro)"
         data-minvalue="1.30"
         data-maxvalue="1.66"
data-yticks="0.03"
data-height="350"
         data-yunit_sec=""
         data-ytext_sec=""
         data-yticks="auto"
         data-minvalue_sec="auto"
         data-maxvalue_sec="auto"
         data-daysago_start="0"
         data-daysago_end=""
         data-crosshair="true"
         data-cursorgroup="1"
         data-scrollgroup="1"
         data-showlegend="true"
         data-xticks="180"></div>
</div>
</li>
</div>
</body>
</html>

[wacholder]

Hallo zusammen,
in meinem Chart kann ich den Title kaum lesen, wie kann ich die Schriftfarbe und Größe ändern?

Ich vermute, das dieses über ein CSS File definiert wird, aber ich habe keine Ahnung, was ich dort reinschreiben muß. Ich kenne mich mit CSS (noch) nicht aus. Vielleicht könnt Ihr mir mal auf die Sprünge helfen?!

Vielen Dank!

[Ulm32b]

Ich vermute, das dieses über ein CSS File definiert wird, aber ich habe keine Ahnung, was ich dort reinschreiben muß. Ich kenne mich mit CSS (noch) nicht aus. Vielleicht könnt Ihr mir mal auf die Sprünge helfen?!

Hallo,
die Einstellungen finden sich in ftui_chart.css und sind dort ziemlich gut auskommentiert. Einfach mal ausprobieren. Nebenbei lernt man dabei css. Viel Erfolg.

[eki]

Hallo Leute

Meins sieht irgendwie so komisch aus. Kann mir einer sagen was ich ändern muss damit es nur ein strich gibt und nicht diese vielen.

Code Auswählen Erweitern

<!DOCTYPE html>
<html>

<head>
    <!-- Template für Froststatus -->
</head>

<body>
<div data-type="popup" id="spritpreise" data-height="500px" data-width="1000px" data-return-time="300" data-draggable="false">
<div class="cell narrow top-space">
<div data-type="symbol"
    data-icon="fa-car"
data-color="white">
</div>
<div data-type="label">Raiffeisen</div>
<div class="center">
<div data-type="label"
data-device="Raiffeisen"                 
data-get="SuperE5"
     data-limits='[1.38,1.40,1.44]'
     data-colors='["Green","Yellow","Red"]'
data-unit="€"
     style="font-size:100%; margin-left:-15px;">
</div>
<div class="dialog">
<header style="background-color:#202020;">
<div class="sheet">
<div class="left" style="margin-left:50px; margin-top:10px; margin-bottom:10px; font-size:20px; color:white;">Spritpreise</div>
<div data-type="link" data-color="white" data-icon-left="fa-times" class="right bigger" style="margin-top:8px;" onclick="$('.dialog-close').trigger('click');"></div>
</div>
</header>
                 <table
                        <tr>
                            <td style="text-align:left;">
                                <div>Raiffeisen:</div>
                            </td>
                            <td style="text-align:right;">
                                <div data-type="label" data-device="Raiffeisen" data-get="SuperE5" data-unit=" Euro"
data-limits='[1.38,1.40,1.43,1.45]'
data-colors='["Green","Orange","Yellow","Red"]'></div>
                            </td>
                        </tr>
                        <tr>
                            <td style="text-align:left;">
                                <div>Jet:</div>
                            </td>
                            <td style="text-align:right;">
                                <div data-type="label" data-device="Jet" data-get="SuperE5" data-unit=" Euro"
data-limits='[1.38,1.40,1.43,1.45]'
data-colors='["Green","Orange","Yellow","Red"]'></div>
                            </td>
</tr>
                    </table>
</li>
<li data-row="1" data-col="6" data-sizex="12" data-sizey="7">
<div class="normal"
data-type="chart"
data-device='["Raiffeisen","Jet"]'
         data-logdevice='["FileLog_Spritpreise"]'
         data-columnspec='["4:Raiffeisen SuperE5","4:Jet SuperE5"]'
         data-style='["ftui l2","ftui l4"]'
         data-uaxis='["primary"]'
         data-legend='["Raiffeisen","Jet"]'
         data-ytext="Literpreis(Euro)"
         data-minvalue="1.30"
         data-maxvalue="1.66"
data-yticks="0.03"
data-height="350"
         data-yunit_sec=""
         data-ytext_sec=""
         data-yticks="auto"
         data-minvalue_sec="auto"
         data-maxvalue_sec="auto"
         data-daysago_start="0"
         data-daysago_end=""
         data-crosshair="true"
         data-cursorgroup="1"
         data-scrollgroup="1"
         data-showlegend="true"
         data-xticks="180"></div>
</div>
</li>
</div>
</body>
</html>

Vermutlich die Leerzeichen in der Columnspec. Bitte ersetze die Leerzeichen durch Punkte.

Code Auswählen Erweitern


data-columnspec='["4:Raiffeisen.SuperE5","4:Jet.SuperE5"]'


[eki]

Hallo,
die Einstellungen finden sich in ftui_chart.css und sind dort ziemlich gut auskommentiert. Einfach mal ausprobieren. Nebenbei lernt man dabei css. Viel Erfolg.

Am besten die Anpassungen nicht im File ftui_chart.css machen sondern in einem eigenen css File (siehe fhem_tablet_ui_user.css) sonst werden die Einstellungen beim nächsten Update überschrieben. Wie man den Titel sehr flexibel nach eigenen Wünschen gestalten kann ist am Anfang dieses Threads und im Wiki beschrieben.

[dadoc]

Guten Abend.
ich bin (mal wieder) an meine Grenzen gestoßen und bräuchte einen Tipp.
Ich möchte mir ein Chart auf folgender Basis zusammenbasteln:
- es geht um die ph- und Redox-Werte eines Schwimmbads
- diese ergeben nur Sinn, wenn die Filterpumpe läuft, was diese aber normalerweise nur ein paar Stunden pro Tag tut. Wenn die Pumpe nicht läuft, gibt es zwar auch ph- und Redox-Werte im Log, aber diese sind irrelevant, da quasi in "stehendem Gewässer" gemessen.
- Ich logge alle Werte (ph, Redox, Filterpumpe an/aus...)
Nun möchte ich eine Grafik, die die Werte für ph und Redox nur für die Zeiträume anzeigt, in denen auch die Filterpumpe lief; m.a.W.: alle ph- und Redox-Werte für Zeiträume, in denen die Pumpe nicht lief ("Pumpe: 0" im Log), sollen quasi ausgeblendet werden.

Ein Log-Eintrag sieht z.B. so aus:

Code Auswählen Erweitern

2018-06-16_23:49:36 Pool uptimeTime: 1d00:27:34
2018-06-16_23:49:36 Pool poolControllerTime: 23:49
2018-06-16_23:49:36 Pool SW_Version: 1.6.9
2018-06-16_23:49:36 Pool PH+_Control: DISABLED
2018-06-16_23:49:36 Pool PH-_Control: enabled
2018-06-16_23:49:36 Pool Chlor_Control: enabled
2018-06-16_23:49:36 Pool pH+_consumption: 0
2018-06-16_23:49:36 Pool pH-_consumption: 96
2018-06-16_23:49:36 Pool Cl_consumption: 50.085
2018-06-16_23:49:36 Pool pH+_Rest: 100
2018-06-16_23:49:36 Pool pH-_Rest: 35.9
2018-06-16_23:49:36 Pool Cl_Rest: 28.2
2018-06-16_23:49:36 Pool n.a.: 0
2018-06-16_23:49:36 Pool n.a.: 0
2018-06-16_23:49:36 Pool n.a.: 0
2018-06-16_23:49:36 Pool n.a.: 0
2018-06-16_23:49:36 Pool n.a.: 0
2018-06-16_23:49:36 Pool n.a.: 0
2018-06-16_23:49:36 Pool n.a.: 0
2018-06-16_23:49:36 Pool n.a.: 0
2018-06-16_23:49:36 Pool TASTER4: 0
2018-06-16_23:49:36 Pool TASTER3: 0
2018-06-16_23:49:36 Pool Wasserstand: 1
2018-06-16_23:49:36 Pool Durchfluss: 0
2018-06-16_23:49:36 Pool n.a.: 0
2018-06-16_23:49:36 Pool n.a.: 0
2018-06-16_23:49:36 Pool n.a.: 0
2018-06-16_23:49:36 Pool n.a.: 0
2018-06-16_23:49:36 Pool Pumpe: 0
2018-06-16_23:49:36 Pool ph-: 0
2018-06-16_23:49:36 Pool Zelle: 0
2018-06-16_23:49:36 Pool Polaritaet: 0
2018-06-16_23:49:36 Pool n.a.: 0
2018-06-16_23:49:36 Pool n.a.: 0
2018-06-16_23:49:36 Pool n.a.: 0
2018-06-16_23:49:36 Pool n.a.: 0
2018-06-16_23:49:36 Pool n.a.: 0
2018-06-16_23:49:36 Pool n.a.: 0
2018-06-16_23:49:36 Pool Luft: 21.81
2018-06-16_23:49:36 Pool Wasser: 24.44
2018-06-16_23:49:36 Pool pH: 7.24
2018-06-16_23:49:36 Pool Redox: 726.94
2018-06-16_23:49:36 Pool CPU_Temp: 50.64
2018-06-16_23:49:36 Pool Brr: 0
2018-06-16_23:49:36 Pool Kesseldruck: -400
2018-06-16_23:49:36 Pool Grr: 191.38
2018-06-16_23:49:36 Pool Wassersensor: -6.48
2018-06-16_23:49:36 Pool Time: 5937
Kann ich das irgendwie über eine Regex bei der Graph-Anlage filtern?
Danke & Grüße
Martin