[FHEM-Tablet-UI] Chart

Begonnen von RoBra81, 18 Dezember 2015, 13:42:10

Vorheriges Thema - Nächstes Thema

eki

Ich denke das Problem liegt bei der Definition des Logdevice. Wenn Du statt:

data-logdevice='FileLog_G_BZ'

data-logdevice='G_BZ'

schreibst, könnte es klappen. Du hast Dein Log Device laut Deiner Definitionszeile ja G_BZ und nicht FileLog_G_BZ genannt.

PlanLos


faerberma46466

Hi,

ich hoffe mir kann jemand helfen bzw mal drüber sehen - Raster und Achsen werden angezeigt, der Graph allerdings nach ewigem rumprobieren immer noch nicht  :-[

Vorallem im columspec habe ich schon sehr viel versucht und im Allgemeinen alles mal mit " oder '
ich kenne mich nicht mehr aus


aus der fhem.cfg

define Wandthermostat_SZ HMCCUDEV Wandthermostat_Schlafzimmer
....

define Temp_LF_SZ FileLog ./log/TEMP_LF_SZ-%Y-%m.log Wandthermostat_SZ:(HM-TC-IT-WM-W-EU_MEQ1330481.1.TEMPERATURE|HM-TC-IT-WM-W-EU_MEQ1330481.1.HUMIDITY|DEWPOINT).*
....


meine .log-Datei
2016-11-12_18:00:31 Wandthermostat_SZ DEWPOINT: 1.8
2016-11-12_18:05:08 Wandthermostat_SZ HM-TC-IT-WM-W-EU_MEQ1330481.1.TEMPERATURE: 14.6
2016-11-12_18:05:08 Wandthermostat_SZ HM-TC-IT-WM-W-EU_MEQ1330481.1.HUMIDITY: 41


meine .html
<div    data-type="chart"
data-logdevice='TEMP_LF_SZ'
data-columnspec='4:HM-TC-IT-WM-W-EU_MEQ1330481.1.TEMPERATURE'
data-style='ftui l0'
data-ptype='lines'
data-uaxis='primary'
data-legend=' '
data-yunit="&deg;C"
data-ytext="Temperatur"
data-yticks="auto"
data-minvalue="0"
data-maxvalue="60"
data-daysago_start="0"
data-daysago_end="-1"
data-crosshair="true"
data-cursorgroup="1"
data-scrollgroup="1"
data-width="100%"
data-height="260"
data-xticks="auto">
</div>


und noch der Auszug der Konsole - wobei mir Zeile 1 und die ganzen [] etwas komisch vorkommen (ich aber auch leider keine Lösung finde)
1 function widget_chart.refresh() Got 0 points for Graph 1widget_chart.js:51:35
1 function widget_chart.refresh() Chart finished, Parameters: {
  "type": "chart",
  "xticks": "auto",
  "height": 260,
  "width": "100%",
  "scrollgroup": 1,
  "cursorgroup": 1,
  "crosshair": true,
  "daysago_end": -1,
  "daysago_start": 0,
  "maxvalue": 60,
  "minvalue": 0,
  "yticks": "auto",
  "ytext": "Temperatur",
  "yunit": "°C",
  "legend": " ",
  "uaxis": "primary",
  "ptype": "lines",
  "style": "ftui l0",
  "columnspec": "4:HM-TC-IT-WM-W-EU_MEQ1330481.1.TEMPERATURE",
  "logdevice": "TEMP_LF_SZ",
  "minvalue_sec": 10,
  "maxvalue_sec": 30,
  "timeformat": "",
  "yticks_sec": "auto",
  "yunit_sec": "",
  "ytext_sec": "",
  "get": "STATE",
  "graphWidth": 92.20253473595727,
  "graphHeight": 84.21795184795673,
  "textWidth": 30,
  "textHeight": 15.0333251953125,
  "bottomOffset": 15.0333251953125,
  "topOffset": 26,
  "crs_inactive": false,
  "showlegend": false,
  "nofulldays": false,
  "graphsshown": [
    true
  ],
  "device": "TEMP_LF_SZ",
  "xclassifier": "",
  "days_start": 0,
  "days_end": -1,
  "instance": 1,
  "noticks": false,
  "DDD": {
    "has3D": true,
    "prefix": "-moz-",
    "dir": {
      "x": 1,
      "y": 1
    },
    "Active": false,
    "Setting": [
      "0",
      "0",
      "0"
    ],
    "Space": 15,
    "Width": 10,
    "Distance": 25,
    "String": {
      "Rot": "-moz-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg)",
      "Scale": "translate(0px, 0px) scale(1, 1)"
    },
    "scaleX": 1,
    "scaleY": 1,
    "shiftY": 0,
    "shiftX": 0
  },
  "popup": false,
  "xrange": 1440,
  "mindate": "2016-11-15_00:00:00",
  "nGraphs": 1,
  "logProxy": false,
  "nofilldown": [
    false
  ],
  "textWidth_prim": 44.566650390625,
  "textWidth_sec": 17.0333251953125,
  "dateWidth": 30.0333251953125,
  "xscale": 1440,
  "basewidth": 790,
  "baseheight": 260,
  "xStr": "44.566650390625px",
  "xStrTO": "44.566650390625px",
  "yStr": "728.4000244140625px",
  "yStrTO": "218.9666748046875px",
  "projectionDist": 5000,
  "defaultHeight": "",
  "defaultWidth": "93%",
  "chartArea": {
    "left": 85,
    "top": 130.3000030517578,
    "width": 790,
    "height": 260
  },
  "graphArea": {
    "left": 129.566650390625,
    "top": 156.3000030517578,
    "width": 728.4000244140625,
    "height": 218.9666748046875
  },
  "xrangeW": null,
  "diffY_prim": 60,
  "min_prim": 0,
  "scaleY": 7.21471721467867,
  "shiftY": 0,
  "min_save": 0,
  "max_save": 432.8830328807202,
  "diffY_sec": 20,
  "min_sec": 10,
  "scaleY_sec": 21.644151644036008,
  "shiftY_sec": 216.4415164403601,
  "min_save_sec": 0,
  "max_save_sec": 432.8830328807202,
  "pointsarray": [
    []
  ],
  "pointsarrayCursor": [
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    [],
    []
  ],
  "done": true
}widget_chart.js:51:35


Ich hoffe jemand kann mir einen Denkanstoß geben oder einen Fehler finden

Vielen Dank schonmal

eki

Die Columnspec sollte eigentlich passen.

Allerdings ist mir aufgefallen, dass Du das Logdevice in FHEM als Temp_LF_SZ definiert hast, im Configfile allerdings als TEMP_LF_SZ (alles Großbuchstaben). Damit findet FHEM das logdevice nicht und es kommen keine Daten zurück, also auch keine Plotinhalt.

robu

Hallo all,

dieses Forum und dieser Thread haben mir schon sehr geholfen. Die Charts sehen richtig gut aus!  :)

Eine Sache konnte ich bisher nicht finden....kann man die Linienstärke der Charts ändern?

eki

Ja, das geht. Die meisten Einstellungen bezüglich der Darstellung werden in css Files festgelegt. Die Standardeinstellungen sind im File "css\ftui_chart.css" abgelegt. Man könnte Änderungen direkt in diesem File machen, das ist aber nicht so schön, da es möglicherweise bei einem Update von FTUI überschrieben wird.
Mein Vorschlag:
Füge folgenden Eintrag in dein html File ein (das, welches Du in der URL für den Browser verwendest). Möglicherweise ist der Eintrag auch schon enthalten:
<link rel="stylesheet" href="css/fhem-tablet-ui-user.css" />

Öffne danach dieses File mit einem Editor und füge z.B. folgenden Eintrag ein:


/* Definition for own styles for charts */
/* normal lines */
.ftui.l99 { stroke:#DDA400; stroke-width:2px; fill:none; }

/* Symbols */
.ftui.l99sym { stroke:#DDA400; stroke-width:12px; fill:none; }

/* icon lines */
.ftui.l99icon { stroke:#DDA400; stroke-width:32px; fill:none; }

/* Dashed lines */
.ftui.l99dash { stroke:#DDA400; stroke-width:2px; fill:none; stroke-dasharray:5px,3px; }

/* Dotted lines */
.ftui.l99dot { stroke:#DDA400; stroke-width:2px; fill:none; stroke-dasharray:2px,2px; }

/* Filled graphs */
.ftui.l99fill { stroke:#DDA400; fill:url(#gr_ftui0); stroke-width:2px; fill-opacity:0.8 }

/* additional settings for the text (mainly for legend window) */
text.ftui.l99, text.ftui.l99sym, text.ftui.l99dot, text.ftui.l99dash, text.ftui.l99fill { stroke:none; fill:#DDA400; }


Jetzt kannst Du dort wo stroke-width:2px steht einen Wert Deiner Wahl eintragen (z.B. stroke-width:4px, dann werden die Linien doppelt so dick) und als Style in der chartdefinition z.B. "ftui l99" verwenden.


data-style='["ftui l99"]'

robu

Super, sogar gestrichelte Linien :) Vielen Dank!

mkriegl

Gibt es eine Möglichkeit die letzten 24h von der aktuellen Zeit ab anzeigen zu lassen? Ich fand die Darstellung fhem Plots bisher interessanter. Bei data-daysago_end kann man ja nur Tage angeben "now" z.b. hat bei mir nicht funktioniert.

DodiHudori

bekomme das leider auch nicht hin :( der Chart taucht auf, bleibt aber leer. Hier mal mein Code:

Chart in der index.html:

<li data-row="7" data-col="1" data-sizex="6" data-sizey="4">
    <header>Wetter</header>
   
<div data-type="chart"
data-logdevice='["TempInnen"]'
    data-logfile='["TempInnen"]'
data-columnspec='["4:netatmo_D70_ee_50_17_7b_d2 temperature]'
data-style='["ftui l0fill","ftui l1fill","ftui l2","ftui l3dot"]'
data-ptype='["lines","histeps","histeps","cubic"]'
data-uaxis='["primary","secondary","secondary","primary"]'
data-legend='["Temperature","Rain/hour","Rain/day","Predicted Temp."]'
data-yunit="°C"
data-ytext="Temperature"
data-minvalue="auto"
data-maxvalue="auto"
data-yunit_sec="mm"
data-ytext_sec="Rain (mm)"
data-height="250"
data-yticks="auto"
data-minvalue_sec="auto"
data-maxvalue_sec="auto"
data-nofulldays="true"
data-daysago_start="2016-12-20T00:00:00"
data-daysago_end="2016-12-30T00:00:00"
data-cursorgroup="1"
data-scrollgroup="1"
data-xticks="auto">
</div>
    </li>


Filellog heisst: TempInnen.log:

TempInnen-2016-12-23.log
text
TempInnen-2016-12-24.log
text
TempInnen-2016-12-25.log
text
TempInnen-2016-12-26.log
text
TempInnen-2016-12-27.log
text
TempInnen-2016-12-28.log
text
TempInnen-2016-12-29.log
text
TempInnen-2016-12-30.log
text
TempInnen-2016-12-31.log
text



und hier der Inhalt:

2016-12-30_14:09:00 netatmo_D70_ee_50_17_7b_d2 temperature: 21.7
2016-12-30_14:09:00 netatmo_D70_ee_50_17_7b_d2 co2: 543
2016-12-30_14:09:00 netatmo_D70_ee_50_17_7b_d2 pressure: 1032.4
2016-12-30_14:14:02 netatmo_D70_ee_50_17_7b_d2 temperature: 22
2016-12-30_14:14:02 netatmo_D70_ee_50_17_7b_d2 co2: 560
2016-12-30_14:14:02 netatmo_D70_ee_50_17_7b_d2 noise: 41
2016-12-30_14:14:02 netatmo_D70_ee_50_17_7b_d2 pressure: 1032.3
2016-12-30_14:19:04 netatmo_D70_ee_50_17_7b_d2 temperature: 21.9
2016-12-30_14:19:04 netatmo_D70_ee_50_17_7b_d2 co2: 588
2016-12-30_14:19:04 netatmo_D70_ee_50_17_7b_d2 noise: 39
2016-12-30_14:19:04 netatmo_D70_ee_50_17_7b_d2 pressure: 1032.2


hänge daran schon mehr oder weniger ein paar Stunden (mit Kaffee) und komm nicht auf den Fehler :(

eki

Zitat von: mkriegl am 31 Dezember 2016, 01:27:31
Gibt es eine Möglichkeit die letzten 24h von der aktuellen Zeit ab anzeigen zu lassen? Ich fand die Darstellung fhem Plots bisher interessanter. Bei data-daysago_end kann man ja nur Tage angeben "now" z.b. hat bei mir nicht funktioniert.

Habe ich da https://forum.fhem.de/index.php/topic,48450.msg521422.html#msg521422 schon mal beschrieben.

eki

Zitat von: DodiHudori am 31 Dezember 2016, 14:46:53
bekomme das leider auch nicht hin :( der Chart taucht auf, bleibt aber leer. Hier mal mein Code:

...

hänge daran schon mehr oder weniger ein

Mir sind mehrere Dinge aufgefallen:
- in der Columnspec fehlt ein " vor ]'
- es müssten mehrere Einträge in der Columnspec sein,  wenn Du mehrere unterschiedliche Graphen haben willst (in der Legende hast Du allerdings Daten wie Rain/Hour beschrieben, die ich im Logbeispiel gar nicht finde)
- bei der Regexp würde ich statt dem Leerzeichen einen Punkt machen
data-columnspec='["4:netatmo_D70_ee_50_17_7b_d.temperature","4:netatmo_D70_ee_50_17_7b_d.pressure"]'
- die Zeile mit data-logfile solltest Du rausnehmen, es sei denn Du willst nicht das default Logfile verwenden, dann aber den ganzen Namen eingeben.

DodiHudori

Hallo eki,

danke für die Tips, ich habe deine Vorschläge berücksichtigt (siehe Quelltext), leider mit dem selben Ergebnis. Hast du noch einen Tip? Wie gesagt, der Chart wird angezeigt, allerdings ohne "Linien"  :-\


<div data-type="chart"
data-logdevice='["TempInnen"]'
data-columnspec='["4:netatmo_D70_ee_50_17_7b_d.temperature","4:netatmo_D70_ee_50_17_7b_d.pressure"]'
data-style='["ftui l0fill","ftui l1fill","ftui l2","ftui l3dot"]'
data-ptype='["lines","histeps","histeps","cubic"]'
data-uaxis='["primary","secondary","secondary","primary"]'
data-legend='["Temperature"]'
data-yunit="°C"
data-ytext="Temperature"
data-minvalue="auto"
data-maxvalue="auto"
data-yunit_sec="mm"
data-ytext_sec="Rain (mm)"
data-height="250"
data-yticks="auto"
data-minvalue_sec="auto"
data-maxvalue_sec="auto"
data-nofulldays="true"
data-daysago_start="2016-12-20T00:00:00"
data-daysago_end="2016-12-30T00:00:00"
data-cursorgroup="1"
data-scrollgroup="1"
data-xticks="auto">
</div>

eki

Das Device hat am Ende d2 und nicht nur d. Also noch mal Columnspec anpassen.

GSK19

Hallo,

seit dem letzten Update vor ein paar Tagen bleibt mein Chart leider leer. Achsen usw. sind da, nur eben der Graph nicht - bevor ich das FTUI-Update gefahren ging alles.
Habe jetzt stundenlang schon alle möglichen Varianten von data-device, data-logdevice und data-columnspec - leider ohne Erfolg, bin daher für jeden Tipp dankbar!

So sieht meine Definition aus:

fhem.cfg:

define FileLog_Gewicht.B FileLog ./log/Gewicht.B.log Gewicht.B
attr FileLog_Gewicht.B logtype text
define FileLog_Gewicht.G FileLog ./log/Gewicht.G.log Gewicht.G
attr FileLog_Gewicht.G logtype text


Auszug aus einem der Log-Files (das zweite sieht vom Aufbau her auch so aus):

2017-02-25_10:49:30 Gewicht.B 72.179


Und der Auszug aus meiner .html-Datei:

<div data-type="chart"
data-device='["Gewicht.B","Gewicht.G"]'
data-logdevice='["FileLog_Gewicht.B","FileLog_Gewicht.G"]'
data-columnspec='["3:Gewicht.B.*","3:Gewicht.G.*"]'
data-style='["ftui l6","ftui l1"]'
data-ptype='["lines","lines"]'
data-uaxis='["primary","secondary"]'
data-legend='["Gewicht B","Gewicht G"]'
data-yunit="kg"
data-ytext="Gewicht"
data-minvalue="70.0"
data-maxvalue="80.0"
data-yunit_sec="kg"
data-ytext_sec="Gewicht"
data-height="500"
data-yticks="1.0"
data-minvalue_sec="70.0"
data-maxvalue_sec="80.0"
data-nofulldays="true"
data-daysago_start="2017-02-01T00:00:00"
data-daysago_end="2017-03-01T00:00:00"
data-cursorgroup="1"
data-scrollgroup="1"
data-showlegend="true"
data-xticks="auto">
</div>