Hallo,
ich habe für mich das FHEM Tablet UI entdeckt und spiele gerade ein bisschen mit den Widgets rum, bevor ich mir ein UI zusammenbaue - sieht echt toll aus!
Nun möchte ich mir einen Chart bauen, der links Temperatur und rechts Luftfeuchte anzeigt. Simplechart kann ja nun nur einen Wert. Also habe ich es mit highchart probiert: dort habe ich zwar mehrere Werte anzeigen können, aber leider mit nur einer y-Achse - die Skalierung von Temperatur und Luftfeuchte passt aber nicht wirklich in eine y-Achse. Also habe ich es mit chart probiert: leider bekomme ich da gar keine Anzeige hin. Wo liegt mein Fehler bei der Definition des Charts:
<li data-row="2" data-col="1" data-sizex="5" data-sizey="4" class="semitransparent">
<header class="semitransparent">CHART</header>
<div class="normal"
data-type="chart"
data-height="100"
data-device='["DG.wz.HK.Wandthermostat","DG.wz.HK.Wandthermostat"]'
data-logdevice='["DBLog_XX.xx.HZ.Heizung","DBLog_XX.xx.HZ.Heizung"]'
data-columnspec='["DG.wz.HK.Wandthermostat:measured-temp","DG.wz.HK.Wandthermostat:humidity"]'
data-style='["ftui l0fill","ftui l1fill"]'
data-ptype='["lines","lines"]'
data-uaxis='["primary","secondary"]'
data-legend='["Temp","Hum"]'
data-yunit="°C"
data-ytext="Temperature"
data-minvalue="auto"
data-maxvalue="auto"
data-yunit_sec="%"
data-ytext_sec="Percentage"
data-yticks="auto"
data-minvalue_sec="0"
data-maxvalue_sec="100"
data-daysago_start="0"
data-daysago_end="-1"
data-crosshair="true"
data-cursorgroup="1"
data-scrollgroup="1"
data-showlegend="true"
data-xticks="auto">
</div>
</li>
Alternativ: wie kann ich in Highchart zwei y-Achsen einblenden?
Vielen Dank
Ronny
Ändere mal die Zeilen
data-device='["DG.wz.HK.Wandthermostat","DG.wz.HK.Wandthermostat"]'
data-logdevice='["DBLog_XX.xx.HZ.Heizung","DBLog_XX.xx.HZ.Heizung"]'
in
data-device="DG.wz.HK.Wandthermostat"
data-logdevice="DBLog_XX.xx.HZ.Heizung"
Da hat das Chart Widget noch einen Fehler, der in der nächsten Version beseitigt sein sollte.
Danke, das war's.
Ronny
Noch eine ergänzende Frage: Ich würde den Chart gern in einem Popup darstellen, das funktioniert jedoch nicht? Die Chartdefinition die in einem "normalen" Bild funktioniert habe ich 1-zu-1 in ein Popup kopiert, das bleibt jedoch leer:
<div data-type="popup" data-width="800px" data-height="800px" class="inline">
<div data-type="simplechart"
data-device="DG.wz.HK.Wandthermostat"
data-logdevice="DBLog_XX.xx.HZ.Heizung"
data-columnspec="DG.wz.HK.Wandthermostat:humidity"
data-minvalue="0"
data-maxvalue="100"
data-height="60"
data-width="90"
class="noticks">
</div>
<div class="dialog">
<header>CHART</header>
<div data-type="chart"
data-device="DG.wz.HK.Wandthermostat"
data-logdevice="DBLog_XX.xx.HZ.Heizung"
data-columnspec='["DG.wz.HK.Wandthermostat:measured-temp","DG.wz.HK.Wandthermostat:humidity"]'
data-style='["ftui l0fill","ftui l1fill"]'
data-ptype='["lines","lines"]'
data-uaxis='["primary","secondary"]'
data-legend='["Temperatur","Luftfeuchte"]'
data-yunit="°C"
data-ytext="Temperature"
data-minvalue="auto"
data-maxvalue="auto"
data-yunit_sec="%"
data-ytext_sec="Percentage"
data-yticks="auto"
data-minvalue_sec="0"
data-maxvalue_sec="100"
data-daysago_start="0"
data-daysago_end="-1"
data-crosshair="true"
data-cursorgroup="1"
data-scrollgroup="1"
data-showlegend="true"
data-xticks="auto">
</div>
</div>
</div>
Ronny
Ich habe Deine Definition bei mir ausprobiert, und das Chart gesehen. Die Struktur der Definition sollte also OK sein. Allerdings musste ich die device und columnspec austauschen, und ich habe kein Datenbak Logging sondern Files.
Hier scheint es im Zusammenhang mit Popup Probleme zu geben, die ich aber nicht nachvollziehen kann (weil kein DBLog). Siehst Du irgendwelche Meldungen auf der Browser Konsole?
Nein, leider keine Meldungen.
Es ist tatsächlich nichts drin: auf der "normalen" Seite sehe ich beim generierten HTML-Code folgendes:
<svg class="basesvg1" style="width: 93%; height: 400px;"><defs><linearGradient id="gr_bg" x1="0%" y1="0%" x2="0%" y2="100%"> <stop offset="0%" style="stop-color:#FFFFF7; stop-opacity:1"></stop> <stop offset="100%" style="stop-color:#FFFFC7; stop-opacity:1"></stop> </linearGradient><linearGradient id="gr_0" x1="0%" y1="0%" x2="0%" y2="100%"> <stop offset="0%" style="stop-color:#f00; stop-opacity:.6"></stop> <stop offset="100%" style="stop-color:#f88; stop-opacity:.4"></stop> </linearGradient><linearGradient id="gr_1" x1="0%" y1="0%" x2="0%" y2="100%"> <stop offset="0%" style="stop-color:#291; stop-opacity:.6"></stop> <stop offset="100%" style="stop-color:#8f7; stop-opacity:.4"></stop> </linearGradient><linearGradient id="gr_2" x1="0%" y1="0%" x2="0%" y2="100%"> <stop offset="0%" style="stop-color:#00f; stop-opacity:.6"></stop> <stop offset="100%" style="stop-color:#88f; stop-opacity:.4"></stop> </linearGradient><linearGradient id="gr_3" x1="0%" y1="0%" x2="0%" y2="100%"> <stop offset="0%" style="stop-color:#f0f; stop-opacity:.6"></stop> <stop offset="100%" style="stop-color:#f8f; stop-opacity:.4"></stop> </linearGradient><linearGradient id="gr_4" x1="0%" y1="0%" x2="0%" y2="100%"> <stop offset="0%" style="stop-color:#ff0; stop-opacity:.6"></stop> <stop offset="100%" style="stop-color:#ff8; stop-opacity:.4"></stop> </linearGradient><linearGradient id="gr_5" x1="0%" y1="0%" x2="0%" y2="100%"> <stop offset="0%" style="stop-color:#0ff; stop-opacity:.6"></stop> <stop offset="100%" style="stop-color:#8ff; stop-opacity:.4"></stop> </linearGradient><linearGradient id="gr_6" x1="0%" y1="0%" x2="0%" y2="100%"> <stop offset="0%" style="stop-color:#000; stop-opacity:.6"></stop> <stop offset="100%" style="stop-color:#ccc; stop-opacity:.4"></stop> </linearGradient><pattern id="gr0_stripe" width="4" height="4" patternUnits="userSpaceOnUse" patternTransform="rotate(-45 2 2)"> <path d="M -1,2 l 6,0" stroke="#f00" stroke-width="0.5"></path> </pattern><pattern id="gr1_stripe" width="4" height="4" patternUnits="userSpaceOnUse" patternTransform="rotate(45 2 2)"> <path d="M -1,2 l 6,0" stroke="green" stroke-width="0.5"></path> </pattern><linearGradient id="gr0_gyr" x1="0%" y1="0%" x2="0%" y2="100%"> <stop offset="0%" style="stop-color:#f00; stop-opacity:.6"></stop> <stop offset="50%" style="stop-color:#ff0; stop-opacity:.6"></stop> <stop offset="100%" style="stop-color:#0f0; stop-opacity:.6"></stop> </linearGradient></defs><defs><linearGradient id="gr_bgftui" x1="0%" y1="0%" x2="0%" y2="100%"><stop offset="0%" style="stop-color:#2A2A2A; stop-opacity:1"></stop><stop offset="50%" style="stop-color:#000; stop-opacity:1"></stop><stop offset="100%" style="stop-color:#2A2A2A; stop-opacity:1"></stop></linearGradient><linearGradient id="gr_ftui0" x1="0%" y1="0%" x2="0%" y2="100%"><stop offset="0%" style="stop-color:#DDA400; stop-opacity:1"></stop><stop offset="100%" style="stop-color:#553300; stop-opacity:1"></stop></linearGradient><linearGradient id="gr_ftui1" x1="0%" y1="0%" x2="0%" y2="100%"><stop offset="0%" style="stop-color:#BBBBBB; stop-opacity:1"></stop><stop offset="100%" style="stop-color:#333333; stop-opacity:1"></stop></linearGradient><linearGradient id="gr_ftui2" x1="0%" y1="0%" x2="0%" y2="100%"><stop offset="0%" style="stop-color:#FF0000; stop-opacity:1"></stop><stop offset="100%" style="stop-color:#880000; stop-opacity:1"></stop></linearGradient><linearGradient id="gr_ftui3" x1="0%" y1="0%" x2="0%" y2="100%"><stop offset="0%" style="stop-color:#CCCC00; stop-opacity:1"></stop><stop offset="100%" style="stop-color:#555500; stop-opacity:1"></stop></linearGradient><linearGradient id="gr_ftui4" x1="0%" y1="0%" x2="0%" y2="100%"><stop offset="0%" style="stop-color:#33CC33; stop-opacity:1"></stop><stop offset="100%" style="stop-color:#225522; stop-opacity:1"></stop></linearGradient><filter x="0" y="0" width="1" height="1" id="filterbackground"><feFlood flood-color="black" flood-opacity="0.5" result="bBlack"></feFlood><feMerge><feMergeNode in="bBlack"></feMergeNode><feMergeNode in="SourceGraphic"></feMergeNode></feMerge></filter></defs><g id="classesContainer" stroke="grey"></g><rect class="chart-background" x="51px" width="90.87779690189329%" preserveAspectRatio="none" style="transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); transform-origin: 0px 0px -50px;fill: url(#gr_bgftui)" height="87.5%" y="6%"></rect><svg class="chart-primary"><svg class="chart-parent viewbox" x="51px" width="90.87779690189329%" preserveAspectRatio="none" viewBox="0 -477.27272727272737 1440 477.27272727272737"><g class="graph-parent scaleyinvert" transform="scale(1 -1)"><polyline points=""></polyline><path d=""></path></g></svg><svg class="chart-parent viewbox" x="51px" width="90.87779690189329%" preserveAspectRatio="none" height="87.5%" y="6%" style="transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); transform-origin: 0px 0px -0px" viewBox="0 -477.27272727272737 1440 477.27272727272737"><g class="graph-parent scaleyinvert" transform="scale(1 -1)"><polyline points=""></polyline><path d="M10,0 L 10,171.81818181818198 22,162.27272727272725 30,152.72727272727298 47,143.18181818181824 57,133.6363636363635 75,124.09090909090924 96,114.5454545454545 121,105.00000000000023 133,95.4545454545455 152,85.90909090909076 169,76.36363636363649 197,66.81818181818176 217,57.27272727272748 220,66.81818181818176 227,57.27272727272748 253,47.72727272727275 277,38.181818181818244 280,47.72727272727275 283,38.181818181818244 321,28.63636363636374 346,19.090909090909236 425,28.63636363636374 440,38.181818181818244 458,47.72727272727275 476,57.27272727272748 523,47.72727272727275 526,57.27272727272748 542,47.72727272727275 555,57.27272727272748 557,47.72727272727275 602,38.181818181818244 605,47.72727272727275 625,38.181818181818244 628,47.72727272727275 716,57.27272727272748 719,47.72727272727275 732,57.27272727272748 739,66.81818181818176 742,76.36363636363649 747,95.4545454545455 749,105.00000000000023 752,133.6363636363635 755,143.18181818181824 757,171.81818181818198 760,181.36363636363626 762,200.45454545454572 764,229.090909090909 767,257.727272727273 769,267.2727272727275 772,286.3636363636365 775,305.4545454545455 777,315 780,324.5454545454545 782,334.090909090909 785,343.63636363636397 788,353.181818181818 790,362.727272727273 793,372.272727272727 800,381.818181818182 826,391.3636363636365 861,381.818181818182 883,372.272727272727 886,381.818181818182 889,372.272727272727 909,362.727272727273 915,372.272727272727 919,362.727272727273 929,353.181818181818 932,343.63636363636397 952,334.090909090909 955,343.63636363636397 959,334.090909090909 962,343.63636363636397 967,334.090909090909 977,343.63636363636397 979,334.090909090909 1025,324.5454545454545 1033,315 1043,305.4545454545455 1066,295.909090909091 1079,286.3636363636365 1100,276.818181818182 1117,267.2727272727275 1137,257.727272727273 1142,267.2727272727275 1145,257.727272727273 1162,248.18181818181847 1175,238.6363636363635 1198,248.18181818181847 1216,257.727272727273 L1216,0 Z" class="ftui l0fill" style="stroke-width: 2.727272727272727px;fill: url(#gr_ftui0)" id="primary-graph-1-0-lines" animstate="hide" min="0" xrange="1440"></path></g></svg></svg><svg class="chart-secondary"><svg class="chart-parent viewbox" x="51px" width="90.87779690189329%" preserveAspectRatio="none" viewBox="0 -477.27272727272737 1440 477.27272727272737"><g class="graph-parent scaleyinvert" transform="scale(1 -1)"><polyline points=""></polyline><path d=""></path></g></svg><svg class="chart-parent viewbox" x="51px" width="90.87779690189329%" preserveAspectRatio="none" viewBox="0 -477.27272727272737 1440 477.27272727272737" height="87.5%" y="6%" style="transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); transform-origin: 0px 0px -25px"><g class="graph-parent scaleyinvert" transform="scale(1 -1)"><polyline points=""></polyline><path d="M409,0 L 409,238.63636363636368 562,243.40909090909093 729,248.18181818181822 745,252.9545454545455 760,248.18181818181822 769,243.40909090909093 782,238.63636363636368 808,233.8636363636364 955,238.63636363636368 981,243.40909090909093 1038,238.63636363636368 1175,233.8636363636364 1188,238.63636363636368 1201,243.40909090909093 L1201,0 Z" class="ftui l1fill" style="stroke-width: 2.727272727272727px;fill: url(#gr_ftui1)" id="secondary-graph-1-1-lines" animstate="hide" min="0" xrange="1440"></path></g></svg><svg class="chart-parent viewbox" x="51px" width="90.87779690189329%" preserveAspectRatio="none" viewBox="0 -477.27272727272737 1440 477.27272727272737" height="87.5%" y="6%" style="transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); transform-origin: 0px 0px -50px"><g class="graph-parent scaleyinvert" transform="scale(1 -1)"><polyline points=""></polyline><path d="M735,0 L 735,477.27272727272737 765,477.27272727272737 765,405.68181818181824 767,405.68181818181824 L767,0 Z" class="ftui l2fill" style="stroke-width: 2.727272727272727px;fill: url(#gr_ftui2)" id="secondary-graph-1-2-steps" animstate="hide" min="0" xrange="1440"></path></g></svg></svg><svg class="chart-gridlines viewbox" x="51px" width="90.87779690189329%" preserveAspectRatio="none" style="transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); transform-origin: 0px 0px -50px" height="87.5%" y="6%" viewBox="0 -477.27272727272737 1440 477.27272727272737"><g class="gridlines scaleyinvert" stroke="rgb(238, 238, 238)" transform="scale(1 -1)"><line class="xticks" x1="91.66666666666667%" y1="0" x2="91.66666666666667%" y2="477.27272727272725" style="stroke-width:1.3636363636363635px; stroke-dasharray:1.3636363636363635px,2.727272727272727px"></line><line class="xticks" x1="83.33333333333333%" y1="0" x2="83.33333333333333%" y2="477.27272727272725" style="stroke-width:1.3636363636363635px; stroke-dasharray:1.3636363636363635px,2.727272727272727px"></line><line class="xticks" x1="75%" y1="0" x2="75%" y2="477.27272727272725" style="stroke-width:1.3636363636363635px; stroke-dasharray:1.3636363636363635px,2.727272727272727px"></line><line class="xticks" x1="66.66666666666667%" y1="0" x2="66.66666666666667%" y2="477.27272727272725" style="stroke-width:1.3636363636363635px; stroke-dasharray:1.3636363636363635px,2.727272727272727px"></line><line class="xticks" x1="58.333333333333336%" y1="0" x2="58.333333333333336%" y2="477.27272727272725" style="stroke-width:1.3636363636363635px; stroke-dasharray:1.3636363636363635px,2.727272727272727px"></line><line class="xticks" x1="50%" y1="0" x2="50%" y2="477.27272727272725" style="stroke-width:1.3636363636363635px; stroke-dasharray:1.3636363636363635px,2.727272727272727px"></line><line class="xticks" x1="41.666666666666664%" y1="0" x2="41.666666666666664%" y2="477.27272727272725" style="stroke-width:1.3636363636363635px; stroke-dasharray:1.3636363636363635px,2.727272727272727px"></line><line class="xticks" x1="33.333333333333336%" y1="0" x2="33.333333333333336%" y2="477.27272727272725" style="stroke-width:1.3636363636363635px; stroke-dasharray:1.3636363636363635px,2.727272727272727px"></line><line class="xticks" x1="25%" y1="0" x2="25%" y2="477.27272727272725" style="stroke-width:1.3636363636363635px; stroke-dasharray:1.3636363636363635px,2.727272727272727px"></line><line class="xticks" x1="16.666666666666668%" y1="0" x2="16.666666666666668%" y2="477.27272727272725" style="stroke-width:1.3636363636363635px; stroke-dasharray:1.3636363636363635px,2.727272727272727px"></line><line class="xticks" x1="8.333333333333334%" y1="0" x2="8.333333333333334%" y2="477.27272727272725" style="stroke-width:1.3636363636363635px; stroke-dasharray:1.3636363636363635px,2.727272727272727px"></line><line class="yticks" x1="0" y1="477.27272727272725" x2="1440" y2="477.27272727272725" style="stroke-width:1.3636363636363635px; stroke-dasharray:undefined"></line><line class="yticks" x1="0" y1="381.8181818181818" x2="1440" y2="381.8181818181818" style="stroke-width:1.3636363636363635px; stroke-dasharray:undefined"></line><line class="yticks" x1="0" y1="286.3636363636364" x2="1440" y2="286.3636363636364" style="stroke-width:1.3636363636363635px; stroke-dasharray:undefined"></line><line class="yticks" x1="0" y1="190.90909090909093" x2="1440" y2="190.90909090909093" style="stroke-width:1.3636363636363635px; stroke-dasharray:undefined"></line><line class="yticks" x1="0" y1="95.4545454545455" x2="1440" y2="95.4545454545455" style="stroke-width:1.3636363636363635px; stroke-dasharray:undefined"></line><line class="xaxis" x1="0" y1="1.3636363636363635" x2="1440" y2="1.3636363636363635" style="stroke-width:1.3636363636363635px; stroke-dasharray:undefined"></line><line class="yaxis" x1="1.3636363636363635" y1="0" x2="1.3636363636363635" y2="477.27272727272725" style="stroke-width:1.3636363636363635px; stroke-dasharray:undefined"></line></g></svg><svg class="crosshair" pointer-events="none" style="display: none;"><line class="crosshair" x1="439.25" y1="24" x2="439.25" y2="374"></line><text class="crosshair" filter="url(#filterbackground)" style="stroke-width:0px" text-anchor="end" x="436.7333333333333" y="331.99999999999983">Temperatur: 19.6 °C</text><text class="crosshair" filter="url(#filterbackground)" style="stroke-width:0px" text-anchor="end" x="463.1333333333333" y="195.50000000000003">Luftfeuchte: 51 %</text><text class="crosshair" filter="url(#filterbackground)" style="stroke-width:0px" text-anchor="end" x="590" y="24">Ventilstellung: 100 %</text></svg><svg class="legend" x="0px" width="1162px" height="400px" y="0px"><text class="caption active" x="49%" y="12" dy="0.4em" style="text-anchor:end">Legend</text><text class="caption active" x="51%" y="12" dy="0.4em" text-anchor="begin">Cursor</text><svg class="lentries" x="0%" y="0px"><rect class="legend lback" style="position: relative;" x="1039px" y="24px" height="52px" width="68px"></rect><text class="legend ftui l0fill" x="1104.5px" y="40.5px" text-anchor="end" style="stroke-width:0px;fill-opacity:1;" igraph="0" opacity="1">Temperatur</text><text class="legend ftui l1fill" x="1104.5px" y="54.5px" text-anchor="end" style="stroke-width:0px;fill-opacity:1;" igraph="1" opacity="1">Luftfeuchte</text><text class="legend ftui l2fill" x="1104.5px" y="68.5px" text-anchor="end" style="stroke-width:0px;fill-opacity:1;" igraph="2" opacity="1">Ventilstellung</text></svg></svg><g class="buttons"><text class="buttons" x="99px" y="12px" dy="0.4em" text-anchor="middle" style="font-family: FontAwesome" onclick="widget_chart.scale(evt, $("svg.basesvg1").parent(), 0.5)"></text><text class="buttons" x="135px" y="12px" dy="0.4em" text-anchor="middle" style="font-family: FontAwesome" onclick="widget_chart.scale(evt, $("svg.basesvg1").parent(), 2)"></text><text class="buttons" x="63px" y="12px" dy="0.4em" text-anchor="middle" style="font-family: FontAwesome" onclick="widget_chart.shift(evt, $("svg.basesvg1").parent(), 1)"></text><text class="buttons" x="1095px" y="12px" dy="0.4em" text-anchor="middle" style="font-family: FontAwesome" onclick="widget_chart.shift(evt, $("svg.basesvg1").parent(), -1)"></text></g><g class="text axes scaleyinvert" style="transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); transform-origin: 0px 0px -50px" transform="scale(1 -1)"><g class="text yaxis_primary"><text class="text axes yaxis" x="1.1187607573149743%" y="203.5" transform="rotate(-90 13.000000000000002,203.5)" text-anchor="middle">Temperature</text><text class="text axes yaxis" x="49px" y="308.5" text-anchor="end">20.0°C</text><text class="text axes yaxis" x="49px" y="238.5" text-anchor="end">21.0°C</text><text class="text axes yaxis" x="49px" y="168.5" text-anchor="end">22.0°C</text><text class="text axes yaxis" x="49px" y="98.5" text-anchor="end">23.0°C</text><text class="text axes yaxis" x="49px" y="28.5" text-anchor="end">24.0°C</text><text class="text axes yaxis" x="98.88123924268503%" y="203.5" transform="rotate(-90 1149,203.5)" text-anchor="middle">Percentage</text><text class="text axes yaxis" x="1109px" y="308.5" text-anchor="start">20%</text><text class="text axes yaxis" x="1109px" y="238.5" text-anchor="start">40%</text><text class="text axes yaxis" x="1109px" y="168.50000000000003" text-anchor="start">60%</text><text class="text axes yaxis" x="1109px" y="98.50000000000001" text-anchor="start">80%</text><text class="text axes yaxis" x="1109px" y="28.5" text-anchor="start">100%</text></g><g class="text xaxis"><text class="text axes xaxis" x="51px" y="391.5" text-anchor="middle">18.12.</text><text class="text axes xaxis" x="11.962134251290877%" y="391.5" text-anchor="middle">02:00</text><text class="text axes xaxis" x="19.535283993115318%" y="391.5" text-anchor="middle">04:00</text><text class="text axes xaxis" x="27.10843373493976%" y="391.5" text-anchor="middle">06:00</text><text class="text axes xaxis" x="34.6815834767642%" y="391.5" text-anchor="middle">08:00</text><text class="text axes xaxis" x="42.25473321858865%" y="391.5" text-anchor="middle">10:00</text><text class="text axes xaxis" x="49.827882960413085%" y="391.5" text-anchor="middle">12:00</text><text class="text axes xaxis" x="57.40103270223753%" y="391.5" text-anchor="middle">14:00</text><text class="text axes xaxis" x="64.97418244406197%" y="391.5" text-anchor="middle">16:00</text><text class="text axes xaxis" x="72.5473321858864%" y="391.5" text-anchor="middle">18:00</text><text class="text axes xaxis" x="80.12048192771086%" y="391.5" text-anchor="middle">20:00</text><text class="text axes xaxis" x="87.69363166953529%" y="391.5" text-anchor="middle">22:00</text><text class="text axes xaxis" x="95.26678141135973%" y="391.5" text-anchor="middle">19.12.</text></g></g></svg>
Im Popup steht stattdessen nur:
<svg class="basesvg1" style="width: 93%;height:400px"><g id="classesContainer" stroke="grey"></g></svg>
Ich habe mir mal die Datei widget_chart.js angesehen (habe nur begrenzte js-Kenntnisse): meine Vermutung ist, dass zwar die Funktion init aufgerufen wird (diese erzeugt den zweiteren Code), nicht jedoch die Funktion refresh, welche den ersteren Code zu erzeugen scheint...
Ronny
Sorry, habe gerade zufällig gesehen, dass hier jemand das gleiche Problem hat:
http://forum.fhem.de/index.php/topic,37378.msg374672.html#msg374672
Für andere Suchende: im angegeben Thread habe ich eine (temporäre) Lösung beschrieben...
Hi, ich scheitere seit Tagen daran ein Chart im Tablet UI für meine Heizkörper zu erstellen. Die SVG im fhem funktioniert sehr gut.
Genau so wollte ich die SVG im Tabelt UI auch darstellen. Dies geht scheinbar nur mit dem Widget "Chart"!?
Diesen Code habe ich in meine index.html eingefügt. Leider bekomme ich nur ein leeres Fenster zu sehen!
Welchen Fehler habe ich noch im Code?
<li data-row="2" data-col="1" data-sizex="5" data-sizey="4">
<header>CHART</header>
<div class="normal"
data-type="chart"
data-height="100"
data-device="Heizung_Thermo_Wohnz"
data-logdevice="FileLog_Heizung_Thermo_Wohnz"
data-columnspec='["Heizung_Thermo_Wohnz measured-temp","Heizung_Thermo_Wohnz desired-temp"]'
data-style='["ftui l0fill","ftui l1fill"]'
data-ptype='["lines","lines"]'
data-uaxis='["primary","secondary"]'
data-legend='["Temp","Hum"]'
data-yunit="°C"
data-ytext="Temperature"
data-minvalue="auto"
data-maxvalue="auto"
data-yunit_sec="%"
data-ytext_sec="Percentage"
data-yticks="auto"
data-minvalue_sec="0"
data-maxvalue_sec="100"
data-daysago_start="0"
data-daysago_end="-1"
data-crosshair="true"
data-cursorgroup="1"
data-scrollgroup="1"
data-showlegend="true"
data-xticks="auto">
</div>
</li>
hier die Daten aus der SVG
2016-01-19_21:01:34 Heizung_Thermo_Wohnz Activity: alive
2016-01-19_21:46:46 Heizung_Thermo_Wohnz battery: ok
2016-01-19_21:46:46 Heizung_Thermo_Wohnz batteryLevel: 3.1
2016-01-19_21:46:46 Heizung_Thermo_Wohnz desired-temp: 22.0
2016-01-19_21:46:46 Heizung_Thermo_Wohnz measured-temp: 22.0
2016-01-19_21:48:50 Heizung_Thermo_Wohnz_Climate T: 22.0 desired: 22.0
2016-01-19_21:46:46 Heizung_Thermo_Wohnz_Climate boostTime: -
2016-01-19_21:46:46 Heizung_Thermo_Wohnz_Climate commReporting: off
2016-01-19_21:46:46 Heizung_Thermo_Wohnz_Climate controlMode: auto
2016-01-19_21:48:50 Heizung_Thermo_Wohnz_Climate desired-temp: 22.0
2016-01-19_21:48:50 Heizung_Thermo_Wohnz_Climate humidity: 41
2016-01-19_21:48:50 Heizung_Thermo_Wohnz_Climate measured-temp: 22.0
2016-01-19_21:46:46 Heizung_Thermo_Wohnz_Climate winOpenReporting: off
2016-01-19_21:46:20 Heizung_Thermo_Wohnz_SwitchTr level: 0
2016-01-19_21:46:20 Heizung_Thermo_Wohnz_SwitchTr trigger_cnt: 200
2016-01-19_21:49:10 Heizung_Thermo_Wohnz_Weather T: 22.0 H: 41
2016-01-19_21:49:10 Heizung_Thermo_Wohnz_Weather humidity: 41
2016-01-19_21:49:10 Heizung_Thermo_Wohnz_Weather temperature: 22.0
Versuche mal bei der columnspec statt Leerzeichen einen . Zu verwenden.
Da ist ja auch kein Match ... im columspec fehlt _Climate ... entweder hinzufügen oder nur das Reading als Suchbegriff angeben, in deinem Beispiel wäre das eindeutig
Da habe ich die 2. Box gescrollt betrachtet und war dann auch etwas zu schnell mit der Antwort :( ... Sorry
Aus meiner Sicht müssten die Columnspec Werte mit Deinem Logfile so ähnlich aussehen:
"4:Heizung_Thermo_Wohnz.measured-temp:0:" oder
"4:Heizung_Thermo_Wohnz_Climate.measured-temp:0:"
(hängt davon ab aus welchem Kanal Du die Messwerte nehmen willst)
Zur Erklärung:
der erste Wert (Werte durch ":" getrennt), die 4, gibt die Spalte an (durch " "getrennt) aus der der Darstellungswert genommen werden soll (Datum erste Spalte, Heizung_Thermo_Wohnz zweite Spalte, measured-temp: dritte Spalte, Wert vierte Spalte)
der zweite Wert, Heizung..., gibt an wie die Zeilen gefiltert werden sollen, in Deinem Falls als alles was Heizung...measured-temp enthält
der dritte Wert gibt den Default an, wenn keine Daten zurück geliefert werden (z.B. wenn im aktuellen Datumsbereich keine Messwerte vorliegen)
man kann danach noch weitere Werte angeben, z.B. "delta-h" um die Änderungen der Werte in der Stunde anstatt der Messwerte dargestellt werden sollen.
Zitat von: eki am 20 Januar 2016, 11:15:11
Aus meiner Sicht müssten die Columnspec Werte mit Deinem Logfile so ähnlich aussehen:
"4:Heizung_Thermo_Wohnz.measured-temp:0:" oder
"4:Heizung_Thermo_Wohnz_Climate.measured-temp:0:"
(hängt davon ab aus welchem Kanal Du die Messwerte nehmen willst)
Zur Erklärung:
der erste Wert (Werte durch ":" getrennt), die 4, gibt die Spalte an (durch " "getrennt) aus der der Darstellungswert genommen werden soll (Datum erste Spalte, Heizung_Thermo_Wohnz zweite Spalte, measured-temp: dritte Spalte, Wert vierte Spalte)
der zweite Wert, Heizung..., gibt an wie die Zeilen gefiltert werden sollen, in Deinem Falls als alles was Heizung...measured-temp enthält
der dritte Wert gibt den Default an, wenn keine Daten zurück geliefert werden (z.B. wenn im aktuellen Datumsbereich keine Messwerte vorliegen)
man kann danach noch weitere Werte angeben, z.B. "delta-h" um die Änderungen der Werte in der Stunde anstatt der Messwerte dargestellt werden sollen.
Danke das habe ich geändert aber leider bleibt der Chart weiterhin komplett leer!?
<li data-row="2" data-col="1" data-sizex="5" data-sizey="4">
<header>CHART</header>
<div class="normal"
data-type="chart"
data-height="100"
data-device="Heizung_Thermo_Wohnz"
data-logdevice="FileLog_Heizung_Thermo_Wohnz"
data-columnspec='["4:Heizung_Thermo_Wohnz.measured-temp:0:","4:Heizung_Thermo_Wohnz.desired-temp:0:"]'
data-style='["ftui l0fill","ftui l1fill"]'
data-ptype='["lines","lines"]'
data-uaxis='["primary","secondary"]'
data-legend='["Temp","Hum"]'
data-yunit="°C"
data-ytext="Temperature"
data-minvalue="auto"
data-maxvalue="auto"
data-yunit_sec="%"
data-ytext_sec="Percentage"
data-yticks="auto"
data-minvalue_sec="0"
data-maxvalue_sec="100"
data-daysago_start="0"
data-daysago_end="-1"
data-crosshair="true"
data-cursorgroup="1"
data-scrollgroup="1"
data-showlegend="true"
data-xticks="auto">
</div>
</li>Es werden ja nicht mal Linien oder Raster angezeigt!?
Muss ich noch eine .js oder irgend etwas anderes aktualisieren oder verlinken?
fhem Update habe ich angeklickt
Welchen Browser verwendest Du? Kannst Du mal schauen, ob Du auf der Browser Konsole (erreicht man in der Regel über das Kontextmenu (rechte Maustaste) und den Punkt "Inspect elemet") irgendwelche Meldungen bekommst.
Zitat von: eki am 20 Januar 2016, 17:58:13
Welchen Browser verwendest Du? Kannst Du mal schauen, ob Du auf der Browser Konsole (erreicht man in der Regel über das Kontextmenu (rechte Maustaste) und den Punkt "Inspect elemet") irgendwelche Meldungen bekommst.
ich verwende Firefox auf dem Laptop.
Fehler siehe Anhang.
Ich kann damit aber nicht wirklich etwas anfangen.
ich habe es hinbekommen.
Irgendwie wurden die widgets trotz update-vorgang nicht erstellt oder aktualisiert.
Ich musste meinen Tabletordner neu erstellen und dann updaten, dannach konnte ich meine .html wieder in den Ordner schieben.
Nun funktioniert alles!!
Vielen Dank für eure Hilfe!
Ich möchte mich mal hier anhängen, weil ich auch ein so schönes Diagramm haben möchte, aber nichts hin bekomme. Damit niemand eine "Glaskugel" benutzen muß, werde ich das mal alles ausführlich darstellen:
Ich habe verschiedene Log-files, die wie folgt aussehen:
2016-01-07_00:42:14 boden-temp-20cm alarm: 1
2016-01-07_00:43:15 boden-temp-20cm temperature: 0.6875
2016-01-07_00:43:15 boden-temp-20cm alarm: 1
2016-01-07_00:44:16 boden-temp-20cm temperature: 0.6875
2016-01-07_00:44:16 boden-temp-20cm alarm: 1
2016-01-07_00:44:36 boden-temp-20cm temperature: 0.75
2016-01-07_00:44:36 boden-temp-20cm alarm: 1
2016-01-07_00:45:37 boden-temp-20cm temperature: 0.6875
2016-01-07_00:45:37 boden-temp-20cm alarm: 1
2016-01-07_00:46:38 boden-temp-20cm temperature: 0.6875
2016-01-07_00:46:38 boden-temp-20cm alarm: 1
2016-01-07_00:47:39 boden-temp-20cm temperature: 0.6875
oder
2016-01-07_15:16:33 luft-temperatur alarm: 1
2016-01-07_15:17:34 luft-temperatur temperature: -5.25
2016-01-07_15:17:34 luft-temperatur alarm: 1
2016-01-07_15:18:35 luft-temperatur temperature: -5.25
2016-01-07_15:18:35 luft-temperatur alarm: 1
2016-01-07_15:19:36 luft-temperatur temperature: -5.25
2016-01-07_15:19:36 luft-temperatur alarm: 1
2016-01-07_15:20:37 luft-temperatur temperature: -5.3125
2016-01-07_15:20:37 luft-temperatur alarm: 1
2016-01-07_15:21:38 luft-temperatur temperature: -5.3125
2016-01-07_15:21:38 luft-temperatur alarm: 1
2016-01-07_15:22:39 luft-temperatur temperature: -5.25
2016-01-07_15:22:39 luft-temperatur alarm: 1
2016-01-07_15:23:40 luft-temperatur temperature: -5.25
2016-01-07_15:23:40 luft-temperatur alarm: 1
Aus vier verschiedenen Log-Dateien will ich ein Chart bauen:
<li data-row="1" data-col="2" data-sizex="20" data-sizey="4">
<header class="semitransparent">Boden/Luft-Temperaturen</header>
<div class="normal">
data-type="highchart"
data-device='[luft.temperatur, boden.temp.20cm, boden.temp.40cm, boden.temp.60cm]'
data-logdevice='["luft-temperatur.log","boden-temp-20cm.log","boden-temp-40cm.log","boden-temp-60cm.log"]'
data-columnspec='["4:luft-temperatur_temperature","4:boden-temp-20cm_temperature","4:boden-temp-40cm_temperature","4:boden-temp-60cm_temperature"]'
data-style='["ftui l0fill","ftui l1fill","ftui l2","ftui l3dot"]'
data-ptype='["lines","lines","lines","lines"]'
data-uaxis='["primary","primary","primary","primary"]'
data-legend='["Luft","20cm","40cm","60cm"]'
data-yunit="°C"
data-ytext="Temperature"
data-minvalue="auto"
data-maxvalue="auto"
data-height="250"
data-yticks="auto"
data-nofulldays="true"
data-daysago_start="2016-01-07T00:00:00"
data-daysago_end="2016-01-09T00:00:00"
data-cursorgroup="1"
data-scrollgroup="1"
data-xticks="auto">
</div>
Die Datei index.html sieht wie folgt aus:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="widget_base_width" content="65">
<meta name="widget_base_height" content="75">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="longpoll" content="1"> <!-- 1=longpoll;0=shortpoll every 30sec -->
<meta name="debug" content="1"> <!-- 1=output to console;0=not output -->
<!--
<link rel="stylesheet" href="/fhem/tablet/lib/jquery.gridster.min.css" />
<link rel="stylesheet" href="/fhem/tablet/css/fhem-tablet-ui.css" />
<link rel="stylesheet" href="/fhem/tablet/lib/font-awesome.min.css" />
<link rel="stylesheet" href="/fhem/tablet/lib/jquery.toast.min.css" />
<link rel="stylesheet" href="/fhem/tablet/lib/jquery-ui.min.css" />
<link rel="stylesheet" href="/fhem/tablet/lib/openautomation.css" />
<link rel="stylesheet" href="/fhem/tablet/lib/fhemSVG.css" />
<link rel="stylesheet" href="/fhem/tablet/css/fhem-tablet-ui-user.css" />
<script src="/fhem/pgm2/jquery.min.js" defer></script>
<script src="/fhem/tablet/lib/jquery.toast.min.js" defer></script>
<script src="/fhem/tablet/lib/jquery.gridster.min.js" defer></script>
<script src="/fhem/tablet/js/fhem-tablet-ui.min.js" defer></script>
<script defer>var wvcDevices = {'12345': 'Tablet'}; var wvcUserCssFile="webviewcontrol.css"</script>
<script src="/fhem/pgm2/cordova-2.3.0.js" defer></script>
<script src="/fhem/pgm2/webviewcontrol.js" defer></script>
-->
<!-- End for WebViewControl -->
<link rel="stylesheet" href="/fhem/tablet/lib/jquery.gridster.min.css" />
<link rel="stylesheet" href="/fhem/tablet/css/fhem-tablet-ui.css" />
<link rel="stylesheet" href="/fhem/tablet/lib/font-awesome.min.css" />
<link rel="stylesheet" href="/fhem/tablet/lib/jquery.toast.min.css" />
<!-- Charts Theme CSS -->
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
<link rel="stylesheet" href="css/styles.css"/>
<!-- Javascript -->
<script type="text/javascript" src="/fhem/pgm2/jquery.min.js"></script>
<script type="text/javascript" src="/fhem/tablet/lib/jquery.knob.mod.min.js"></script>
<script type="text/javascript" src="/fhem/tablet/lib/jquery.toast.min.js"></script>
<script type="text/javascript" src="/fhem/tablet/lib/jquery.circlemenu.js"></script>
<script type="text/javascript" src="/fhem/tablet/lib/powerange.min.js"></script>
<script type="text/javascript" src="/fhem/tablet/lib/jquery.gridster.min.js"></script>
<script type="text/javascript" src="/fhem/tablet/lib/fa-multi-button.min.js"></script>
<script type="text/javascript" src="/fhem/tablet/js/fhem-tablet-ui.js"></script>
<title>FHEM-Tablet-UI</title>
</head>
Statt eines Diagramms wird der Text, der das Diagramm erzeugen soll, ausgegben. Vielleicht sieht jemand einen trivialen Fehler, was mir sehr helfen würde. Ich habe alles so nachempfunden wie ich es hier gefunden habe, aber ohne Erfolg.
Moin.
Finde den unterschied ;)
Deins:
<div class="normal">
data-type="highchart"
Neu:
<div class="normal"
data-type="highchart"
Deine ganzen data-... stehen nicht in der div-definition sondern in der div selbst. das ist falsch :)
Da hat sich ein kleiner Fehlertroll eingeschlichen :)
Grüße^^
Vielen Dank für die Antwort, das erklärt auch warum der Text ausgegeben wurde. Nun habe ich das ">" entfernt, aber ein Diagramm erhalte ich noch immer nicht. Jetzt ist da ein leeres Feld.
Zitat von: manne44 am 06 Februar 2016, 16:56:58
Jetzt ist da ein leeres Feld.
data-columnspec='["4:luft-temperatur_temperature::int","4:boden-temp-20cm_temperature::int","4:boden-temp-40cm_temperature::int","4:boden-temp-60cm_temperature::int"]'
Warum das hier so kompliziert ist weiß ich auch nicht... Und warum man das angeben muss weiß ich auch nicht... Und was zwischen die "::" kann/wann/muss/soll weiß ich auch nicht... Steht ja nirgendwo!?! Habe ich zumindest nirgendwo gefunden.... ecki :P
manne44: versuchs einfach weiter (mit der columnspec die ich etwas geändert habe) :)
Immer noch leeres Feld. :'(
Zitat von: manne44 am 06 Februar 2016, 17:43:42
Immer noch leeres Feld. :'(
Nimm zum testen mal chart statt highchart. Mit highchart hatte ich nämlich auch arge Problem.
Und bei chart kann dir ecki weiter helfen :D
Ich bin in diesem Thema derart unbedarft, daß mir der Unterschied von chart und highchart nicht klar ist. Ich habe einfach mal überall abgeschrieben.
Die Änderung von highchart zu chart hat nichts gebracht. Ich vermute mal, daß vielleicht in der index.html irgendein jss- oder pm-File fehlt. Aber da fehlen mir die Kenntnisse. Ich bin schon froh, daß ich meine Heizungsthermostate, Temperatursensoren, Reedrelais und Schalter richtig ansprechen und darstellen kann. Aber ein schönes Diagramm ohne Riesenaufwand wäre schon ganz schön. Ansonsten muß ich mir das selber in C programmieren.
Auf jeden Fall hast Du noch einen Fehler in der Columnspec. Die sollte mit Deinen Logwerten in etwa so aussehen:
4:luft-temperatur.temperature.:0:
Die Syntax, die übrigens nicht ich erfunden habe, sondern die notwendig ist, um die Logdaten per get von fhem abzuholen, ist genau die gleiche wie in den fhem Plots
Der erste Wert gibt an, wo in den Logzeilen der darzustellende Wert ist also hier in der vierten Spalte (Spalten sind durch Leerzeichen getrennt. Der 2. Wer ist eine "regular Expression" die angibt, welche Zeilen aus den Logzeilen ausgefiltert werden sollen. Hier stehen die Punkte für beliebige Zeichen. Der nächste Parameter gibt einen Default Wert an, falls nichts gefunden wird. Dahinter können noch bestimmte Modifier stehen, die die ausgelesenen Werte noch z.B. In Integer verwandeln.
Vielen Dank für die umfassende Antwort. Nun weiß ich endlich was da in "data-columnspec" einzutragen ist. Habe es entsprechend geändert, aber immer noch leeres Feld.
Was mir noch aufgefallen ist, die data-device Eintraege sind ohne ". Schließe die Eintraege mal in " ein.
Habe ich in " eingeschlossen, aber es wird immer noch keine Ausgabe gemacht.
Ich habe nun mal auf eine Logdatei und einen Wert verkürzt --> kein Erfolg.
Wenn ich nun in data-minvalue und data-maxvalue statt "auto" feste Werte angebe, dann wird zumindest ein Raster gezeichnet und Cursor und Legende werden angezeigt, aber keine Kurve, egal was ich da hinein schreibe. Das scheint darauf hinzudeuten, daß die Werte nicht akzeptiert werden und es deshalb auch kein Raster geben kann, ohne Werte kein Maß für das Raster.
Auch gibt es keine Fehlermeldungen, keine Log-Einträge usw. Wie soll man denn da einen Fehler finden?
Insgesamt scheint mir diese Funktion wenig robust zu sein und kleinste Fehler führen zum NULL-Ergebnis. Schade.
Hallo zusammen,
ist es mögllich beim CHART-Widget mit Dblog im columnspec Regex zu verwenden?
Ich habe folgenden Eintrag im Dblog und würden gerne den Gas Wert plotten.
2016-02-08 12:17:34: Energie_Zaehler, OWCOUNT, energy_act: Gas: 3.980 m^3 Gasleistung: 0.000 m^3/h Strom: 2.986 kWh Stromleistung: 0.228 kW, energy_act, Gas: 3.980 m^3 Gasleistung: 0.000 m^3/h Strom: 2.986 kWh Stromleistung: 0.228 kW,
Danke für eure Hilfe.
Gruß,
Stefan
Zitat von: Haecksler am 08 Februar 2016, 12:26:25
Hallo zusammen,
ist es mögllich beim CHART-Widget mit Dblog im columnspec Regex zu verwenden?
Ich habe folgenden Eintrag im Dblog und würden gerne den Gas Wert plotten.
2016-02-08 12:17:34: Energie_Zaehler, OWCOUNT, energy_act: Gas: 3.980 m^3 Gasleistung: 0.000 m^3/h Strom: 2.986 kWh Stromleistung: 0.228 kW, energy_act, Gas: 3.980 m^3 Gasleistung: 0.000 m^3/h Strom: 2.986 kWh Stromleistung: 0.228 kW,
Danke für eure Hilfe.
Gruß,
Stefan
Grundsätzlich geht das Chart auch mit dblog unter http://forum.fhem.de/index.php/topic,37378.msg355490.html#msg355490
ist ein Beispiel, einfach mal lesen, ich nutze dblog nicht und kann zu den Details leider nicht viel helfen.
Zitat von: manne44 am 08 Februar 2016, 11:07:24
Ich habe nun mal auf eine Logdatei und einen Wert verkürzt --> kein Erfolg.
Wenn ich nun in data-minvalue und data-maxvalue statt "auto" feste Werte angebe, dann wird zumindest ein Raster gezeichnet und Cursor und Legende werden angezeigt, aber keine Kurve, egal was ich da hinein schreibe. Das scheint darauf hinzudeuten, daß die Werte nicht akzeptiert werden und es deshalb auch kein Raster geben kann, ohne Werte kein Maß für das Raster.
Auch gibt es keine Fehlermeldungen, keine Log-Einträge usw. Wie soll man denn da einen Fehler finden?
Insgesamt scheint mir diese Funktion wenig robust zu sein und kleinste Fehler führen zum NULL-Ergebnis. Schade.
Wenn Du in Deinem Browser die Konsole anschaust, solltest Du sehr wohl Nachrichten sehen. Dort könntest Du auch schauen, ob die Kommunikation mit dem Fhem Server klappt und der überhaupt Daten liefert. Bin mir ziemlich sicher dass da der Hund begraben ist.
Zu Deinem letzten Satz wollte ich eigentlich gar nichts sagen, kann es jetzt aber doch nicht lassen. Das Ganze ist nicht so einfach wie es aussieht und hat jede Menge Abhaengigkeiten und Dinge, die aus der Ferne nur schwer einschätzbar sind, und all die Jungs, die hier daran arbeiten, dass Konsumenten wie Du sich schöne Dinge zusammen basteln können, leisten hier echt super Arbeit. Und wenn es mal nicht sofort klappt wird einem super geholfen. Das solltest Du vielleicht bedenken wenn Du nach ein paar Versuchen zu motzen anfängst. Ich werde Dir übrigens trotzdem versuchen weiter zu helfen, wenn Du das möchtest.
Das tut mir leid, wenn das als "motzen" verstanden wird. Das war niemals meine Absicht. Ich weiß, daß das alles sehr viel Arbeit macht und nicht komerziell ist, also die Leute in ihrer Freizeit daran arbeiten. Auch über die Hilfe, die hier geboten wird, bin ich sehr dankbar. Mit nicht robust habe ich gemeint, daß´Typen wie ich, die weder mit html noch Perl vertraut sind, hier Schwierigkeiten haben dürften. Um bei der 99_myUtil.pm gibt es Fehlermeldungen, die auch ein Laie interpretieren kann. Hier nicht. Deshalb mein Frust.
Ich werde mal versuchen die Konsolendaten zu interprtieren, vielleicht komme ich da weiter.
Na dann ist ja gut und Schwamm drüber.
Du kannst mal die Version unter
http://forum.fhem.de/index.php/topic,48450.msg404468.html#msg404468
Verwenden, die spuckt noch ein paar zusätzliche Infos aus, und mir diese Infos dann schicken, vielleicht finde ich ja was.
Ich verstehe das mal so, daß ich die herunter geladene Datei "widget_chart.js" in das Verzeichnis /opt/fhem/www/tablet/js/ kopieren soll, wobei die vorhandene umbenannt wird. Wenn ich das mache, dann wird bei meinem Testchart mit einer Datenreihe nichts angezeigt. Bei der originalen js-Datei aber ein Diagramm ohne Kurve. Ich habe testweise folgende Daten:
Logdatei:
2016-02-07_20:43:47 ActLuftTemp temperature: 6.5625 alarm: 1
2016-02-07_20:44:08 ActLuftTemp temperature: 6.625 alarm: 1
2016-02-07_20:44:32 ActLuftTemp temperature: 6.5625 alarm: 1
2016-02-07_20:48:33 ActLuftTemp temperature: 6.5 alarm: 1
2016-02-07_20:48:52 ActLuftTemp temperature: 6.5625 alarm: 1
2016-02-07_20:49:12 ActLuftTemp temperature: 6.5 alarm: 1
2016-02-07_20:54:03 ActLuftTemp temperature: 6.4375 alarm: 1
2016-02-07_20:54:22 ActLuftTemp temperature: 6.5 alarm: 1
2016-02-07_20:55:08 ActLuftTemp temperature: 6.4375 alarm: 1
2016-02-07_20:58:18 ActLuftTemp temperature: 6.375 alarm: 1
2016-02-07_20:58:43 ActLuftTemp temperature: 6.4375 alarm: 1
2016-02-07_20:59:04 ActLuftTemp temperature: 6.375 alarm: 1
2016-02-07_21:04:08 ActLuftTemp temperature: 6.3125 alarm: 1
2016-02-07_21:04:33 ActLuftTemp temperature: 6.375 alarm: 1
2016-02-07_21:05:17 ActLuftTemp temperature: 6.3125 alarm: 1
2016-02-07_21:07:48 ActLuftTemp temperature: 6.25 alarm: 1
2016-02-07_21:08:54 ActLuftTemp temperature: 6.3125 alarm: 1
2016-02-07_21:09:17 ActLuftTemp temperature: 6.25 alarm: 1
2016-02-07_21:10:23 ActLuftTemp temperature: 6.3125 alarm: 1
2016-02-07_21:11:03 ActLuftTemp temperature: 6.25 alarm: 1
2016-02-07_21:20:48 ActLuftTemp temperature: 6.1875 alarm: 1
2016-02-07_21:21:08 ActLuftTemp temperature: 6.25 alarm: 1
2016-02-07_21:21:28 ActLuftTemp temperature: 6.1875 alarm: 1
2016-02-07_21:26:58 ActLuftTemp temperature: 6.125 alarm: 1
2016-02-07_21:31:59 ActLuftTemp temperature: 6.0625 alarm: 1
2016-02-07_21:32:23 ActLuftTemp temperature: 6.125 alarm: 1
2016-02-07_21:33:08 ActLuftTemp temperature: 6.0625 alarm: 1
2016-02-07_21:33:28 ActLuftTemp temperature: 6.125 alarm: 1
2016-02-07_21:33:48 ActLuftTemp temperature: 6.0625 alarm: 1
HTML-Code:
<li data-row="1" data-col="2" data-sizex="20" data-sizey="4">
<header class="semitransparent">SingleTest</header>
<div class="normal"
data-type="chart"
data-height="200"
data-device='["luft.temperatur"]'
data-logdevice='["luft-temperatur.log"]'
data-columnspec='["4:ActLuftTemp.temperature.:0:int"]'
data-style='["ftui l0fill"]'
data-ptype='["lines"]'
data-uaxis='["primary"]'
data-legend='["Luft"]'
data-yunit="C"
data-ytext="Temperature"
data-minvalue="0"
data-maxvalue="10"
data-yticks="auto"
data-daysago_start="0"
data-daysago_end="-1"
data-crosshair="true"
data-cursorgroup="1"
data-scrollgroup="1"
data-showlegend="true"
data-nofulldays="true"
data-xticks="auto">
</div>
</li>
Genau so war es gedacht, aber wie in der Nachricht die ich verlinkt hatte beschrieben, musst Du den Parameter Debug in der Index.html auf 1 setzen und noch auf die Beschriftung der Achse klicken (falls keine Achsenbeschriftung gemalt wird, kannst Du das .js file in einem Editor oeffnen und den Parameter Logtype auf "console" ändern, dann wird die Ausgabe auf der Browser Konsole ausgegeben.
Alternativ kannst Du auch mal ein Stueck Deiner fhem.cfg Datei Posten wo das log File und Device definiert wird.
Ich habe alles so gemacht - Debug stand auf 1, Logtype auf "console" geändert, aber ich habe nichts interessantes gesehen. Vielleicht fehlt mir auch der Blick dafür. Aber einen Fehler habe ich bei mir noch festgestellt: Es muß bei data-logdevice selbstverständlich das Log-Device aus der fhem.cfg und nicht der Name der Logdatei angegeben werden. Fehler beseitigt und siehe da, wie von Geisterhand wurde ein Diagramm gezeichnet. Ich hatte mehrere Log-Devices, die ich in einem Diagramm ausgeben wollte. Das hat nicht geklappt, vielleicht habe ich da wieder was falsch geschrieben. Also habe ich mein Log-Device so geändert, daß alle Werte der 6 Sensoren in einem Logfile eingetragen werden. Das Ergebnis war ein vollständig richtiges und komplettes Diagramm mit allen 6 Kurven. Ich bin damit zufrieden und werde mich in Zukunft auf ein Log-Device pro Diagramm beschränken. Den vorhandenen Datenbestand werde ich in eine Datei zusammenführen, kein Problem, entweder mit Excel oder ich mache mir ein kleines C-Programm, C und Java kann ich sehr gut, im Gegensatz zu HTML und Perl.
Aber eine Frage habe ich noch: Es wird beim Start immer der aktuelle Tag angezeigt. Mit den +/- Tasten kann man die Bereiche vergrößern und verkleinern. Ich es denn möglich, daß beim Start schon der ganze Monat sofort angezeigt wird? Und wo finde ich denn die Bezeichnungen für die data-styles?
Vielen Dank schon mal.
Na super, dass es geklappt hat. Mehrere Devices gehen auch, aber wenn es so für Dich OK ist ist auch gut. Die Styles findest Du im ftui_chart.css file im entsprechenden css Directory parallel zum .js Directory. Immer den aktuellen Monat ganz anzeigen geht direkt noch nicht. Du kannst über die Parameter data-daysago-start und data-daysago-end einen Bereich festlegen, der mehr als einen Tag lang ist. Vielleicht ist da ja das was Du wolltest.
Ich habe in der ftu_charts.css die Farbe blau (#0000FF) für die Luftfeuchtigkeit hinzugefügt und die wird in meinem Chart auch angezeigt, leider nicht in der Legende.
/* Definition for styles to be used for graphs (as alternative to the standard FHEM plot styles */
.ftui.l0 { stroke:#DDA400; stroke-width:2px; fill:none; }
.ftui.l1 { stroke:#BBBBBB; stroke-width:2px; fill:none; }
.ftui.l2 { stroke:#CC0000; stroke-width:2px; fill:none; }
.ftui.l3 { stroke:#CCCC00; stroke-width:2px; fill:none; }
.ftui.l4 { stroke:#33CC33; stroke-width:2px; fill:none; }
.ftui.l5 { stroke:#0000FF; stroke-width:2px; fill:none; }
/* Normal lines */
.ftui.l0sym { stroke:#DDA400; stroke-width:12px; fill:none; }
.ftui.l1sym { stroke:#BBBBBB; stroke-width:12px; fill:none; }
.ftui.l2sym { stroke:#CC0000; stroke-width:12px; fill:none; }
.ftui.l3sym { stroke:#CCCC00; stroke-width:12px; fill:none; }
.ftui.l4sym { stroke:#33CC33; stroke-width:12px; fill:none; }
.ftui.l5sym { stroke:#0000FF; stroke-width:12px; fill:none; }
/* Dashed lines */
.ftui.l0dash { stroke:#DDA400; stroke-width:2px; fill:none; stroke-dasharray:5px,3px; }
.ftui.l1dash { stroke:#BBBBBB; stroke-width:2px; fill:none; stroke-dasharray:5px,3px; }
.ftui.l2dash { stroke:#CC0000; stroke-width:2px; fill:none; stroke-dasharray:5px,3px; }
.ftui.l3dash { stroke:#CCCC00; stroke-width:2px; fill:none; stroke-dasharray:5px,3px; }
.ftui.l4dash { stroke:#33CC33; stroke-width:2px; fill:none; stroke-dasharray:5px,3px; }
.ftui.l5dash { stroke:#0000FF; stroke-width:2px; fill:none; stroke-dasharray:5px,3px; }
/* Dotted lines */
.ftui.l0dot { stroke:#DDA400; stroke-width:2px; fill:none; stroke-dasharray:2px,2px; }
.ftui.l1dot { stroke:#BBBBBB; stroke-width:2px; fill:none; stroke-dasharray:2px,2px; }
.ftui.l2dot { stroke:#CC0000; stroke-width:2px; fill:none; stroke-dasharray:2px,2px; }
.ftui.l3dot { stroke:#CCCC00; stroke-width:2px; fill:none; stroke-dasharray:2px,2px; }
.ftui.l4dot { stroke:#33CC33; stroke-width:2px; fill:none; stroke-dasharray:2px,2px; }
.ftui.l5dot { stroke:#0000FF; stroke-width:2px; fill:none; stroke-dasharray:2px,2px; }
/* Filled graphs */
.ftui.l0fill { stroke:#DDA400; fill:url(#gr_ftui0); stroke-width:2px; fill-opacity:0.8 }
.ftui.l1fill { stroke:#BBBBBB; fill:url(#gr_ftui1); stroke-width:2px; fill-opacity:0.8 }
.ftui.l2fill { stroke:#CC0000; fill:url(#gr_ftui2); stroke-width:2px; fill-opacity:0.8 }
.ftui.l3fill { stroke:#CCCC00; fill:url(#gr_ftui3); stroke-width:2px; fill-opacity:0.8 }
.ftui.l4fill { stroke:#33CC33; fill:url(#gr_ftui4); stroke-width:2px; fill-opacity:0.8 }
.ftui.l5fill { stroke:#0000FF; fill:url(#gr_ftui5); stroke-width:2px; fill-opacity:0.8 }
/* additional settings for the text (mainly for legend window) */
text.ftui.l0, text.ftui.l0sym, text.ftui.l0dot, text.ftui.l0dash, text.ftui.l0fill { stroke:none; fill:#DDA400; }
text.ftui.l1, text.ftui.l1sym, text.ftui.l1dot, text.ftui.l1dash, text.ftui.l1fill { stroke:none; fill:#BBBBBB; }
text.ftui.l2, text.ftui.l2sym, text.ftui.l2dot, text.ftui.l2dash, text.ftui.l2fill { stroke:none; fill:#CC0000; }
text.ftui.l3, text.ftui.l3sym, text.ftui.l3dot, text.ftui.l3dash, text.ftui.l3fill { stroke:none; fill:#CCCC00; }
text.ftui.l4, text.ftui.l4sym, text.ftui.l4dot, text.ftui.l4dash, text.ftui.l4fill { stroke:none; fill:#33CC33; }
text.ftui.l5, text.ftui.l5sym, text.ftui.l5dot, text.ftui.l5dash, text.ftui.l5fill { stroke:none; fill:#0000FF; }
Kann man der Legende einen festen Platz zuteilen?
Wie kann ich das Hintergrundbild auf einfarbig ändern? In der ftui....css steht eine url für das Hintergrundbild.
.chart-background {
fill:url(#gr_bgftui);
fill-opacity: 1;
Danke
Marek
(http://up.picr.de/24542651pg.jpg)
Für die Legende ist der Text Eintrag ziemlich weit unten im css File relevant, du muesstest also dort entsprechend noch einen Eintrag machen. Das url steht im Fall des Hintergrundes für einen Farbverlauf. Ob Du da auch ein Bild hinterlegen kannst weiß ich nicht genau, probiers doch einfach mal. Die Position der Legende ist im Moment am Anfang fest, werde ich mal als Feature für eine nächste Version vorsehen.
ZitatFür die Legende ist der Text Eintrag ziemlich weit unten im css File relevant, du muesstest also dort entsprechend noch einen Eintrag machen.
Hatte ich gemacht, aber ohne Erfolg.
/* additional settings for the text (mainly for legend window) */
text.ftui.l0, text.ftui.l0sym, text.ftui.l0dot, text.ftui.l0dash, text.ftui.l0fill { stroke:none; fill:#DDA400; }
text.ftui.l1, text.ftui.l1sym, text.ftui.l1dot, text.ftui.l1dash, text.ftui.l1fill { stroke:none; fill:#BBBBBB; }
text.ftui.l2, text.ftui.l2sym, text.ftui.l2dot, text.ftui.l2dash, text.ftui.l2fill { stroke:none; fill:#CC0000; }
text.ftui.l3, text.ftui.l3sym, text.ftui.l3dot, text.ftui.l3dash, text.ftui.l3fill { stroke:none; fill:#CCCC00; }
text.ftui.l4, text.ftui.l4sym, text.ftui.l4dot, text.ftui.l4dash, text.ftui.l4fill { stroke:none; fill:#33CC33; }
text.ftui.l5, text.ftui.l5sym, text.ftui.l5dot, text.ftui.l5dash, text.ftui.l5fill { stroke:none; fill:#0000FF; }
Danke
Marek
Jetzt gehts, einmal alles neu geladen.
Und gleich das nächste Problem, an der 2. y-Achse kommen sich die Skala und die Bezeichnung "Luftfeuchtigkeit" in die Quere.
(http://up.picr.de/24543072sl.jpg)
Danke
Marek
Das Problem habe ich bei mir auch schon manchmal gesehen, habe aber noch keine Loesung, die immer passt.
Hat jem. das Problem, dass das Chart nicht angezeigt wird? Ich muss auf dem Tablet die Seite einmal schließen und neu starten. Dann wird mir das Chart angezeigt. Wechsel ich die Seite und kehre zurück wird es mir wieder nicht angezeigt ! :-/
Hallo,
habe mir gerade meinen ersten Chart zusammengebaut, klappt soweit ganz gut ohne Popup.
Aber mit Popup kommt nichts habe es auch schon irgendwo gelesen, dass es da Probleme gibt finde es allerdings nicht mehr.
Hier meine Definition:
<div data-type="popup" data-draggable="true" data-height="700px" data-width="850px">
<div data-type="label" class="wider green"><br>Temperaturverlauf</div>
<div class="dialog semitransparent">
<header>Temperaturverlauf</header><br>
<div class="fullsize"
data-type="chart"
data-device="logdb"
data-logdevice='["logdb","logdb","logdb"]'
data-logfile='["HISTORY","HISTORY","HISTORY"]'
data-columnspec='["Temp_Kueche:temperature","Temp_Wohn:temperature","Heizung:Heizintervall"]'
data-legend='["Küche","Wohnzimmer","Heizung AN"]'
data-style='["ftui l5fill","ftui l6fill","ftui l7dash"]'
data-ptype='["lines","lines","steps"]'
data-uaxis='["primary","primary","secondary"]'
data-yunit="°C"
data-ytext="Temp"
data-yunit_sec=""
data-ytext_sec="Heizung"
data-title="Temperaturverlauf"
data-minvalue="auto"
data-maxvalue="auto"
data-minvalue_sec="auto"
data-maxvalue_sec="auto"></div>
</div></div>
Am wo wird eigentlich der "data-title" angezeigt den sehe ich nirgends.
Gruß,
Stefan
Du musst eine angepasste Version von widget_popup.js verwenden. Siehe:
http://forum.fhem.de/index.php/topic,48450.msg401006.html#msg401006
Die Columnspec sieht auch noch komisch aus aber wenn es mit der Definition ohne popup geht OK.
ich habe jetzt die Änderungen im popup und das neue chart_widget übernommen
Zitat von: setstate am 12 Februar 2016, 21:27:39
ich habe jetzt die Änderungen im popup und das neue chart_widget übernommen
Super! Vielen Dank.
Hat jem. das Problem, dass das Chart nicht angezeigt wird? Ich muss auf dem Tablet die Seite einmal schließen und neu starten. Dann wird mir das Chart angezeigt. Wechsel ich die Seite und kehre zurück wird es mir wieder nicht angezeigt ! :-/
Ps: Auf dem Mac tritt dieses Problem nicht auf. Lediglich auf dem Android-Tablet
Zitat von: bjoernbo am 13 Februar 2016, 12:42:20
Hat jem. das Problem, dass das Chart nicht angezeigt wird? Ich muss auf dem Tablet die Seite einmal schließen und neu starten. Dann wird mir das Chart angezeigt. Wechsel ich die Seite und kehre zurück wird es mir wieder nicht angezeigt ! :-/
Ps: Auf dem Mac tritt dieses Problem nicht auf. Lediglich auf dem Android-Tablet
Kannst Du noch ein paar Zusatzinfos liefern (verwendeter Browser, Popup oder nicht, Konfigurationsdatei, ...).
klar.
Verwendeter Browser ist Chrome. Kein PopUp!
Ich muss allerding eines Anmerken!
Ich habe das UI seit ungefähr einem 3/4Jahr nicht mehr aktuallisiert. Ich habe lediglich die CART Funktionalität letzte Woche aktuallisiert. Sprich die beiden Dateien in die Verzeichnisse kopiert.
Warum habe ich nicht aktuallsiert?
Ich konnte eine lange Zeit nicht mehr alles mitverfolgen und ich hatte dann irgendwann die Befürchtung, dass wenn ich nun update, dass nichts mehr funktioniert, bzw. ich diverse Einträge nachlesen muss, damit die konfiuration wieder passt.
Never Change a Running System.
kannst Du noch Deine Html Datei mit der chart Definition posten.
Das mit dem teilweisen Update kann natuerlich immer eine Fehlerquelle sein, das ueberblicke ich jetzt auch nicht komplett, eigentlich sollte es aber gehen. Vielleicht schaust Du mal was sich seit deinem letzten Update des ftui wirklich veraendert hat, das ist ja vielleicht gar nicht so viel. Popup wir auf keinen Fall funktionieren.
Hey,
anbei mein Code:
Zitat<li data-row="1" data-col="2" data-sizex="8" data-sizey="4">
<header>Wohnzimmer</header>
<div class="normal">
</div>
<div data-type="chart"
data-logdevice='["FileLog_Wohnzimmer.Wandthermostat","FileLog_Wohnzimmer.Wandthermostat","FileLog_Wohnzimmer.Wandthermostat","FileLog_netatmo_innen","FileLog_netatmo_innen"]'
data-columnspec='["4:measured-temp:.*1","4:humidity:.*1","4:desired-temp:.*1","4:co2:.*1","4:noise:.*1"]'
data-style='["ftui l0","ftui l1","ftui l2","ftui l4","ftui l3"]'
data-ptype='["lines","histeps","cubic","lines","lines"]'
data-uaxis='["primary","primary","primary","secondary","primary"]'
data-legend='["Temperatur","Luftfeuchte","Soll-Temp.","Luftqualität","Lautstärke"]'
data-yunit=" "
data-ytext="Temperature (°C) / Dezibel (db) / Luftfeuchte (%)"
data-minvalue="5"
data-maxvalue="auto"
data-yunit_sec=" "
data-ytext_sec="CO²"
data-height="350"
data-yticks="auto"
data-minvalue_sec="auto"
data-maxvalue_sec="auto"
data-nofulldays="true"
data-cursorgroup="1"
data-scrollgroup="1"
data-xticks="auto"></div>
</li>
ich glaube dass die columnspec nicht stimmt. Wenn in der regexp ":" stehen, gibt es glaube ich Probleme. Versuche mal Folgendes:
'["4:measured-temp","4:humidity","4:desired-temp","4:co2","4:noise"]'
Zitatdata-columnspec='["4:measured-temp","4:humidity","4:desired-temp","4:co2","4:noise"]'
habe ich geändert. Der Aufruf funktioniert nur beim ersten mal. Wechsel ich die Seite und rufe dann die Seite mit der Statistik nochmal auf wird leider nichts angezeigt.
Wird innerhalb des Widget noch auf andere Bereich verzweigt? Hatte nur das widget upgedatet.
Auf meinem Tablet (Android 4.4.2) in WebViewControl fehlen alle Bezeichnungen der Skalen an der X und den Y-Achsen.
Im Firefox auf dem gleichen Tablet funktioniert es.
Danke
Marek
(http://up.picr.de/24623508um.jpg)
zeig doch mal deinen Codeausschnitt.
Zitat von: Marekh am 17 Februar 2016, 23:18:22
Auf meinem Tablet (Android 4.4.2) in WebViewControl fehlen alle Bezeichnungen der Skalen an der X und den Y-Achsen.
Im Firefox auf dem gleichen Tablet funktioniert es.
Danke
Marek
(http://up.picr.de/24623508um.jpg)
Ein ähnliches Verhalten hatte ich bei mir auf einigen Browsern auch festgestellt (wenn man ein refresh aktiviert in dem man z.B. nach links oder rechts scrollt, sollte nach dem Neuaufbau in diesem Fall das Chart richtig sein), hatte aber gedacht das mit der letzten Version (siehe http://forum.fhem.de/index.php/topic,48450.0.html) bereinigt zu haben. Hast Du die zuvor genannte Version bei Dir am Laufen?
Zitat von: bjoernbo am 17 Februar 2016, 17:27:09
habe ich geändert. Der Aufruf funktioniert nur beim ersten mal. Wechsel ich die Seite und rufe dann die Seite mit der Statistik nochmal auf wird leider nichts angezeigt.
Wird innerhalb des Widget noch auf andere Bereich verzweigt? Hatte nur das widget upgedatet.
Was meinst Du mit "verzweigen"? Das widget_chart.js Script wird dynamisch vom FTUI Script geladen und auch aktualisiert (über die init, init_attr und update Funktionen) ist also in das "Gesamtkunstwerk" FTUI eingebunden. Wenn der Aufbau des Charts erst mal von FTUI per update angestoßen ist, laufen nur noch Dinge, die innerhalb des widget_chart.js scriptes kodiert sind. Das Ganze ist leider nicht so einfach wie es auf den ersten Blick aussieht, da spielen auch Browser Besonderheiten und Timing mit. Deshalb hatte ich gesagt, dass ich nicht komplett überblicke was durch Deine nur teilweisen Updates alles für Nebeneffekte auftreten können.
Zitat von: eki am 18 Februar 2016, 08:22:39
Ein ähnliches Verhalten hatte ich bei mir auf einigen Browsern auch festgestellt (wenn man ein refresh aktiviert in dem man z.B. nach links oder rechts scrollt, sollte nach dem Neuaufbau in diesem Fall das Chart richtig sein), hatte aber gedacht das mit der letzten Version (siehe http://forum.fhem.de/index.php/topic,48450.0.html) bereinigt zu haben. Hast Du die zuvor genannte Version bei Dir am Laufen?
Das wars, ich hatte nicht die neue Version, jetzt ist alles hübsch. :-)
Danke
Marek
Ich habe letzte Woche ein Chart mit 2 Kurven erstellt.
Die Kurven zeigen den Verlauf der letzten 14 Tage.
Es funktionierte super bis zum Monatswechsel.
Seit dem werden nur Werte ab dem 01.03 angezeigt.
Die Chartwerte kommen aus einem monatsweisen Filearchiv. Es wird also jeden Monat eine neue Datei angelegt.
In FHEM macht diese Ansicht keine Probleme. Dort wird der Chart monatsübergreifend angezeigt.
Hat jemand einen Tipp oder liegt das an dem Chart-Device?
Kann jemand das Verhalten bestätigen?
Die Werte kommen doch aus einem LogFile. Findet die Protokollierung monatlich statt? Sprich wird für jeden Monat ein neues Logfile erstellt?
Ich meine das geht nur wenn du die Wert in ein "Jahreslog" schreibst!
Zitat von: bjoernbo am 02 März 2016, 14:33:22
Die Werte kommen doch aus einem LogFile. Findet die Protokollierung monatlich statt? Sprich wird für jeden Monat ein neues Logfile erstellt?
Ich meine das geht nur wenn du die Wert in ein "Jahreslog" schreibst!
Ja, die Werte kommen aus einem logfile. Dieses wird jeden Monat neu erstellt. Bei einem Jahreslog wäre am Jahreswechsel das identische Problem.
Zitat von: funkner am 02 März 2016, 10:08:40
Ich habe letzte Woche ein Chart mit 2 Kurven erstellt.
Die Kurven zeigen den Verlauf der letzten 14 Tage.
Es funktionierte super bis zum Monatswechsel.
Seit dem werden nur Werte ab dem 01.03 angezeigt.
Die Chartwerte kommen aus einem monatsweisen Filearchiv. Es wird also jeden Monat eine neue Datei angelegt.
In FHEM macht diese Ansicht keine Probleme. Dort wird der Chart monatsübergreifend angezeigt.
Hat jemand einen Tipp oder liegt das an dem Chart-Device?
Kann jemand das Verhalten bestätigen?
Kannst Du mal ein paar Infos dazu schicken
- Definition des Charts
- Ausschnitt aus dem Logfile
- Definition des Logfiles aus der fhem.cfg
Dann werde ich mir das mal anschauen.
Vielen Dank, dass du dir das mal anschaust. ::)
Chartdefinition in Tablet UI:
<!--Chart-->
<li data-row="4" data-col="2" data-sizex="5" data-sizey="2">
<header>Temperaturen</header>
<div class="normal"
data-type="chart"
data-logdevice='["FileLog_AussenTemp","FileLog_InnenTemp"]'
data-columnspec='["3:Event_AussenTemp","3:Event_InnenTemp"]'
data-style='["ftui l0","ftui l1"]'
data-ptype='["lines","lines"]'
data-uaxis='["primary","secondary"]'
data-legend='["Draußen", "Innen"]'
data-yunit="°C"
data-ytext="Temperatur"
data-yticks="auto"
data-minvalue="-15"
data-maxvalue="35"
data-yunit_sec="°C"
data-ytext_sec="Temperatur"
data-minvalue_sec="20"
data-maxvalue_sec="30"
data-daysago_start="7"
data-daysago_end="-1"
data-crosshair="true"
data-cursorgroup="1"
data-scrollgroup="1"
data-showlegend="true"
data-width="100%"
data-height="100%"
data-xticks="1440">
</div>
</li>
<!--Chart-->
Ausschnitt aus einem der Logfiles (Sind beide identisch angelegt).
Die Eintrage reichen bis zum 01.03.2016 zurück. Der 29.02.2016 liegt in der "Februar-Datei"
2016-03-05_19:32:12 Event_AussenTemp 5.3
2016-03-05_19:37:12 Event_AussenTemp 5.2
2016-03-05_19:42:12 Event_AussenTemp 5.1
2016-03-05_19:47:12 Event_AussenTemp 5
2016-03-05_20:32:13 Event_AussenTemp 4.9
2016-03-05_20:57:13 Event_AussenTemp 4.8
2016-03-05_21:02:13 Event_AussenTemp 4.9
2016-03-05_21:07:13 Event_AussenTemp 4.8
2016-03-05_21:17:14 Event_AussenTemp 4.7
2016-03-05_21:22:14 Event_AussenTemp 4.8
2016-03-05_21:27:14 Event_AussenTemp 4.7
2016-03-05_21:32:14 Event_AussenTemp 4.6
2016-03-05_21:37:14 Event_AussenTemp 4.7
2016-03-05_21:42:14 Event_AussenTemp 4.6
2016-03-05_22:07:14 Event_AussenTemp 4.5
2016-03-05_22:17:14 Event_AussenTemp 4.4
2016-03-05_22:27:14 Event_AussenTemp 4.3
2016-03-05_22:32:15 Event_AussenTemp 4.2
2016-03-05_22:37:15 Event_AussenTemp 4.1
2016-03-05_22:47:15 Event_AussenTemp 4
2016-03-05_23:12:15 Event_AussenTemp 4.1
2016-03-05_23:27:15 Event_AussenTemp 4
Filelog Definition aus der fhem.cfg:
# AussenTemp LOGGING
define Event_AussenTemp dummy
attr Event_AussenTemp event-on-change-reading state
define FileLog_AussenTemp FileLog ./log/AussenTemp-%Y-%m.log Event_AussenTemp
# InnenTemp LOGGING
define Event_InnenTemp dummy
attr Event_InnenTemp event-on-change-reading state
define FileLog_InnenTemp FileLog ./log/InnenTemp-%Y-%m.log Event_InnenTemp
https://forum.fhem.de/index.php?topic=18203.0 (https://forum.fhem.de/index.php?topic=18203.0)
Ich glaube, ich habe meine Antwort, während des erstellens dieses Nachricht selbst gefunden... :-\
Du schreibst ja oben, dass es in Fhem geht und nur im chart_widget Probleme macht, da swurde gegen die Infos im Link sprechen.
Grundsätzlich holt sich das chart_widget die Daten fuer die Plots von Fhem per Get mit den in der Konfiguration gesetzten Parametern fuer Columnspec etc. Insofern fuerchte ich dass es erst mal nicht funktioniert. Ich mach mir mal Gedanken ob ich das im chart_widget irgendwie abfangen kann, das wird aber sicher ein bisschen dauern.
Sorry, das habe ich in meiner letzten Nachricht nicht berichtigt. Bei genauerem hinsehen stellte ich fest, dass es in fhem auch nicht funktioniert. In fhem wird quasi der letzte Monat bis Monatsende angezeigt (zb bis 29.02). Wobei tablet ui den plot vom 01.03 ab anfängt anzuzeigen. Das hat mich wohl in die irre leiten lassen. Es ist momentan anscheinend so, dass die plot Ansicht aus maximal einer Datei geladen werden kann.
Muss wohl doch mal auf dblog umsteigen. Dann ist das normalerweise kein Problem mehr.
Bei mir werden unter FHEM die Plots nahtlos aus Monats-Logfiles erzeugt (siehe Beispiel).
Gruß,
Mario
Bin ein wenig überrascht. Kannst du mir evtl deine plot konfig posten? Dein filelog define könnte auch helfen, den Fehler zu finden. Hast du eine spezielle Einstellung vorgenommen?
Kein Problem. Mit wenig Aufwand, deshalb komplett.
Gruß,
Mario
Pool_Temperature_Plot.gplot
set terminal png transparent size <SIZE> crop
set output '<OUT>.png'
set xdata time
set timefmt "%Y-%m-%d_%H:%M:%S"
set xlabel " "
set title '<L1>'
set ytics
set y2tics
set grid y2tics
set ylabel ""
set y2label "Temperatur in °C"
#Pool_Temperature_FileLog 4:Pool_Temperature.temperature\x3a:0:
#Aussen_Temperatur_Nord_FileLog 4:Aussen_Temperatur_Nord.temperature\x3a:0:
plot "<IN>" using 1:2 axes x1y2 title 'Temperatur in °C' ls l0 lw 1 with lines,\
"<IN>" using 1:2 axes x1y2 title 'Aussentemperatur in °C' ls l1 lw 1 with lines
POOL.cfg
#Pooltemperatur
define Pool_Temperature OWDevice 28.3F6C48050000 600
attr Pool_Temperature IODev OWFS_Instance
attr Pool_Temperature alias Temperatur Pool
attr Pool_Temperature comment DS18B20_3F6C48050000
attr Pool_Temperature group Pool
attr Pool_Temperature icon icoTempWasser
attr Pool_Temperature model DS18B20
attr Pool_Temperature room Pool
attr Pool_Temperature stateFormat {sprintf("%.1f C", ReadingsVal("Pool_Temperature","temperature",0))}
#attr Pool_Temperature stateFormat {sprintf("Temperatur: %.2f C", ReadingsVal("Pool_Temperature","temperature",0))}
# log file
define Pool_Temperature_FileLog FileLog ./log/Pool_Temperature-%Y.log Pool_Temperature
attr Pool_Temperature_FileLog logtype Pool_Temperature_Plot:Plot,text:Text
attr Pool_Temperature_FileLog room x_Pool
# plot
define Pool_Temperature_Plot SVG Pool_Temperature_FileLog:Pool_Temperature_Plot:CURRENT
attr Pool_Temperature_Plot label 'Temperatur Pool'
attr Pool_Temperature_Plot room Pool
Zitat von: Mario67 am 07 März 2016, 00:38:46
Kein Problem. Mit wenig Aufwand, deshalb komplett.
Gruß,
Mario
POOL.cfg
# log file
define Pool_Temperature_FileLog FileLog ./log/Pool_Temperature-%Y.log Pool_Temperature
attr Pool_Temperature_FileLog logtype Pool_Temperature_Plot:Plot,text:Text
attr Pool_Temperature_FileLog room x_Pool
# plot
define Pool_Temperature_Plot SVG Pool_Temperature_FileLog:Pool_Temperature_Plot:CURRENT
attr Pool_Temperature_Plot label 'Temperatur Pool'
attr Pool_Temperature_Plot room Pool
Die Zeile
define Pool_Temperature_FileLog FileLog ./log/Pool_Temperature-%Y.log Pool_Temperatureist so deklariert, dass du ein Jahreslog-File erstellst. Deshalb funktioniert es bei dir auch das ganze Jahr, bis auf den Jahreswechsel. Schau doch mal in der Wochenansicht die Woche vom 28.12.2015 bis 03.01.2016 an. Dort solltest du das gleiche Problem bekommen.
Das war definitiv zu spät...
Sorry, da habe ich wohl blind das falsche Beispiel genommen. Ich suche heute Abend nochmal die Definition für das erste Beispiel heraus.
Gruß,
Mario
Peinlich: Ich bin da wohl etwas durcheinander gekommen und habe aktuelle Jahres-Logfile und Plots (basierend auf speedtest) mit einer alten Lösung (basierend auf Python-Scripts) mit monatlichen Log-Files vermischt. :-[
Ja, bei mir ist es natürlich auch so, dass Plots jeweils nur bis zum Monatsende gezeichnet werden wenn sie auf monatlichen Log-Files basieren.
Gruß,
Mario
Hallo Community
Ich versuche mich an einer neuen Oberfläche und möchte nun auch meine Plots darstellen. In Fhem laufen diese mit LogProxy aus einem FileLog. Diese sollen nun auch auf TabletUI mithilfe von chart implementiert werden. Für einfache Integer-Werte bekomme ich das auch hin.
Problem:
Ich nutze regExp im gPlot-File um aus "on" und "off" ein integer zu erhalten. Wie dies mit dem chart-widget möglich ist habe ich jedoch noch nicht herauslesen können.
Ich hatte es ebenfalls mit paste© aus dem gPlot-File versucht und erhalte leider keine Kurve mit LogProxy:
<div
data-type="chart"
data-logdevice="logproxy" <--das Device heißt bei mir auch so
data-columnspec='["FileLog:FileLog_heizung:4:heizung.Aussentemperatur\x3a::"]'
data-style='["ftui l2"]'
data-ptype='["lines"]'
data-uaxis='["primary"]'
data-legend='["außen"]'
data-yunit="°C"
data-ytext="Temperatur"
data-minvalue="-25"
data-maxvalue="50"
data-yunit_sec=""
data-ytext_sec="Pumpe"
data-yticks="auto"
data-minvalue_sec="0"
data-maxvalue_sec="1000"
data-daysago_start="0"
data-daysago_end="-1"
data-crosshair="true"
data-cursorgroup="1"
data-scrollgroup="1"
data-showlegend="true"
data-xticks="auto"
data-height="auto">
</div>
kannst Du mal einen Ausschnitt aus Dem Logfile und dem gplot File Posten.
Hallo,
ich teste auch gerade mit den Plots in FTUI herum. Wenn ich die Schriftgröße der Achsenbeschriftung erhöhe, überschneiden sich Achsen und Text, was ziemlich unschön ausschaut. Mit welchem CSS-Parameter kann ich diesen Abstand vergrößern? Padding und margin bei .text.axes haben rein gar nichts verändert :-\
schöne Grüße
Jo
Hallo eki und vielen Dank für die Mühen und Tips!
Hier einmal die gewünschten Infos:
1) Das funktionierenden gPlot-File für den Plot in Fhem:
2) Auszüge aus dem LogFile der Heizung (umsortiert um es besser lesen zu können):
set terminal png transparent size <SIZE> crop
set output '<OUT>.png'
set xdata time
set timefmt "%Y-%m-%d_%H:%M:%S"
set xlabel " "
set title ''
set ytics
set y2tics ("an" 100)
set grid
set ylabel "Temperatur °C"
set y2label "Pumpe"
set yrange [-25:50]
set y2range [0:1000]
#logproxy FileLog:FileLog_heizung,extend=10800,interpolate,predict:4:heizung.Aussentemperatur\x3a::
#logproxy FileLog:FileLog_heizung,extend=10800,interpolate,predict:4:heizung.HK1_Raumisttemperatur\x3a::
#logproxy FileLog:FileLog_heizung,extend=10800,interpolate,predict:4:heizung.WW_Isttemperatur\x3a:0:
#logproxy FileLog:FileLog_heizung,extend=10800,predict:5:heizung.Brenner_Ansteuerung\x3a:0:$fld[4]=~'an'?1000:0
#logproxy FileLog:FileLog_heizung,extend=10800,predict:4:heizung.HK1_Pumpe\x3a:0:
#logproxy FileLog:FileLog_heizung,extend=10800,predict:4:heizung.WW_Pumpentyp\x3a:0:$fld[3]=~'Ladepumpe'?100:0
#logproxy ConstY:{ReadingsVal("heizung","HK1_Raumsolltemperatur","0")}
#logproxy ConstY:{ReadingsVal("heizung","WW_Solltemperatur","0")}
plot "<IN>" using 1:2 axes x1y1 title 'aussen' ls l0 lw 1.5 with cubic,\
"<IN>" using 1:2 axes x1y1 title 'innen' ls l1 lw 1.5 with cubic,\
"<IN>" using 1:2 axes x1y1 title 'Wasser' ls l2 lw 1.5 with cubic,\
"<IN>" using 1:2 axes x1y2 title 'Brenner' ls l6fill lw 0.2 with steps,\
"<IN>" using 1:2 axes x1y2 title ' ' ls l1fill lw 0.2 with steps,\
"<IN>" using 1:2 axes x1y2 title ' ' ls l2fill lw 0.2 with steps,\
"<IN>" using 1:2 axes x1y1 title ' ' ls l1 lw 1 with points,\
"<IN>" using 1:2 axes x1y1 title ' ' ls l2 lw 1 with points
2016-03-08_09:16:17 heizung Aussentemperatur: 1
2016-03-08_09:15:29 heizung HK1_Raumisttemperatur: 20
2016-03-08_09:16:12 heizung WW_Isttemperatur: 50
2016-03-08_09:15:29 heizung HK1_Pumpe: 100
2016-03-08_20:26:36 heizung HK1_Pumpe: 0
2016-03-08_09:16:14 heizung Brenner_Ansteuerung: 1.Stufe an
2016-03-08_09:19:22 heizung Brenner_Ansteuerung: Kessel aus
2016-03-08_09:16:12 heizung WW_Pumpentyp: -
2016-03-08_20:29:21 heizung WW_Pumpentyp: Ladepumpe
Alle Zahlenwerte bekomme ich momentan über das Chart-Widget wunderbar dargestellt - es hängt bei den 'Brenner' und 'WW_Pumpentyp', welche ich über logProxy einbinden wolte:
<div
data-type="chart"
data-logdevice="logproxy" <--das Device heißt bei mir auch so
data-columnspec='["FileLog:FileLog_heizung:4:heizung.Aussentemperatur\x3a::"]'
data-style='["ftui l2"]'
data-ptype='["lines"]'
data-uaxis='["primary"]'
data-legend='["außen"]'
...></div>
Hallo eki,
hast Du was an der Darstellungsreihenfolge geändert? Ich musste mein gefüllten Graphen kpl. in der Reihenfolge der Definiton vertauschen, damit ich Sie wieder zu sehen bekomme. Das hat so schon mal geklappt. Allerdings ist die ist die Legende im Hintergrund ... die hätte ich eigentlich gerne über die Graphen "geplottet", also im Vordergrund - ich meine das war vor dem Update so ...
Eine Idee?
h3ll
Zitat von: h3llsp4wn am 08 März 2016, 21:04:45
Hallo eki,
hast Du was an der Darstellungsreihenfolge geändert? Ich musste mein gefüllten Graphen kpl. in der Reihenfolge der Definiton vertauschen, damit ich Sie wieder zu sehen bekomme. Das hat so schon mal geklappt. Allerdings ist die ist die Legende im Hintergrund ... die hätte ich eigentlich gerne über die Graphen "geplottet", also im Vordergrund - ich meine das war vor dem Update so ...
Eine Idee?
h3ll
Ja, das war notwendig um die 3D Geschichte hin zu bekommen ohne zu viele switches in den code einbauen zu müssen, sorry. Das mit der Legende ist natürlich Geschmackssache, ich überleg mir mal was.
Zitat von: RomanticBoy83 am 08 März 2016, 20:54:16
...
Alle Zahlenwerte bekomme ich momentan über das Chart-Widget wunderbar dargestellt - es hängt bei den 'Brenner' und 'WW_Pumpentyp', welche ich über logProxy einbinden wolte:
<div
data-type="chart"
data-logdevice="logproxy" <--das Device heißt bei mir auch so
data-columnspec='["FileLog:FileLog_heizung:4:heizung.Aussentemperatur\x3a::"]'
data-style='["ftui l2"]'
data-ptype='["lines"]'
data-uaxis='["primary"]'
data-legend='["außen"]'
...></div>
Das funktioniert grundsätzlich auch mit dem Chart. Das Problem sind nur die ineinander verschachtelten ' und " und die Maskierung der \.
In Deinem Falls müsstest Du die columnspec entsprechend zum gplot Eintrag:
#logproxy FileLog:FileLog_heizung,extend=10800,predict:5:heizung.Brenner_Ansteuerung\x3a:0:$fld[4]=~'an'?1000:0
in etwa folgendermaßen schreiben:
data-columnspec='["FileLog:FileLog:FileLog_heizung,extend=10800,predict:5:heizung.Brenner_Ansteuerung\\x3a:0:$fld[4]=~\"an\"?1000:0"]'
Zitat von: Jojo11 am 08 März 2016, 20:35:35
Hallo,
ich teste auch gerade mit den Plots in FTUI herum. Wenn ich die Schriftgröße der Achsenbeschriftung erhöhe, überschneiden sich Achsen und Text, was ziemlich unschön ausschaut. Mit welchem CSS-Parameter kann ich diesen Abstand vergrößern? Padding und margin bei .text.axes haben rein gar nichts verändert :-\
schöne Grüße
Jo
Hast Du mal ein Bild wie das aussieht?
Update:
Ich habe die Darstellung nun über logProxy darstellen können - Das Problem ist das Hex-Zeichen '\x3a', welches vom Widget nicht umgerechnet wird. Wenn ich dieses einfach wegfallen lasse, dann "treffe" ich noch immer die richtigen Einträge.
Nun kann ich jedoch noch immer nicht das Ergebnis manipulieren!
Der nachfolgende Code funktioniert und gibt den Wert 100 bzw. 0 im Chart wieder:
"FileLog:FileLog_heizung,extend=10800,predict:4:heizung.HK1_Pumpe::"
Ich möchte jedoch gerne die Daten ändern/auswerten können (Notwendig bei der WW_Pumpentyp, welche keine Integer-Werte hat)
"FileLog:FileLog_heizung,extend=10800,predict:4:heizung.WW_Pumpentyp::$fld[3]=~'Ladepumpe'?100:0"
Änderung: Die Lösung wurde von Eki schon verraten "Maskierung in RegExp falsch"- ich habe den Post nur nicht gelesen!
Zitat von: eki am 09 März 2016, 15:16:25
Hast Du mal ein Bild wie das aussieht?
Hallo,
gerne, da das Forum ja gerade mal wieder erreichbar ist ;)
schöne Grüße
Jo
Zitat von: RomanticBoy83 am 09 März 2016, 15:39:07
Update:
Ich habe die Darstellung nun über logProxy darstellen können - Das Problem ist das Hex-Zeichen '\x3a', welches vom Widget nicht umgerechnet wird. Wenn ich dieses einfach wegfallen lasse, dann "treffe" ich noch immer die richtigen Einträge.
Nun kann ich jedoch noch immer nicht das Ergebnis manipulieren!
Der nachfolgende Code funktioniert und gibt den Wert 100 bzw. 0 im Chart wieder:
"FileLog:FileLog_heizung,extend=10800,predict:4:heizung.HK1_Pumpe::"
Ich möchte jedoch gerne die Daten ändern/auswerten können (Notwendig bei der WW_Pumpentyp, welche keine Integer-Werte hat)
"FileLog:FileLog_heizung,extend=10800,predict:4:heizung.WW_Pumpentyp::$fld[3]=~'Ladepumpe'?100:0"
?! ... na lesen musst Du schon was ich Dir schreibe (siehe zwei Beiträge weiter oben).
Ups! ;)
Ich habe es echt nicht gelesen! Besten dank für die Ausführungen - genau dort war das Problem!
Hallo Leute,
ich versuche mich gerade daran eine Chart von meinem Gasverbauch zu erstellen.
Definiert habe ich chart wie folgt:
<header>Gas Chart</header>
<div class="normal"
data-type="chart"
data-logdevice='["FileLog_GasVerbrauch","FileLog_GasVerbrauch"]'
data-columnspec='["4:GasVerbrauch.countsOverall","4:GasVerbrauch.counterPerDay"]'
data-style='["ftui l0fill","ftui l1fill"]'
data-ptype='["lines","lines"]'
data-uaxis='["primary","secondary"]'
data-legend='["Zählerstand (m3)", "Heute (m3)"]'
data-ytext="Zählerstand"
data-minvalue="auto"
data-maxvalue="auto"
data-ytext_sec="Heute"
data-yticks="auto"
data-minvalue_sec="0"
data-maxvalue_sec="15"
data-daysago_start="0"
data-daysago_end="-1"
data-nofulldays="true"
data-crosshair="true"
data-cursorgroup="1"
data-scrollgroup="1"
data-showlegend="true"
data-xticks="auto"
data-height="270px">
</div>
Das Log device gibt folgendes aus:
2016-03-21_14:16:31 GasVerbrauch countsOverall: 1240165
2016-03-21_14:16:31 GasVerbrauch countsPerDay: 502
2016-03-21_14:16:30 GasVerbrauch counterPerDay: 5.02
2016-03-21_14:16:30 GasVerbrauch counter: 12401.65
2016-03-21_14:16:30 GasVerbrauch counterPerDay: 5.02
2016-03-21_14:16:30 GasVerbrauch counter: 12401.65
2016-03-21_14:16:30 GasVerbrauch countsOverall: 1240165
2016-03-21_14:16:30 GasVerbrauch countsPerDay: 502
2016-03-21_14:16:16 GasVerbrauch counterPerDay: 5.01
2016-03-21_14:16:16 GasVerbrauch counter: 12401.64
2016-03-21_14:16:16 GasVerbrauch counterPerDay: 5.01
2016-03-21_14:16:16 GasVerbrauch counter: 12401.64
2016-03-21_14:16:16 GasVerbrauch countsOverall: 1240164
2016-03-21_14:16:16 GasVerbrauch countsPerDay: 501
2016-03-21_14:16:15 GasVerbrauch counterPerDay: 5.01
2016-03-21_14:16:15 GasVerbrauch counter: 12401.64
2016-03-21_14:16:14 GasVerbrauch counterPerDay: 5.01
2016-03-21_14:16:14 GasVerbrauch counter: 12401.64
2016-03-21_14:16:14 GasVerbrauch countsOverall: 1240164
2016-03-21_14:16:14 GasVerbrauch countsPerDay: 501
2016-03-21_14:16:00 GasVerbrauch counterPerDay: 5.00
2016-03-21_14:16:00 GasVerbrauch counter: 12401.63
2016-03-21_14:16:00 GasVerbrauch counterPerDay: 5.00
2016-03-21_14:16:00 GasVerbrauch counter: 12401.63
2016-03-21_14:16:00 GasVerbrauch countsOverall: 1240163
Allerdings bekomme ich dann immer die Fortlaufenden Zähler nicht richtig angezeigt. Siehe Screenshots.
Ich hätte in der Tablet Ui gerne die gleiche Darstellung wie in FHEM selbst.
Danke und Gruß Robert
Sieht so aus, als ob in deinem Log die Daten in der "falschen" Reihenfolge stehen, also die Ältesten Daten am Ende und die neuesten am Anfang. Falls die Daten auch in der Reihenfolge aus dem GET den chart absetzt ankommen, unterstützt das Chart Widget dies bisher noch nicht, ist mir bisher auch noch nicht über den Weg gelaufen. Nutzt Du das Feature reverse-logs? Ich kann da natürlich noch eine Sortierung einbauen, das macht das Ganze aber wieder langsamer.
Es gibt seit heute auch wieder eine neue Version des Chart Widgets. Details siehe https://forum.fhem.de/index.php/topic,48450.0.html
Zitat von: eki am 21 März 2016, 16:47:50
Sieht so aus, als ob in deinem Log die Daten in der "falschen" Reihenfolge stehen, also die Ältesten Daten am Ende und die neuesten am Anfang. Falls die Daten auch in der Reihenfolge aus dem GET den chart absetzt ankommen, unterstützt das Chart Widget dies bisher noch nicht, ist mir bisher auch noch nicht über den Weg gelaufen. Nutzt Du das Feature reverse-logs? Ich kann da natürlich noch eine Sortierung einbauen, das macht das Ganze aber wieder langsamer.
Also wenn ich im FHEM auf das Log klicke, dann bekomme ich den neusten Eintrag oben angezeigt.
Spielt es eine Rolle ob ich noch im LogFile Device einen Definition für eine Log Rotation habe?
./log/GasVerbrauch-%Y-%m.logAllerdings beim Tagesverbrauch Funktioniert es richtig, siehe Screenshot.
Weshalb ich ja auf einen Config Fehler meinerseits tippe.
Gruß Robert
Hallo no_Legend,
probier mal mit der zuvor erwähnten neuen Version, dort habe ich die Sortierung eingebaut. Wird mit dem Parameter data-dosort="true" aktiviert.
Hallo Eki,
was muss ich jetzt ändern, damit mein Chart wieder "normal" ausschaut? Sieht mir aus als würden die Linien hin und her springen :o
Ups :-[, sieht wohl so aus als ob da beim Sortieren was schiefgeht. Habs jetzt erst mal nur als Option reingenommen. Bitte prüfe noch mal mit der (wieder unter dem angegebenen Thread verfügbaren) Version (da ist die Sortierung standardmäßíg deaktiviert).
Danke - eben getestet - mit der Version sieht alles wieder gut aus - und alles funktioniert wieder :)
Hallo,
ich baue auch aktuell viel mit den charts.
Ich habe die Kühlschrankinnentemperatur mit ftui l0fill_gyr abgebildet.
Im chart widget gibt es diesen charttyp nicht. Ist das geplant ?
Grüße
Jörg
Hallo,
Ich habe gestern das Chart Widget eingebaut. Es sieht wunderbar aus, allerdings updated es sich nur, wenn man einen Seitenrefresh (F5) macht. Alle anderen Widgets aktualisieren sich permanent. Woran liegt es? Getestet Chrome unter CM10 auf Tablet und Firefox auf PC
<div data-type="chart"
data-logdevice='["logdb","logdb"]'
data-columnspec='["MySHM:PV:::","MySHM:SelfConsumption:::"]'
data-style='["ftui l0","ftui l2fill"]'
data-minvalue="auto"
data-maxvalue="auto"
data-height="125"
data-width="480"
class="noticks">
</div>
Zitat von: jnewton957 am 27 März 2016, 08:11:36
Hallo,
ich baue auch aktuell viel mit den charts.
Ich habe die Kühlschrankinnentemperatur mit ftui l0fill_gyr abgebildet.
Im chart widget gibt es diesen charttyp nicht. Ist das geplant ?
Grüße
Jörg
Ich muss mal schauen wo das definiert ist, dann kann ich es in der nächsten Version einbauen.
Zitat von: eki am 27 März 2016, 11:21:12
Ich muss mal schauen wo das definiert ist, dann kann ich es in der nächsten Version einbauen.
Danke.
Freue mich darauf. Der Charttyp sieht eben echt Klasse aucf für die Temperaurverläufe.
Grüße
Jörg
EDIT: Wie ich sehe wird das Thema bereits in einem Thread behandelt.
Seit gestern funktionieren in keinem Browser mehr das Chart Widget, geändert habe ich nichts, bei Firefox geht es soweit, dass dieser komplett einfriert, Safari, Chrome und iOS zeigen bis auf die X und Y Achse nichts mehr an. Ist sonst irgendeinem ein Problem mit dem Widget bekannt?
Finde es ein wenig seltsam, dass das Widgets nicht mehr funktionert, habe sogar ein Logfile zurückgesetzt um auszuschliessen, dass es an den Daten liegt.
Hier der HTML Schnippsel:
<div data-type="chart"
data-device='HM_422F71_Clima'
data-logdevice='["FileLog_HM_422F71"]'
data-columnspec='["4:measured-temp","4:desi.*","4:actuator"]'
data-legend='["Ist","Soll","Ventilstellung"]'
data-minvalue='["15","15"]'
data-minvalue_sec='["0"]'
data-maxvalue='["25","25"]'
data-maxvalue_sec='["100"]'
data-uaxis='["primary","primary","secondary"]'
data-ytext="°C"
data-ytext_sec="%"
data-style='["ftui l0fill","ftui l4","ftui l3"]'
data-height="75"
data-width="125"
class="noticks nobuttons">
</div>
Ja, das haben schon einige festgestellt. Siehe https://forum.fhem.de/index.php/topic,51450.0.html
Wie könnte man presence darstellen, hier gibt es ja nur die Readings absent und present?
Marek
Hallo Marek,
ich habe das für meine Fenster über zusätzliche mapping Funktionen in der columnspec gelöst (schau auch mal im fhem plot wiki nach). Du kannst dann die werte im Logfile in Zahlen umwandeln und darstellen.
Die Syntax sieht für meine Fenster in etwa so aus (musst Du dann eben für die Presence Texte noch anpassen):
'4:og_KZ_Fenster.contact\x3a::$fld[3]=~"open"?1:$fld[3]=~"tilted"?0.5:0'
Erklärung: die 4 steht für die 4 Spalte, die die Werte (bei mir "open", "tilted" oder "closed") enthält. Danach kommt durch ":" getrennt zunächst ein Filterstring, der die Zeilen mit den relevanten Daten herausfiltert (bei mir die mit der Fenster contact Info, das "\x3a" ist der hex Wert für das Zeichen ":" muss so gemacht werden damit man nicht mit den ":" als Trenner durcheinander kommt). Danach kommt ein möglicher Defaultwert (habe ich einfach leer gelassen). Dann kommt das Entscheidende, Du kannst auf die einzelnen elemente der herausgefilterten Zeile direkt zugreifen $fld[i] steht für das i-te durch Leerzeichen getrennte Element (Vorsicht, hier fängt das Zählen mit 0 an statt mit 1 wie beim ersten Parameter). Die Auswertung ist dann mehr oder weniger perl syntax (in meinem Fall wird nachgeschaut, ob der Wert ($fld[3]) dem String "open" entspricht, falls ja wird der Wert 1 zurück gegeben, falls nein, wird geprüft ob der Wert den String "tilted" enthält, in diesem Fall wird der Wert 0.5 zurückgeliefert, ansonsten 0). Dadurch entsteht ein Plot mit 3 Stufen (ich verwende als Plottype "steps") die den Status des Fensters anzeigen.
@eki: Gute Lösung!
Eine andere Lösung für texte in Logs ist das Erzeugen eines ExtraFilelogs auf der Originaldatei wob eine Reformatfunktion die Texte in Nummern umsetzt.
Ich habe ledier mit beiden Lösungen ein Problem, vielleicht hat ja dazu jemand eine Idee?:
1) In der y-Skala stehen leider nur Zahlen (anders als bei einer Ersetzung beim SVG Plot). Oder hat dazu noch jemand eine Idee?
2) Wenn die Logfiles (per event-on-...) ausgedünnt sind, sieht man leider am Anfang und Ende keine Daten bis der erste Event kommt
zu 1.) Das geht bisher noch nicht, werde ich einer der nächsten Versionen mal vorsehen (muss aber noch nachdenken wie)
zu 2.) Das lässt sich über logproxy mit dem extend attribut machen (siehe wiki zu logproxy).
@eki: Danke für die Infos!
Ja das mit extend in logproxy hatte ich mir schon gedacht, da ich gestern gesehen hatte, dass das widget spezielle Behandlungen für logproxy enthält.
Hallo Leute,
ich könnte zwar den Plot per iframe einbinden, doch möchte ich die Auswertung gern per tablet ui Chart nutzen.
Ich komme aber nicht dahinter wie ihr die Charts erstellt.
bei mir kommen immer leere Charts zum Vorschein.
hier mein bisheriger Versuch:
fhem.cfg
define G_BZ FileLog ./log/G_BZ-%Y-%m.log T_BZ:Badezimmer_Ist-Wert.TEMPERATURE:.*
define SVG_G_BZ_1 SVG G_BZ:SVG_G_BZ_1:CURRENT
attr SVG_G_BZ_1 room Statistiken
attr SVG_G_BZ_1 group Wohnbereich
Logdatei G_BZ-2016-10.log
2016-10-03_02:53:26 T_BZ Badezimmer_Ist-Wert.TEMPERATURE: 22.8
2016-10-03_02:58:24 T_BZ Badezimmer_Ist-Wert.TEMPERATURE: 22.7
2016-10-03_03:34:04 T_BZ Badezimmer_Ist-Wert.TEMPERATURE: 22.6
2016-10-03_04:34:51 T_BZ Badezimmer_Ist-Wert.TEMPERATURE: 22.5
2016-10-03_05:10:40 T_BZ Badezimmer_Ist-Wert.TEMPERATURE: 22.4
2016-10-03_05:13:09 T_BZ Badezimmer_Ist-Wert.TEMPERATURE: 22.5
2016-10-03_05:15:15 T_BZ Badezimmer_Ist-Wert.TEMPERATURE: 22.4
2016-10-03_06:59:55 T_BZ Badezimmer_Ist-Wert.TEMPERATURE: 22.5
2016-10-03_07:02:40 T_BZ Badezimmer_Ist-Wert.TEMPERATURE: 22.4
mein eingebundener Div
<div class="normal"
data-type="chart"
data-logdevice='FileLog_G_BZ'
data-columnspec='4:Badezimmer_Ist-Wert.TEMPERATURE'
data-style='ftui l0'
data-ptype='lines'
data-uaxis='primary'
data-legend=' '
data-yunit="°C"
data-ytext="Temperatur"
data-yticks="auto"
data-minvalue="18"
data-maxvalue="27"
data-daysago_start="1"
data-daysago_end="-1"
data-crosshair="true"
data-cursorgroup="1"
data-scrollgroup="1"
data-showlegend="true"
data-width="100%"
data-height="100%"
data-xticks="1440">
</div>
Das ganze bleibt wie gesagt leer.
Kann mir wer helfen?
Gruß
PlanLos
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.
hat es vielen DANK!!!
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="°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
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.
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?
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"]'
Super, sogar gestrichelte Linien :) Vielen Dank!
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.
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 :(
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 (https://forum.fhem.de/index.php/topic,48450.msg521422.html#msg521422) schon mal beschrieben.
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.
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>
Das Device hat am Ende d2 und nicht nur d. Also noch mal Columnspec anpassen.
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>
schau mal hier:
https://forum.fhem.de/index.php/topic,66879.msg591693.html#msg591693 (https://forum.fhem.de/index.php/topic,66879.msg591693.html#msg591693)
Super, das war der entscheidende Punkt. In die Richtung hatte ich überhaupt nicht gedacht - alleine hätte ich da wohl noch 100 Jahre gesucht, um mein Chart wiederzubeleben.
Danke Dir! :)
Ich habe jetzt die Datenabfrage per zentraler Abfrage mit csrf eingebaut
ftui.sendFhemCommand(cmd)Aber es werden keine Datenpunkte aufgebaut, obwohl Daten geliefert werden
Zitat
[Log] Function: widget_chart.refresh – "Got 0 points for Graph 1" (widget_chart.js, line 68)
[Log] send to FHEM: get FileLog_WohnzimmerHeizung - - 2017-03-01_00:00:00 2017-03-02_00:00:00 4:desired-temp (fhem-tablet-ui.js, line 1704)
[Log] Function: widget_chart.refresh – "Got 0 points for Graph 2" (widget_chart.js, line 68)
[Log] send to FHEM: get FileLog_WohnzimmerHeizung - - 2017-03-01_00:00:00 2017-03-02_00:00:00 4:ValvePosition (fhem-tablet-ui.js, line 1704)
[Log] Function: widget_chart.refresh – "Got 0 points for Graph 3" (widget_chart.js, line 68)
[Log] Function: widget_chart.refresh – "Chart finished, Parameters: {↵ \"type\": \"chart\",↵ \"columnspec\": [↵ \"4:measured-temp\",↵ \"4:desired-temp\",↵ \"4:ValvePosition\"↵ ],..." (widget_chart.js, line 68)
"Chart finished, Parameters: {
\"type\": \"chart\",
\"columnspec\": [
\"4:measured-temp\",
\"4:desired-temp\",
\"4:ValvePosition\"
],
\"logfile\": \"-\",
\"logdevice\": \"FileLog_WohnzimmerHeizung\",
\"device\": \"WohnzimmerHeizung\",
\"minvalue_sec\": \"auto\",
\"maxvalue_sec\": \"auto\",
\"minvalue\": \"auto\",
\"maxvalue\": \"auto\",
\"y_margin\": 0,
\"y_margin_sec\": 0,
\"daysago_start\": \"0\",
\"daysago_end\": \"-1\",
\"timeformat\": \"\",
\"xticks_round\": \"\",
\"xticks_angle\": 0,
\"xticks\": \"auto\",
\"yticks\": \"auto\",
\"yticks_sec\": \"auto\",
\"yunit\": \"\",
\"yunit_sec\": \"\",
\"ytext\": \"\",
\"ytext_sec\": \"\",
\"style\": \"\",
\"ptype\": \"lines\",
\"uaxis\": \"primary\",
\"get\": \"STATE\",
\"graphWidth\": 83.20738017429193,
\"graphHeight\": 74.98958333333333,
\"textWidth\": 30,
\"textHeight\": 11.515625,
\"bottomOffset\": 11.515625,
\"topOffset\": 26,
\"crosshair\": false,
\"cursor_digits\": 5,
\"crs_inactive\": false,
\"showlegend\": false,
\"nofulldays\": false,
\"graphsshown\": [
true,
true,
true
],
\"xclassifier\": \"\",
\"days_start\": 0,
\"days_end\": -1,
\"shift\": 0,
\"scale\": 1,
\"instance\": 1,
\"initialized\": true,
\"noticks\": false,
\"DDD\": {
\"has3D\": true,
\"prefix\": \"-webkit-\",
\"dir\": {
\"x\": 1,
\"y\": 1
},
\"Active\": false,
\"Setting\": [
\"0\",
\"0\",
\"0\"
],
\"Space\": 15,
\"Width\": 10,
\"Distance\": 25,
\"String\": {
\"Rot\": \"-webkit-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\": \"2017-03-01_00:00:00\",
\"nGraphs\": 3,
\"logProxy\": false,
\"nofilldown\": [
false,
false,
false
],
\"textWidth_prim\": 63.5625,
\"textWidth_sec\": 13.515625,
\"dateWidth\": 27.8125,
\"xscale\": 1440,
\"basewidth\": 459,
\"baseheight\": 150,
\"xStr\": \"63.5625px\",
\"xStrTO\": \"63.5625px\",
\"yStr\": \"381.92187499999994px\",
\"yStrTO\": \"112.484375px\",
\"projectionDist\": 5000,
\"defaultHeight\": \"\",
\"defaultWidth\": \"93%\",
\"chartArea\": {
\"left\": 274.296875,
\"top\": 27,
\"width\": 459,
\"height\": 150
},
\"graphArea\": {
\"left\": 337.859375,
\"top\": 53,
\"width\": 381.92187499999994,
\"height\": 112.484375
},
\"xrangeW\": null,
\"diffY_prim\": 0.01,
\"min_prim\": 0,
\"scaleY\": 42411.16065949352,
\"shiftY\": 0,
\"min_save\": 0,
\"max_save\": 424.1116065949352,
\"diffY_sec\": 0.01,
\"min_sec\": 0,
\"scaleY_sec\": 42411.16065949352,
\"shiftY_sec\": 0,
\"min_save_sec\": 0,
\"max_save_sec\": 424.1116065949352,
\"pointsarray\": [
[],
[],
[]
],
\"pointsarrayCursor\": [
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[],
[]
],
\"done\": true
}"
Das Konsolenlog sieht bei mir nicht anders aus :-\
Hallo,
bei mir genau das gleiche.
Konsole zeigt
.
.
.
start shortpoll in (ms):500
fhem-tablet-ui.js:1704 send to FHEM: get logdb HISTORY - 2017-03-02_00:00:00 2017-03-03_00:00:00 TH_Kueche:temperature
widget_chart.js:68 Function: widget_chart.refresh Got 0 points for Graph 1
fhem-tablet-ui.js:1704 send to FHEM: get logdb HISTORY - 2017-03-02_00:00:00 2017-03-03_00:00:00 TH_Kueche:humidity
widget_chart.js:68 Function: widget_chart.refresh Got 0 points for Graph 2
fhem-tablet-ui.js:1704 send to FHEM: get logdb HISTORY - 2017-03-02_00:00:00 2017-03-03_00:00:00 TT_Kueche_Clima:ValvePosition
widget_chart.js:68 Function: widget_chart.refresh Got 0 points for Graph 3
widget_chart.js:68 Function: widget_chart.refresh Chart finished, Parameters: {
"type": "chart",
"xticks": "auto",
"showlegend": false,
.
.
.
Das Chart nicht mehr ging, lag an meinem Versuch den ajax Aufruf durch die zentrale Funktion ftui.sendFhemCommand(cmd) zu ersetzen. Dabei habe ich übersehen, dass der Aufruf nur funktioniert, wenn er synchron erfolgt.
Auf asynchrone Abarbeitung umzubauen, wurde mir ganz schnell zu viel und ich habe meine Änderung wieder zurückgenommen.
Jetzt geht es erstmal wieder.
Heißt das, die Datenmenge ist zu groß? Aber dann dürfte es bei Simplecharts auch nicht gehen, oder?
Gesendet von meinem HTC One mit Tapatalk
Synchron bedeutet, der Ablauf der Funktion pausiert, bis die Daten vom Server angekommen sind. Das könnte der User spüren, weil in diesem Augenblick keine Eingabe möglich ist. Wenn nur wenige Daten abgeholt werden ist das kein Problem.
Beim Simplechart passiert der weitere Ablauf kpl. im done(){}, also wenn Daten angekommen sind. Beim Chart ist alles viel zu verschachtelt mit for-Schleifen für die einzelnen Datenreihen, der Umbau scheint mir sehr aufwendig.
Lassen sich im Chart die Daten noch z.B. durch 1000 teilen bevor sie angezeigt werden?
wie es für die Standard FHEM Plotes geht mit z.B. $fld[3]/1000?
Ja, das geht, und zwar genau so wie bei den Standard FHEM Plots, indem Du die entsprechende Definition in die columnspec der Chart Definition packst.
Hier ein Beispiel:
data-columnspec="4:.measured-temp::$fld[3]-2"
Zitat von: setstate am 02 März 2017, 22:33:46
Synchron bedeutet, der Ablauf der Funktion pausiert, bis die Daten vom Server angekommen sind. Das könnte der User spüren, weil in diesem Augenblick keine Eingabe möglich ist. Wenn nur wenige Daten abgeholt werden ist das kein Problem.
Beim Simplechart passiert der weitere Ablauf kpl. im done(){}, also wenn Daten angekommen sind. Beim Chart ist alles viel zu verschachtelt mit for-Schleifen für die einzelnen Datenreihen, der Umbau scheint mir sehr aufwendig.
Ich habe jetzt mal eine Version gemacht, die mit CSRF funktionieren sollte (immer noch per synchronem Ajax Aufruf, bezüglich Umbau auf asynchron muss ich mir erst mal Gedanken machen ob und wie das am besten geht, ist aber auf jeden Fall was Größeres). Bitte mal testen und Bescheid geben.
Zitat von: eki am 06 März 2017, 09:31:27
Ich habe jetzt mal eine Version gemacht, die mit CSRF funktionieren sollte (immer noch per synchronem Ajax Aufruf, bezüglich Umbau auf asynchron muss ich mir erst mal Gedanken machen ob und wie das am besten geht, ist aber auf jeden Fall was Größeres). Bitte mal testen und Bescheid geben.
Hätte ich vllt. erwähnen sollen: CSRF handling hatte ich schon eingearbeitet (in die Repo Version)
Nimm bitte trotzdem meine Version ins Repo, da sind auch noch einige andere Kleinigkeiten angepasst.
Okay, kann ich aber erst am WE tun, wenn ich von der Dienstreise wieder da bin.
Hallo,
ich versuche gerade eine SVG Umsetzung in das TabletUI chart widgetOverride umzubauen.
Bis auf ein "feature" klappt dies auch.
Im gplot habe ich wie Style grösse (width) der linie bzw. point auf 4.
plot "<IN>" using 1:2 axes x1y1 title 'Bad' ls l0fill lw 4 with points,\
Wie bekomme ich das "lw 4" nun im Chart widget definiert?
Danke
Jörg
siehe meine Antwort in Deinem anderen Beitrag https://forum.fhem.de/index.php/topic,69309.0.html (https://forum.fhem.de/index.php/topic,69309.0.html)
Zitat von: jnewton957 am 20 März 2017, 08:04:11
Wie bekomme ich das "lw 4" nun im Chart widget definiert?
Zitat von: eki am 20 März 2017, 08:33:45
siehe meine Antwort in Deinem anderen Beitrag https://forum.fhem.de/index.php/topic,69309.0.html (https://forum.fhem.de/index.php/topic,69309.0.html)
Oder gern auch mal im Wiki schauen: https://wiki.fhem.de/wiki/FTUI_Widget_Chart
Hallo, Zusammen,
ich finde chart super und würde nun gerne einen oben drauf setzen und den Bereich (data-minvalue und data-maxvalue) auf auto-1 bzw auto+1 setzen. Habe mir den Quellcode schon angeschaut und auch fleißig gegoggelt, aber keine Antwort gefunden.
Konkret geht es um diesen Chart hier:
<div data-type="chart"
data-device="Wetter"
data-get="state"
data-logdevice='["myLogProxy"]'
data-columnspec='["Func:logProxy_proplanta2Plot(\\x22Wetter\\x22,\\x22temp_\\x22,$from,$to,12,\\x22day\\x22)"]'
data-style='["ftui l0"]'
data-ptype='["quadraticSmooth"]'
data-uaxis='["primary"]'
data-legend='["Temperatur"]'
data-yunit=" °C"
data-ytext="Temperatur"
data-minvalue="auto"
data-maxvalue="auto"
data-daysago_start="0h"
data-daysago_end="-24h"
data-timeformat="hh"
data-xticks="120"
data-showlegend="false"
data-width="96%"
data-height="96px"
class="normal nobuttons">
</div>
auf Basis Proplanta wie im WiKi-Beispiel. Dieser sieht Stand heute so wie im Anhang aus.
Ich hätte gerne die hintere Spitze der Termperaturkurve optisch innerhalb meines Charts und nicht so nach oben raus. Hätte mir da jemand eine Idee?
Ich bin mir nicht ganz sicher, aber schau mal hier
https://forum.fhem.de/index.php/topic,48450.msg536246.html#msg536246
(https://forum.fhem.de/index.php/topic,48450.msg536246.html#msg536246)Möglicherweise ist es das was Du möchtest.
@eki: genau das war's. Super! Vielen Dank!
Gibt es die Möglichkeit, die Nachkommastellen der Beschriftung auf der Y-Achse zu beschränken?
Bei der Temperatur steht bei mir aktuell 10.0°C 11.0°C etc.
Der gleiche Informationsgehalt könnte übersichtlicher und mit weniger Platzbedarf auch mit 10°C 11°C etc. (also ohne Nachkommastelle) dargestellt werden...
Alex
Aktuell lässt sich das, wenn data-yticks auf "auto" steht, nicht ändern (wird automatisch im script bestimmt und hängt von der Größe der Zahl ab). Du könntest data-yticks="1" setzen, dann wird der Abstand zwischen den Ticks immer 1 sein und die Nachkommastellen wären 0.
Ist zugegeben noch nicht optimal, ich mach mir mal Gedanken, wie man das besser machen kann.
Hi zusammen,
ich komme bei der Umstellung von FileLog nach dbLog bei FTUI und Charts Modul nicht weiter.
Vielleicht habt Ihr die InitialZündung :)
Ich versuche den Stromverbrauch aktuell darzustellen. Temperaturen, Zählerstand_total,... funktioniert alles. DBLog also korrekt verbunden.
DBlog liegt auf PI (SQlite).
Problem ist das der Stromverbrauch mal mit zwei Leerzeichen kommt (" 356"), mal mit einem (" 1555"). Bei einem Leerzeichen kommt SQlite damit zurecht und macht ein Leerzeichen weg. Bei zwei, nimmt es eins weg und ich habe das Gefühl Charts kommt damit nicht zurecht. Es werden nur die vierstelligen Werte geplottet.
2017-08-25 18:24:07|NodeMCU_Stromverbrauch|MQTT_DEVICE|Stromverbrauch: 2034.0|Stromverbrauch|2034.0|
2017-08-25 18:24:25|NodeMCU_Stromverbrauch|MQTT_DEVICE|Stromverbrauch: 2600.0|Stromverbrauch|2600.0|
2017-08-25 18:30:28|NodeMCU_Stromverbrauch|MQTT_DEVICE|Stromverbrauch: 731.0|Stromverbrauch| 731.0|
2017-08-25 18:30:59|NodeMCU_Stromverbrauch|MQTT_DEVICE|Stromverbrauch: 1560.0|Stromverbrauch|1560.0|
2017-08-25 18:31:17|NodeMCU_Stromverbrauch|MQTT_DEVICE|Stromverbrauch: 2600.0|Stromverbrauch|2600.0|
2017-08-25 18:32:54|NodeMCU_Stromverbrauch|MQTT_DEVICE|Stromverbrauch: 1170.0|Stromverbrauch|1170.0|
2017-08-25 18:35:14|NodeMCU_Stromverbrauch|MQTT_DEVICE|Stromverbrauch: 334.0|Stromverbrauch| 334.0|
2017-08-25 18:37:31|NodeMCU_Stromverbrauch|MQTT_DEVICE|Stromverbrauch: 344.0|Stromverbrauch| 344.0|
<li data-row="1" data-col="2" data-sizex="6" data-sizey="2">
<header>Chart</header>
<div data-type="chart"
data-device="NodeMCU_Hall"
data-logdevice="DbLog"
data-logfile="HISTORY"
data-columnspec='["NodeMCU_Hall:Hall","NodeMCU_Stromverbrauch:Stromverbrauch:::"]'
data-style='["ftui l5","ftui l4fill"]'
Im FHEM wird der Stromverbrauch astrein geplottet.... Nur auf dem Tablet im Charts bei FTUI komme ich nicht weiter?
Habt Ihr Ideen? Führendes Leerzeichen via UserReading eliminieren? Oder im MQTT schon eliminieren?
VG
Wie sieht denn deine Plotkonfiguration in FHEM aus (also das .gplot File)?
Hallo zusammen,
ich sitze jetzt seit Stunden an einem Problem und komme nicht weiter. :-[
Ich habe eine Log-Datei, in der ich die Benzinpreise (Super E5) von 2 Tankstellen schreibe.
2017-10-13_16:15:34 AVIA_Kehrum SuperE5: 1.30
2017-10-13_16:15:53 REAL_Rees SuperE5: 1.29
2017-10-13_16:16:34 AVIA_Kehrum SuperE5: 1.30
2017-10-13_16:16:53 REAL_Rees SuperE5: 1.29
2017-10-13_16:17:34 AVIA_Kehrum SuperE5: 1.30
2017-10-13_16:17:53 REAL_Rees SuperE5: 1.29
2017-10-13_16:18:34 AVIA_Kehrum SuperE5: 1.30
2017-10-13_16:18:54 REAL_Rees SuperE5: 1.29
2017-10-13_16:19:34 AVIA_Kehrum SuperE5: 1.30
2017-10-13_16:19:54 REAL_Rees SuperE5: 1.29
Zuerst hatte ich nur die AVIA Tankstelle drin und es funktionierte. Deswegen denke ich, ist mein Regex soweit richtig.
Seitdem ich aber die zweite Tankstelle mitlogge, wird mir das Chart noch angezeigt, aber überhaupt kein Graph mehr.
Die Definition vom Chart sieht derzeit so aus:
<div data-type="chart"
data-logdevice="FileLog_Spritpreise"
data-device="AVIA_Kehrum"
data-columnspec='["4:AVIA_Kehrum.SuperE5\x3a:1:","4:REAL_Rees.SuperE5\x3a:1:"]'
data-style='["ftui l0","ftui l1dot"]'
data-ptype='["lines","lines"]'
data-uaxis='["primary","primary"]'
data-yunit="€"
data-ytext="Preis/Liter"
data-legend='["AVIA Kehrum","REAL Rees"]'
data-minvalue="1"
data-maxvalue="1.6"
data-height="250"
data-yticks="auto"
data-nofulldays="true"
data-daysago_start="3h"
data-daysago_end="now"
data-cursorgroup="1"
data-scrollgroup="1"
data-xticks="auto">
</div>
Ich denke, ihr findet bestimmt die Lösung. ;)
Vielen Dank vorab schonmal!
Hallo,
ich benutze Chart und es funktioniert schon ganz gut... Außer bei folgenden Dingen
1. Titel formatieren
2. Legende
zu 1.) folgende Zeile habe ich in dem Chart:
data-title="Klima Wohnzimmer $data{avg1}"
Die Schriftfarbe ist schwarz und die Zahl hat gefühlt 20 Nachkommastellen, kann man da was umstellen?
zu 2.)
data-legendpos='["left","below"]'
data-legend_horiz="true"
die Legende ist weder links/darunter (sondern oben rechts) und die auch nicht horizontal...
kann mir jemand helfen?
Hier der gesamte Code:
<div data-type="chart"
data-device="WZ_TH1"
data-logdevice="FileLog_WZ_TH1"
data-daysago_start="7"
data-crosshair="true"
data-title="Klima Wohnzimmer $data{avg1}"
data-showlegend="true"
data-legendpos='["left","below"]'
data-legend_horiz="true"
data-width="700"
data-columnspec='["4:measured-temp","4:desired-temp","4:actuator"]'
data-legend='["gemessen","gewünscht","Ventil"]'
data-style='["ftui l2", "ftui l0dot", "ftui l1fill"]'
data-uaxis='["primary","primary","secondary"]'
data-ytext="Temperatur"
data-yunit="°C"
data-minvalue="auto"
data-maxvalue="auto"
data-ytext_sec="Ventilöffnung"
data-yunit_sec="%"
data-minvalue_sec="0"
data-maxvalue_sec="100"
>
</div>
Viele Grüße zobi
Zitat von: MagicB85 am 13 Oktober 2017, 17:09:38
Hallo zusammen,
ich sitze jetzt seit Stunden an einem Problem und komme nicht weiter. :-[
Ich habe eine Log-Datei, in der ich die Benzinpreise (Super E5) von 2 Tankstellen schreibe.
...
In der Columnspec muss ein ":" folgendermaßen maskiert werden: \\x3a (der erste \ maskiert sorgt dafür, dass der zweite \ auch als solcher erkannt wird und nicht als Sonderzeichen.
Mit:
data-columnspec='["4:AVIA_Kehrum.SuperE5\\x3a:1:","4:REAL_Rees.SuperE5\\x3a:1:"]'
sollte es funktionieren (in Deinem Fall würde auch ein "." statt "\\x3a" gehen.
Zitat von: zobi am 15 Oktober 2017, 22:12:42
Hallo,
ich benutze Chart und es funktioniert schon ganz gut... Außer bei folgenden Dingen
1. Titel formatieren
2. Legende
zu 1.) folgende Zeile habe ich in dem Chart:
data-title="Klima Wohnzimmer $data{avg1}"
Die Schriftfarbe ist schwarz und die Zahl hat gefühlt 20 Nachkommastellen, kann man da was umstellen?
Bei den Nachkommastellen gibt es bisher keine Begrenzung. Ich werde mir etwas dazu überlegen. Was die Farbe betrifft, schau bitte mal in deinem ftui_chart.css nach was dort bei der Klasse caption steht.
Zitat
zu 2.)
data-legendpos='["left","below"]'
data-legend_horiz="true"
die Legende ist weder links/darunter (sondern oben rechts) und die auch nicht horizontal...
kann mir jemand helfen?
Hier der gesamte Code:
<div data-type="chart"
data-device="WZ_TH1"
data-logdevice="FileLog_WZ_TH1"
data-daysago_start="7"
data-crosshair="true"
data-title="Klima Wohnzimmer $data{avg1}"
data-showlegend="true"
data-legendpos='["left","below"]'
data-legend_horiz="true"
data-width="700"
data-columnspec='["4:measured-temp","4:desired-temp","4:actuator"]'
data-legend='["gemessen","gewünscht","Ventil"]'
data-style='["ftui l2", "ftui l0dot", "ftui l1fill"]'
data-uaxis='["primary","primary","secondary"]'
data-ytext="Temperatur"
data-yunit="°C"
data-minvalue="auto"
data-maxvalue="auto"
data-ytext_sec="Ventilöffnung"
data-yunit_sec="%"
data-minvalue_sec="0"
data-maxvalue_sec="100"
>
</div>
Viele Grüße zobi
Das mit der Legende hat bei mir mit genau Deiner Definition funktioniert (siehe Bild). Kannst Du bitte mal prüfen, ob Du die letzte Version (siehe Anfang dieses Threads) von widget_chart.js hast?
Hi,
doofe Frage: wie kann ich in einem Temperatur-Chart eine Linie an einer bestimmten Stelle/einem bestimmten Wert ziehen? Beispielsweise bei 0°C ?
Zitatdoofe Frage: wie kann ich in einem Temperatur-Chart eine Linie an einer bestimmten Stelle/einem bestimmten Wert ziehen? Beispielsweise bei 0°C ?
Das geht mit logProxy. Bitte schau Dir zu logProxy mal die Beschreibung zu "7-Tage-Wettervorhersage mit Proplanta" im Chart Wiki an (https://wiki.fhem.de/wiki/FTUI_Widget_Chart (https://wiki.fhem.de/wiki/FTUI_Widget_Chart)). Für die Darstellung einer Linie bei 0° C müsste die Definition etwa so aussehen (angenommen Dein logProxy Device in FHEM hast Du logProxy genannt):
<div data-type="chart"
data-device="WZ_TH1"
data-logdevice='["FileLog_WZ_TH1","FileLog_WZ_TH1","FileLog_WZ_TH1","logProxy"]'
data-daysago_start="7"
data-crosshair="true"
data-title="Klima Wohnzimmer $data{avg1}"
data-showlegend="true"
data-legendpos='["left","below"]'
data-legend_horiz="true"
data-width="700"
data-columnspec='["4:measured-temp","4:desired-temp","4:actuator","ConstY:0"]'
data-legend='["gemessen","gewünscht","Ventil",""]'
data-style='["ftui l2", "ftui l0dot", "ftui l1fill","ftui l1"]'
data-uaxis='["primary","primary","secondary","primary"]'
data-ytext="Temperatur"
data-yunit="°C"
data-minvalue="auto"
data-maxvalue="auto"
data-ytext_sec="Ventilöffnung"
data-yunit_sec="%"
data-minvalue_sec="0"
data-maxvalue_sec="100"
>
</div>
Hi,
kann man data-minvalue bzw. data-maxvalue auch variabel belegen z.B. mit dem Zustand eines Device oder Readings?
Gruß
moewe
Nein, das geht bisher nicht. Ich bin aber gerade sowieso an einigen Verbesserungen dran und schau mal ob ich das einbauen kann.
Kuck mal unter https://forum.fhem.de/index.php/topic,48450.msg401006.html#msg401006 (https://forum.fhem.de/index.php/topic,48450.msg401006.html#msg401006), ist jetzt eingebaut.
Hallo,
ich bin etwas ratlos. Seit dem letzten Update wird bei mir die Windgeschwindigkeit in FHEM selbst angezeigt, aber nicht mehr im Tabletui mit dem Chart Widget. Ich habe schon in TabletUi mehrere Testcharts zum Ausprobieren angelegt. Egal was ich mache es hakt aber immer nur bei der Windgeschwindigkiet mit der Variablen "Balkon:windVelAverage". Alle anderen Werte werden beim Ersetzen dieser Variablen angezeigt. Hat jemand eine Idee, was ich falsch mache?
Hier die Plot Definition:
set terminal png transparent size <SIZE> crop
set output '<OUT>.png'
set xdata time
set timefmt "%Y-%m-%d_%H:%M:%S"
set xlabel " "
set title '<L1>'
set ytics ("Nord" 0, "Ost" 90, "Süd" 180, "West" 270, "Nord" 360)
set y2tics
set grid ytics
set ylabel "Windrichtung"
set y2label "Wind [m/s]"
set yrange [0:360]
set y2range {"[0:".($data{max2}+0.5)."]"}
#myDbLog Balkon:windVelAverage::
#myDbLog Balkon:WindGust::
#myDbLog Balkon:windDirAverage::
plot "<IN>" using 1:2 axes x1y2 title 'Wind' ls l0fill_gyr lw 1 with lines,\
"<IN>" using 1:2 axes x1y2 title 'Windböen' ls l0fill_stripe lw 1 with cubic,\
"<IN>" using 1:2 axes x1y1 title 'Richtung' ls l6fill lw 1 with points
Hier das gleiche für FHEM:
<div class="noswipe container center"
data-type="chart"
data-device="Balkon"
data-logdevice='["myDbLog","myDbLog","myDbLog","lp"]'
data-logfile='["HISTORY","HISTORY","HISTORY","HISTORY"]'
data-columnspec='["Balkon:windDirAverage","Balkon:windVelAverage","Balkon:WindGust","ConstY:180"]'
data-style='["ftui l6dash",["fill",["0","#33CC33","1"],["4","#CCCC00","0.7"],["8","#CC0000","0.4"]],"ftui l2fill","ftui l1"]'
data-ptype='["quadraticSmooth","lines","cubic","lines"]'
data-uaxis='["secondary","primary","primary","secondary"]'
data-legend='["Richtung","Geschwindigkeit","Boen",""]'
data-prefetch="true"
data-yunit="m/s"
data-yunit_sec="°"
data-ytext="Windgeschw."
data-ytext_sec="Windrichtung"
data-minvalue="0"
data-maxvalue="auto"
data-minvalue_sec="0"
data-maxvalue_sec="360"
data-y_margin="1"
data-y_margin_sec="2"
data-xticks="auto"
data-yticks="auto"
data-yticks_sec='[[0,"Nord"],[90,"Ost"],[180,"Sued"],[270,"West"],[360,"Nord"]]'
data-daysago_start="1"
data-daysago_end="-1"
data-crosshair="true"
data-cursorgroup="1"
data-scrollgroup="1"
data-showlegend="true"
data-height="95%"
data-width="98%">
</div>
Hallo Zusammen,
ich habe ein Problem mit dem Chart-Widget.
Ich habe einen modifizierten LaCross TX 25 IT als Temperatursensor und als Wassermelder.
Dieser liefert mir 2 Readings "temperature" und "temperature2", die auch im Log-File so erscheinen.
2018-04-08_11:52:34 KG_Werkstatt_Temp_Wasser temperature: 13.9
2018-04-08_11:57:55 KG_Werkstatt_Temp_Wasser temperature2: -25.3
2018-04-08_12:07:40 KG_Werkstatt_Temp_Wasser temperature: 13.9
2018-04-08_12:13:01 KG_Werkstatt_Temp_Wasser temperature2: -25.3
2018-04-08_12:23:03 KG_Werkstatt_Temp_Wasser temperature: 13.9
2018-04-08_12:28:07 KG_Werkstatt_Temp_Wasser temperature2: -25.3
2018-04-08_12:33:36 KG_Werkstatt_Temp_Wasser battery: ok
2018-04-08_12:38:09 KG_Werkstatt_Temp_Wasser temperature: 13.9
2018-04-08_12:43:13 KG_Werkstatt_Temp_Wasser temperature2: -25.3
2018-04-08_12:53:15 KG_Werkstatt_Temp_Wasser temperature: 13.9
2018-04-08_12:58:19 KG_Werkstatt_Temp_Wasser temperature2: -25.3
2018-04-08_13:08:22 KG_Werkstatt_Temp_Wasser temperature: 13.9
2018-04-08_13:13:42 KG_Werkstatt_Temp_Wasser temperature2: -25.3
2018-04-08_13:23:45 KG_Werkstatt_Temp_Wasser temperature: 13.9
2018-04-08_13:29:05 KG_Werkstatt_Temp_Wasser temperature2: -25.3
2018-04-08_13:33:43 KG_Werkstatt_Temp_Wasser battery: ok
2018-04-08_13:39:07 KG_Werkstatt_Temp_Wasser temperature: 13.9
In Fhem bekomme ich damit auch eine entsprechende Graphik (s. Anhang) die in Ordnung ist.
Mit dem Chart-Widget mit der Definition
<div data-type="chart"
data-device="KG_Werkstatt_Temp_Wasser"
data-logdevice="FileLog_KG_Werkstatt_Temp_Wasser"
data-logfile="-"
data-columnspec='["4:temperature","4:temperature2"]'
data-style='["ftui l1","ftui l2"]'
data-ptype='["lines","lines"]'
data-uaxis='["secondary","primary"]'
data-legend='["Temperatur","Wassermelder"]'
data-yunit="°C"
data-ytext="Wassermelder"
data-minvalue="-30"
data-maxvalue="50"
data-yunit_sec="°C"
data-ytext_sec="Temperature"
data-height="195"
data-minvalue_sec="-30"
data-maxvalue_sec="50"
data-nofulldays="true"
data-daysago_start="0"
data-daysago_end="-1"
data-cursorgroup="1"
data-scrollgroup="1"
data-xticks="auto"
class="big">
</div>
bekomme ich den im Anhang ebenfalls dargestellten Verlauf.
Der Graph mit Reading "temperature2" - die fiktive Wassermeldertemperatur - wird richtig dargestellt
Der Graph mit Reading "temperature" - wird nicht richtig dargestellt. Anscheinend werden für die Darstellung die beiden Readings "temperature" und "temperature2" ausgewertet und gezeichnet.
Warum ist das so, hat jemand eine Idee warum das so ist und wo der Fehler liegt?
Danke für die Hilfe.
Stephan
Wenn du in die columnspec noch den ':' mit in die regexp einfügst, sollte es klappen (siehe auch mein Feedback in diesem Thread vom 16.10.2017).
data-columnspec='["4:temperature\\x3a","4:temperature2\\x3a"]'
@eki: super, tausend Dank, das war es (hat mich gestern einige Stunden gekostet).
Mit
data-columnspec='["4:temperature\\x3a","4:temperature2\\x3a"]'
funktioniert es wie es soll (s. Anhang).
Ich hatte schon die Vermutung, dass beim "parsen" mit der "Zahl am Ende" irgendetwas nicht passt.
Aber bei einen aufwändigeren Plot meiner kompletten UVR1611 Heizungssteuerung sind auch Zahlen am Ende der readings und das funktioniert seltsamerweise einwandfrei (s. Anhang).
<div data-type="chart"
data-logdevice='["myuvrsen","myuvrsen","myuvrsen","myuvrsen","myuvrsen","myuvrsen","myuvrsen","myuvrsen","myuvrsen","myuvrsen","myuvrsen","myuvrsen"]'
data-columnspec='["4:UVRSena.USen1","4:UVRSena.USen2","4:UVRSena.USen3","4:UVRSena.USen4","4:UVRSena.USen5","4:UVRSena.USen6","4:UVRSena.USen7","4:UVRSena.USen9","4:UVRSenb.USen10","4:UVRSenb.USen11","4:UVRSenb.USen12","4:UVRSenb.USen14"]'
data-style='["ftui l2","ftui l4","ftui l6","ftui l1","ftui l2dot","ftui l5","ftui l1","ftui l0","ftui l2dot","ftui l4dot","ftui l5","ftui l4dot"]'
data-ptype='["lines","lines","lines","lines","lines","lines","lines","lines","lines","lines","lines","lines"]'
data-uaxis='["primary","secondary","primary","primary","primary","primary","primary","primary","primary","primary","primary","secundary"]'
data-legend='["1TKollektor","2TWWPuffer","3TSRL1","4TSRL2","5TZircoRL","6TPufferm","7TPuffero","9TKesselVL","10THK1VLHK","11THK2VLFBH","12TAussen","14TWarmwasser"]'
data-yunit="°C"
data-ytext="Temperature"
.......
.......
data-xticks="auto">
</div>
Mir ist das nicht klar und ich verstehe es auch nicht, warum es einmal mit Zahl am Ende funktioniert und einmal nicht.
Ist es sinnvoll bei "data-columnspec" den ":" beim reading immer wie oben mit zu übergeben?
Nochmal Danke!
Stephan
Das mit dem ':' ist leider nicht so einfach. Es gibt durchaus Readings, die keinen ':' enthalten, das hängt mehr oder weniger am device und daran, was das Device in die Readings schreibt. Immer einen ':' dranzuhängen wäre also nicht so sinnvoll. Darüber hinaus ist der ':' ja auch noch als Trenner zwischen den einzelnen Teilen der columnspec genutzt.
In Deinem Fall brauchst Du den ':' nur deshalb, weil die Regexp sonst eben auf beide Zeilen anspringt ('temperature' als Regexp schlägt eben bei 'temperature' und bei 'temperature2' an, aber 'termperature:' schlägt bei 'temperature2:' nicht an.
In dem anderen Beipiel hast Du diese Zweideutigkeiten nicht (hat nichts mit den Zahlen am Ende zu tun, sondern nur mit der Eindeutigkeit der Regexp, wenn Du z.B. ein Reading mit Namen 'UVRSena.USen11' hättest würde das auch mit 'UVRSena.USen1' vermischt).
Wie kann ich farbige Anzeigen wie im plot "l0fill_gyr" realisieren ?
Und ein schöne Monatsansicht ??
habe nun ganz viel rumprobiert und so halbwegs nun eine brauchbare lösung gefunden für eine Monatsansicht. Jedoch verschieben sich die Angaben unten in der Leiste etwas ..
der 1.11. ist vorhanden wird aber da es um 23:57 Uhr daher schaut es so aus als ob es den 1. nicht gibt. Den 2, Wert nicht beachten der kommt später....
Code:
<div data-type="chart"
data-title="Akt: VERBRAUCH: $data{currval1} kW • Solar: $data{currval2} Watt"
data-title_class="titlewhite"
data-logdevice='["EnergieM","EnergieM"]'
data-columnspec='["6:Hausstrom.day:","4:AC.Power:.*$val=($fld[3]*/1000)"]'
data-style='["ftui l2fill","ftui l0fill"]'
data-ptype='["bars","histeps"]'
data-uaxis='["primary","secondary"]'
data-legend='["Verbrauch","Solar"]'
data-yunit="kW"
data-ytext="Verbrauch (kW)"
data-minvalue="10"
data-maxvalue="45"
data-yunit_sec="kw"
data-ytext_sec="Solar (kW)"
data-height="240"
data-yticks="auto"
data-minvalue_sec="auto"
data-maxvalue_sec="auto"
data-cursorgroup="1"
data-scrollgroup="1"
data-xticks="auto"
data-showlegend="true"
data-crosshair="true"
data-nofulldays="true"
data-daysago_start="0M"
data-daysago_end="now"
data-xticks_round="d"
>
</div>
Zur ersten Frage. Das geht relativ einfach, in dem Du data-style="SVGplot l0fill_gyr" angibst.
Zum Monatsplot. Hast Du für die Werte, die Du darstellen willst nur einen Wert im Logfile pro Monat oder gibt es den gleichen Wert öfter. Was ist der Zeitstempel für den Wert?
hi, danke muss ich mal testen.
So schauen die Logs aus:
2018-11-01_23:57:10 Hausstrom first_day: 0
2018-11-01_23:57:10 Hausstrom day: D01 Wd: 23.44 kWh Wm: 23.44 kWh C: 0.00 €
2018-11-02_23:57:12 Hausstrom first_day: 0
2018-11-02_23:57:12 Hausstrom day: D02 Wd: 28.24 kWh Wm: 28.24 kWh C: 0.00 €
2018-11-03_23:57:15 Hausstrom first_day: 0
2018-11-03_23:57:15 Hausstrom day: D03 Wd: 21.59 kWh Wm: 21.59 kWh C: 0.00 €
2018-11-04_23:57:19 Hausstrom first_day: 0
2018-11-04_23:57:19 Hausstrom day: D04 Wd: 31.83 kWh Wm: 31.83 kWh C: 0.00 €
2018-11-05_23:57:21 Hausstrom first_day: 0
2018-11-05_23:57:21 Hausstrom day: D05 Wd: 26.64 kWh Wm: 26.64 kWh C: 0.00 €
2018-11-06_23:57:22 Hausstrom first_day: 0
2018-11-06_23:57:22 Hausstrom day: D06 Wd: 22.55 kWh Wm: 22.55 kWh C: 0.00 €
Aktuell ist es halt so das tag 1 nichts ist ... das ist so ein wenig verschoben ich denke weil er das immer noch nicht nach Tagen aufteilt :/
Wenn Du "bars" als Style verwendest, dann liegt die Mitte des Balkens immer an dem Zeitpunkt auf der X-Achse, der bei dem jeweiligen Wert im Logfile steht. In Deinem Fall, da der erste Messwert, der ins Zeitfenster fällt, am Ende des 1.11. liegt, wird also die Mitte des Balkens auf das Ende des 1. Tages gelegt. Das ist eigentlich schon richtig und so gewollt (ich will im Plot eigentlich immer das anzeigen, was auch im Logfile steht, und daran nichts ändern).
Um das bei Dir jetzt zu verbessern, würde ich Dir vorschlagen, als data-ptype "fsteps" verwenden und zusätzlich durch Nutzung von Logproxy dafür zu sorgen, dass die Werte am Anfang und Ende entsprechend verlängert werden. Folgendes wäre zu tun:
1. In FHEM ein logproxy Device definieren.
define lp logProxy
2. Deine Chart Definition folgendermaßen anpassen:
statt
data-ptype='["bars","histeps"]'
data-ptype='["fsteps","histeps"]'
statt
data-logdevice='["EnergieM","EnergieM"]'
data-logdevice='["lp","EnergieM"]'
statt
data-columnspec='["6:Hausstrom.day:","4:AC.Power:.*$val=($fld[3]*/1000)"]'
data-columnspec='["FileLog:EnergieM,extend=60*60*24:6:Hausstrom.day:","4:AC.Power:.*$val=($fld[3]*/1000)"]'
hui das wird aber langsam kompliziert :/ mit den Plots geht eine Monatsansicht ganz einfach. So schaut es aktuell nach der änderung aus .. der 1. ist immer noch nicht am anfang.. Vielelicht muss der Zeitraum anders angepasst werden ?
log EnergieM
018-11-01_23:57:10 Hausstrom first_day: 0
2018-11-01_23:57:10 Hausstrom day: D01 Wd: 23.44 kWh Wm: 23.44 kWh C: 0.00 €
2018-11-02_23:57:12 Hausstrom first_day: 0
2018-11-02_23:57:12 Hausstrom day: D02 Wd: 28.24 kWh Wm: 28.24 kWh C: 0.00 €
2018-11-03_23:57:15 Hausstrom first_day: 0
2018-11-03_23:57:15 Hausstrom day: D03 Wd: 21.59 kWh Wm: 21.59 kWh C: 0.00 €
2018-11-04_23:57:19 Hausstrom first_day: 0
2018-11-04_23:57:19 Hausstrom day: D04 Wd: 31.83 kWh Wm: 31.83 kWh C: 0.00 €
2018-11-05_23:57:21 Hausstrom first_day: 0
2018-11-05_23:57:21 Hausstrom day: D05 Wd: 26.64 kWh Wm: 26.64 kWh C: 0.00 €
2018-11-06_23:57:22 Hausstrom first_day: 0
2018-11-06_23:57:22 Hausstrom day: D06 Wd: 22.55 kWh Wm: 22.55 kWh C: 0.00 €
2018-11-07_23:57:22 Hausstrom first_day: 0
2018-11-07_23:57:22 Hausstrom day: D07 Wd: 21.53 kWh Wm: 21.53 kWh C: 0.00 €
tabletuicode:
<div data-type="chart"
data-title="Akt: VERBRAUCH: $data{currval1} kW • Solar: $data{currval2} Watt"
data-title_class="titlewhite"
data-logdevice='["myLogProxy","myLogProxy"]'
data-columnspec='["FileLog:EnergieM,extend=60*60*24:6:Hausstrom.day:","FileLog:SOLAR.File,extend=60*60*24:4:Daily.Energy.Last:"]'
data-style='["ftui l2fill","ftui l0fill"]'
data-ptype='["fsteps","histeps"]'
data-uaxis='["primary","secondary"]'
data-legend='["Verbrauch","Solar"]'
data-yunit="kW (Verbrauch)"
data-ytext="Verbrauch (kW)"
data-minvalue="0"
data-maxvalue="45"
data-yunit_sec="kw (Solar)"
data-ytext_sec="Solar (kW)"
data-height="240"
data-minvalue_sec="0"
data-maxvalue_sec="45"
data-cursorgroup="1"
data-scrollgroup="1"
data-xticks="auto"
data-showlegend="true"
data-crosshair="true"
data-nofulldays="true"
data-daysago_start="0M"
data-daysago_end="now"
data-xticks_round="d"
>
</div>
Ein Bild im Anhang .. in diesme Falle noch eine Idee für eine bessere / schönere Darstellung ? Solar geht da ein wenig unter weil es dahinter liegt ;)
Vielen Dank
Gibt es denn in Deinem Logfile überhaupt Werte, die vor dem 1.11. liegen, oder sind die in einem anderen File?
Nein es gibt keine weiteren habe zum 1.11. damit angefangen. Ist das der Grund ? Die anderen Balken passen mit dem Corsor geschaut Perfekt in die Balken.
Aber die beschreibung unten ist auch nicht ganz so toll man muss teilweise die Tage erraten weil da so große Lücken sind kann man den da was dran machen?
Das erklärt zumindest warum das ganze logProxy Gedöns nichts bringt (ab Dezember sollte das dann klappen).
Ich nehme an, in deinem zweiten Satz redest Du über die X-Achse. Hier gibt es sehr viele Möglichkeiten zu formattieren. Bitte schau Dir mal das Chart Wiki dazu an. Wenn Du z.B. jeden Tag sehen willst, kannst Du data-xticks="1440" setzen (entspricht einem Tag in Minuten).
Danke das klappt :) Werde ich mir mal anschauen.
Kann man nicht einfach den 31. da wegmachen ? Also das er auch erst 1.1. Anzeigt ?
Versuche mal folgende beiden Einstellungen zusätzlich:
data-timeformat="dd.MM"
data-xtext_offset="720"
Dadurch wird der Text auf die Mitte des Tages geschoben, und am Anfang und Ende sollte nichts mehr zusätzlich stehen.
ja nun schaut das schon ganz gut aus :) Nur halt der Anfang nicht so schön aber ich warte mal auf den nächsten Monat.
@eki
Obwohl ich mit Deinem Chart-Modul inzwischen gut umgehen kann und fast alles mit Charts belegt habe, habe ich immer noch ein Verständnisproblem mit "data-columnspec". Vielleicht kannst Du an Hand des folgenden komplexen Beispiels kindgerecht (Die Sendung mit der Maus) erklären, wie man aus einem Log alles so rauspult und in data-columnspec umwandelt.
Es geht um meinen Mover, also einen Rasenmähroboter, der hat Wlan an Bord und ist gesprächig wie ein kleines Kind. Dafür sorgt das Modul 86_Robonect.pm.
Binär kommt der Zustand, es gibt ziemlich viele Zustände (schlafen, maehen, laden, viele weitere). Im Log ist addLog im Spiel. Daher gibt es keinen Kantenabbruch bei der Darstellung des aktuellen Zustands. Ein typisches SVGlog sieht so aus (unten).
Im Logfile passiert aber noch sehr viel mehr, im ersten Schritt geht es mir nur um Movie allgemein-status:
Ein Log-Auszug sieht so aus:
2018-10-20_08:06:59 Movie allgemein-status: schlafen << addLog
2018-10-20_08:06:59 Movie allgemein-batteriezustand: 100 << addLog
2018-10-20_08:06:59 Movie umwelt-temperatur: 35 << addLog
2018-10-20_08:06:59 Movie umwelt-feuchte: 21 << addLog
2018-10-20_08:08:04 Movie wlan-signal: -73
2018-10-20_08:08:04 Movie wlan-signal-prozent: 36
2018-10-20_08:11:05 Movie allgemein-status: maehen
2018-10-20_08:11:05 Movie maehen
2018-10-20_08:11:05 Movie allgemein-batteriezustand: 99
2018-10-20_08:11:05 Movie allgemein-dauer: 0
2018-10-20_08:11:05 Movie timer-status: aktiv
2018-10-20_08:11:05 Movie wlan-signal: -86
2018-10-20_08:11:05 Movie wlan-signal-prozent: 15
2018-10-20_08:11:59 Movie allgemein-status: maehen << addLog
2018-10-20_08:11:59 Movie allgemein-batteriezustand: 99 << addLog
2018-10-20_08:11:59 Movie umwelt-temperatur: 35 << addLog
2018-10-20_08:11:59 Movie umwelt-feuchte: 21 << addLog
2018-10-20_08:12:34 Movie allgemein-batteriezustand: 98
Der aktuelle Status ist also Movie allgemein-status: maehen.
Ich weiß aber leider nicht, wie ich das in "data-columnspec" umwandle. Gleiches gilt für wlan-signal-prozent und allgemein-batteriezustand und so weiter. Irgendwie fehlt (mir) "Die Sendung mit der Maus" - also die kindgerechte allgemeingültige Erklärung, wie man das macht.
Und die müsste danach eigentlich auch ins Wiki. (Das würde notfalls ich übernehmen.)
Nachtrag:
Vielleicht sollte ich noch zeigen, wie das in der SVG-Datei aussieht:
#FileLog_Movie 4:Movie.allgemein-status\x3a::$fld[3]=~"maehen"?0.9:0
#FileLog_Movie 4:Movie.allgemein-modus\x3a::$fld[3]=~"suche"?0.7:0
#FileLog_Movie 4:Movie.allgemein-status\x3a::$fld[3]=~"suche-base"?0.7:0
#FileLog_Movie 4:Movie.allgemein-status\x3a::$fld[3]=~"laden"?0.5:0
#FileLog_Movie 4:Movie.allgemein-status\x3a::$fld[3]=~"schlafen"?0.3:0
#FileLog_Movie 4:Movie.allgemein-status\x3a::$fld[3]=~"parken"?0.3:0
#FileLog_Movie 4:Movie.allgemein-status\x3a::$fld[3]=~"offline"?0.1:0
#FileLog_Movie 4:Movie.allgemein-status\x3a::$fld[3]=~"stoerung"?1.2:0
#FileLog_Movie 4:Movie.allgemein-status\x3a::$fld[3]=~"fehler"?1.2:0
#FileLog_Movie 4:Movie.allgemein-status\x3a::$fld[3]=~"schleife-fehlt"?1.2:0
plot "<IN>" using 1:2 axes x1y2 title 'mähen' ls l1fill lw 1.5 with steps,\
"<IN>" using 1:2 axes x1y2 title 'suche' ls l3fill lw 1.5 with steps,\
"<IN>" using 1:2 axes x1y2 title 'suche-base' ls l3fill lw 1.5 with steps,\
"<IN>" using 1:2 axes x1y2 title 'laden' ls l4fill lw 1.5 with steps,\
"<IN>" using 1:2 axes x1y2 title 'schlafen' ls l2fill lw 1.5 with steps,\
"<IN>" using 1:2 axes x1y2 title 'parken' ls l5fill lw 1.5 with steps,\
"<IN>" using 1:2 axes x1y2 title 'offline' ls l0fill lw 1.5 with steps,\
"<IN>" using 1:2 axes x1y2 title 'störung' ls l0fill lw 1 with steps,\
"<IN>" using 1:2 axes x1y2 title 'fehler' ls l0fill lw 1 with steps,\
"<IN>" using 1:2 axes x1y2 title 'schleife-fehlt' ls l0 lw 1 with steps
In https://forum.fhem.de/index.php/topic,57046.msg487056.html#msg487056 (https://forum.fhem.de/index.php/topic,57046.msg487056.html#msg487056) war so etwas ähnliches schon mal Thema. Dort habe ich auch ein bisschen versucht, den Armin oder Christoph (Sendung mit der Maus) zu geben ;) . Wichtig ist das "ausmaskieren der Anführungszeichen und Sonderzeichen. Neben columnspec ist noch data-yticks wichtig um Werte statt Zahlen an der Y-Achse darzustellen.
In Deinem Fall würde das Ganze in etwa so aussehen:
<div class="fitsize"
data-type="chart"
data-logdevice='["FileLog_partest"]'
data-columnspec='[
"4:Movie.allgemein-status\\x3a::$fld[3]=~\"maehen\"?0.9:0",
"4:Movie.allgemein-modus\\x3a::$fld[3]=~\"suche\"?0.7:0",
"4:Movie.allgemein-status\\x3a::$fld[3]=~\"suche-base\"?0.7:0",
"4:Movie.allgemein-status\\x3a::$fld[3]=~\"laden\"?0.5:0",
"4:Movie.allgemein-status\\x3a::$fld[3]=~\"schlafen\"?0.3:0",
"4:Movie.allgemein-status\\x3a::$fld[3]=~\"parken\"?0.3:0",
"4:Movie.allgemein-status\\x3a::$fld[3]=~\"offline\"?0.1:0",
"4:Movie.allgemein-status\\x3a::$fld[3]=~\"stoerung\"?1.2:0",
"4:Movie.allgemein-status\\x3a::$fld[3]=~\"fehler\"?1.2:0",
"4:Movie.allgemein-status\\x3a::$fld[3]=~\"schleife-fehlt\"?1.2:0"
]'
data-style='[
"ftui l0fill",
"ftui l1fill",
"ftui l2fill",
"ftui l4fill",
"ftui l5fill",
"ftui l0fill",
"ftui l1fill",
"ftui l2fill",
"ftui l3fill",
"ftui l4fill"
]'
data-ptype='["steps"]'
data-uaxis='["primary"]'
data-legend='[
"maehen",
"suche",
"suche-base",
"laden",
"schlafen",
"parken",
"offline",
"stoerung",
"fehler",
"schleife-feht"
]'
data-ytext=""
data-minvalue="0"
data-maxvalue="1.2"
data-yticks='[
[0.1,"offline"],
[0.3,"schlafen"],
[0.5,"laden"],
[0.7,"suche"],
[0.9,"mähen"],
[1.2,"fehler"]
]'
data-daysago_start="2018-10-20T00:00:00"
data-daysago_end="2018-10-21T00:00:00"
data-xticks="auto">
</div>
Achso noch etwas wie kann ich das Solar also den balken der aktuell im Hintergrund ist vor den anderen bekommen ?
Primary .. hab ich schon versucht kein erfolg. Oder muss ich wirklich die Werte/filelogs umdrehen oben ?
Genau so ist es, Du musst den Graphen, der im Vordergrund stehen soll, immer an den Anfang der Liste setzen. Das primary sagt nur, auf welche Achse es gemappt wird (links ist primary).
Suchbegriff: Robonect Modul FTUI Widget
@eki mit der Maus:
Wenn ich meinen goldenen Papp-Orden "Freundlicher Helfer" verleihen dürfte, heute würdest Du ihn bekommen: Danke!
Dein Chart-Widget ist derart mächtig, dass ... also ich habe ein Ergebnis. Und das möchte ich auch stolz vorführen, vielleicht hilft es ja auch anderen Rasenmährobotereigentümern (ein schönes Wort).
Ich habe mich übrigens nicht getraut, links mit rechts (primary, secondary) zu vertauschen. Zuerst sah das Ganze auch schwer nach Tuschkasten aus, also wechselte ich für Wlan-Signal und Akkuladestand auf dot. Lieber wäre mir ja eine schmale Linie. Ich hatte als ersten Eintrag an Stelle von "ftui l1dot" dann "ftui l1normal" genommen. Das ging aber fürchterlich schief (zweiter Screenshot): Ist das ein Bug oder soll er nach unten schwarz füllen? Bei Firefox kam übrigens (Screenshot) hinzu, dass er Sekunden später die rote Vollfläche auch noch wegschaltete. (Falls Du auf Bug testen willst, kann ich Dir gern das Movie-Log schicken.)
Aber bitte nicht falsch verstehen - so wie das jetzt (mit dot) ist, kann das eigentlich auch bleiben. Der zuständige Code - ich hoffe, das geht vor Deinen strengen Augen so durch:
<div class="topspace"
data-type="chart"
data-device='["Movie"]'
data-logdevice='["FileLog_Movie"]'
data-logfile="-"
data-columnspec='[
"4:wlan-signal-prozent",
"4:allgemein-batteriezustand",
"4:Movie.allgemein-status\\x3a::$fld[3]=~\"maehen\"?0.4:0",
"4:Movie.allgemein-modus\\x3a::$fld[3]=~\"suche\"?0.5:0",
"4:Movie.allgemein-status\\x3a::$fld[3]=~\"suche-base\"?0.45:0",
"4:Movie.allgemein-status\\x3a::$fld[3]=~\"laden\"?0.3:0",
"4:Movie.allgemein-status\\x3a::$fld[3]=~\"schlafen\"?0.2:0",
"4:Movie.allgemein-status\\x3a::$fld[3]=~\"parken\"?0.1:0",
"4:Movie.allgemein-status\\x3a::$fld[3]=~\"offline\"?0.05:0",
"4:Movie.allgemein-status\\x3a::$fld[3]=~\"stoerung\"?1:0",
"4:Movie.allgemein-status\\x3a::$fld[3]=~\"fehler\"?1:0",
"4:Movie.allgemein-status\\x3a::$fld[3]=~\"schleife-fehlt\"?1:0"
]'
data-style='[
"ftui l1dot",
"ftui l3dot",
"ftui l4fill",
"ftui l3fill",
"ftui l3fill",
"ftui l0fill","ftui l1dot" dann "ftui l1normal"
"ftui l6fill",
"ftui l5fill",
"ftui l1fill",
"ftui l2fill",
"ftui l2fill",
"ftui l2fill"
]'
data-height="240px"
data-ptype='["lines","lines","steps","steps","steps","steps","steps","steps","steps","steps","steps","steps"]'
data-uaxis='["secondary","secondary","primary","primary","primary","primary","primary","primary","primary","primary","primary"]'
data-legend='[
"Wlan",
"Akku",
"maehen",
"suche",
"suche-base",
"laden",
"schlafen",
"parken",
"offline",
"stoerung",
"fehler",
"schleife-feht"
]'
data-ytext=""
data-minvalue="0"
data-maxvalue="1"
data-yticks='[
[0.1,"offline"],
[0.2,"schlafen"],
[0.3,"laden"],
[0.45,"suche"],
[0.4,"mähen"],
[1.0,"fehler"]
]'
data-xticks="auto">
</div>
Der erste Screenshot ist das Ergebnis. Kann man mit leben, finde ich.
Der zweite Screenshot ist - wenn ich "ftui l1dot" durch "ftui l1normal" ersetze.
ftui "l1normal" gibt es nicht das heißt einfach "ftui l1". Diese Stile sind alle im ftui_chart.css definiert (am Ende). Darüber hinaus kann man auch alle normalen SVG Stile aus FHEM verwenden dann muss da "SVGplot" statt "ftui" davor gestellt werden also z.B. "SVGplot l0fill_gyr".
Noch ein Vorschlag (ist natürlich Geschmackssache). Wenn Du die Höhe für alle Deine States gleich setzt, dann sieht das Ganze nicht so wild aus (Du kannst z.B. überall den Maximalwert setzten, dann sagt Dir sozusagen die Hintergrund Farbe des Plots den Status. Nachteil wäre, dass Du dann die Legende anstatt die Y-Achse als "Erklärung" der Farben einblenden müsstest.
Zitat von: eki am 12 November 2018, 11:25:26
ftui "l1normal" gibt es nicht das heißt einfach "ftui l1".
<lacht> Ich hatte die Doku so verstanden. Stand der Hinweis wirklich schon da oder hast Du ihn jetzt über "kleine Änderung" ergänzt? - Aber künstlerisch wertvoll ist "ftui l1normal" schon ... ;)
Zitat von: eki am 12 November 2018, 11:25:26
Noch ein Vorschlag (ist natürlich Geschmackssache). Wenn Du die Höhe für alle Deine States gleich setzt, dann sieht das Ganze nicht so wild aus
Das ist so die Frage. Ich habe da auch schon überlegt. Ansich fand ich das so sehr aussagekräftig, allerdings waren da die weiteren Graphen noch nicht darübergelegt. Wenn ich alle Balken auf 100% ziehe, wird es ohne SVGplot-Farben nicht gehen. Ja, das ich die nutzen kann hatte ich schon an Hand der Doku verstanden.
Aber mal eine völlig andere Frage: Doku sagt: zwei Y-Achsen. Hmmm. Ich hätte aber (neben den Status-Balken) noch Ladezustand 0-100, Wlan-Zustand 0-100 (real 0-55!), Temperatur IM Gerät (geschätzt -5 - 50), Feuchte 0-100. Das sind vier Y-Achsen, ganz unabhängig davon ob ich die über die bunten Balken nagele oder in ein zweites Diagramm packe.
Bei SVGplot weiß ich (theoretisch, nur gelesen), dass das geht. Das geht zwar nicht mit dem SVGplot-Editor, aber schon, wenn man direkt an die SVG-Conf-Datei geht. (Den zugehörigen Thread müsste ich im Forum suchen.)
Es geht mir beim Chart-Widget primär gar nicht um die BESCHRIFTUNG der Y-Achsen. Sondern um die unterschiedliche Normierung: 0-100 / 0-55 / -5 - 40. Ist das darstellbar oder winkst Du mit dem nun-übertreibe-mal-nicht-Blick ab?
Du kannst sowohl rechts wie links so viele Y-Achsen definieren wie Du willst. Irgendwann ist dann halt kein Platz mehr für den Plot ;)
Siehe https://forum.fhem.de/index.php/topic,48450.msg776935.html#msg776935 (https://forum.fhem.de/index.php/topic,48450.msg776935.html#msg776935)
Hallo Allerseits,
ich habe eine kurze Frage zum Thema der Linien. Ich habe in der Doku keinen direkten Weg gefunden, um die Liniendicke anzugeben, außer mittels Gradienten im data-style.
Das funktioniert auch bei normalen Plots, aber anscheinend nicht bei Verwendung von ConstY über logProxy. Wenn ich den Style im Gradientenarray auf "fill" setze, ist die Linie incl. gefülltem Bereich zu sehen. Setze ich aber nur eine Zahl für die Liniendicke ein, ist die Linie verschwunden.
Sitzt das Problem vor oder hinter dem Bildschirm?
Unabhängig davon: Ich baue mir horizontale Hilfslinien ein, um z. B. bei Temperaturen einen Mindestbereich von 0-10 Grad darzustellen, auch wenn die Temperatur an einem Tag z. B. nur zwischen 5 und 7 Grad pendelt. Wenn ich das über data-minvalue und data-maxvalue steuere, dann bleibt der Maßstab starr, auch wenn die Temperatur über 10 Grad geht, richtig? Bleibt also nur der Weg über die besagten Hilfslinien oder über data-minvalue mit hinterlegtem dynamischem Reading, oder?
Vielen Dank im Voraus für jegliche Hilfestellung,
Gruß fruemmel
Zitat von: fruemmel am 16 Januar 2019, 17:17:58
ich habe eine kurze Frage zum Thema der Linien. Ich habe in der Doku keinen direkten Weg gefunden, um die Liniendicke anzugeben, außer mittels Gradienten im data-style.
Das funktioniert auch bei normalen Plots, aber anscheinend nicht bei Verwendung von ConstY über logProxy. Wenn ich den Style im Gradientenarray auf "fill" setze, ist die Linie incl. gefülltem Bereich zu sehen. Setze ich aber nur eine Zahl für die Liniendicke ein, ist die Linie verschwunden.
Sitzt das Problem vor oder hinter dem Bildschirm?
Das Problem saß wohl vor dem Bildschirm, mittels Gradienten geht es jetzt mit der Liniendicke auch bei ConstY.
Liege ich richtig, dass man bei Verwendung von ConstY nach wie vor nicht auf die Max- und Min-Werte der Graphen zugreifen kann (so wie mit $data{max1} im logProxy direkt)?
Ich hätte da mal eine Frage:
Wenn ich ein Chart darstelle und z.B. die y-Achse skaliert ist von 0 bis 100, der darzustellende Wert dann aber größer als 100 ist, verlässt der Graph das Chart. Malt also oben drüber.
Lässt sich das unterdrücken, dass z.B. der Graph dann nur "oben anstößt" ?
Diesen Fehler macht er aber nur, wenn FHEM das Chart im Hintergrund updatet. Wenn ich im Browser einen Refresh anstoße, wird der Graph oben gekappt (so wie ich mir das auch vorstelle),
Gruß
Siggi
Ich bin an dem Thema schon dran, das sollte eigentlich genau so gehen, wie Du sagst. Dazu habe ich das Clipping überarbeitet (SVGs und clipping Browser übergreifend hinzubekommen ist leider etwas kompliziert).
Allerdings habe ich eine etwas größere Baustelle angefangen (Unterstützung von Touch/Pinch zum interaktiven verschieben und Skalieren der Graphen innerhalb des Charts), bei der ich wohl noch ein paar Tage brauche.
Hallo @eki
ich habe auch noch was - in Form einer IP-Wetterstation ws980wifi. In der Grafik springen die Werte für temperature und humidity jeweils wild zwischen zwei Werten herum.
Das Device kennt u.a. folgende Readings:
* temperature
* temperatureInside
* humidity
* humidityInside
Ich will also temperature darstellen - recht gut erkennbar springt der Graph aber zwischen temperature und temperatureInside. Kann es sein, dass Du nur auf das Vorhandensein eines Strings in einem anderen String testest? Mir sieht das so aus.
Es wäre sehr schön, wenn Du das gelegentlich korrigieren könntest.
P.S: @choenig als Modulautor mit rein.
Das liegt mit ziemlicher Sicherheit an deiner Columnspec (die Daten werden über die Get Funktion der FileLog bzw. DbLog von FHEM geholt, das Chart stellt die dann nur so wie sie kommen dar). Im Log werden die Werte typischerweise so geschrieben, dass hinter dem Namen des Readings ein ':' steht und dann der eigentliche Wert kommt. In der Columnspec wird im zweiten Feld ein Suchstring eingegeben. Dort steht bei Dir wahrscheinlich nur 'temperature'. Das heißt dann dass FHEM das Logfile nach allen Zeilen Filtert, die 'temperature' enthalten. Dazu gehören dann sowohl solche mit 'temperature' als auch die mit 'temperatureInside'. Das Chart bekommt dann eine Liste mit den Werten für beides sortiert nach der Zeit und dadurch springt der Wert immer zwischen den beiden Readings hin und her.
Das Problem lässt sich dadurch lösen, dass Du nicht nur nach 'temperature' filterst sondern nach 'temperature:'. Da aber die ':' schon für die Columnspec als Trenner der einzelnen Felder vorgesehen sind, muss man den ':' noch speziell maskieren. Hier mal ein Beispiel:
aus data-columnspec="4:temperature:" müsstest Du data-columnspec="4:temperature\\x3a:" machen (3a ist der Hex Code für den ':')
Zitat von: eki am 08 März 2019, 10:46:54
Das liegt mit ziemlicher Sicherheit an deiner Columnspec
...
aus data-columnspec="4:temperature:" müsstest Du data-columnspec="4:temperature\\x3a:" machen (3a ist der Hex Code für den ':')
Danke-schön - habe verstanden.
Habe jetzt auch schon einige Zeit das Chart-Widget im Einsatz. Super Sache!
Jetzt hätte ich eine Frage, zu der ich hier leider nichts gefunden habe:
Ich zeige Wetterdaten an, und zwar Temperatur und Luftdruck.
Jetzt hätte ich gern noch den Windstärken-Verlauf drin.
Die Werte passen aber nicht zu den beiden vorhandenen Y-Achsen.
Kann ich eine dritte Kurve so skalieren, das diese auch dargestellt wird (ohne Zahlenwerte)?
Ja, das geht. Seit der hier https://forum.fhem.de/index.php/topic,48450.msg776935.html#msg776935 (https://forum.fhem.de/index.php/topic,48450.msg776935.html#msg776935) beschriebennen Version, die auch mit dem normalen update mitkommt, kann man auf beiden Seite beliebig viele y-Achsen definieren. Wie es geht kannst Du unter dem Link oben nachlesen (das Wiki muss mal wieder überarbeitet werden, bin aber aktuell sowieso an einer neuen Version dran, die wieder eingiiges mehr kann, z. B. mit Touch Gesten und er Maus verschieben und zoomen)
Super !
Genau das, was ich gesucht habe.
Vielen Dank :)
@eki - ich schon wieder ... :(
Meine schicke neue Wetterstation liefert ja Unmengen an Primärdaten. So kam ich auf die Idee, mehrere Grafiken auf einer FTUI-Unterseite (PageButton) darzustellen - die Grafiken haben also die gleiche Datenquelle. Wenn ich testweise beide Grafiken identisch befülle, geht das auch ganz schön.
Wenn ich allerdings in der zweiten Grafik andere Werte der gleichen Device darstellen möchte, wird die zweite Grafik gar nicht gefüllt - zudem dauert der Aufbau der gesamten Seite extrem langsam.
Ist das (momentan) gar nicht möglich? Oder mache ich mal wieder einen Fehler?
Wie üblich brauche ich zum klären ein bisschen mehr Infos. Bitte schick mal ein HTML Deiner Webseite. Grundsätzlich sehe ich aktuell keinen Grund warum das nicht klappen sollte.
Hallo @eki
Vielleicht kannst Du diese Frage beantworten? https://forum.fhem.de/index.php/topic,98514.msg918653.html#msg918653
Vielen Dank im Voraus :)
@eki
Zitat von: eki am 15 März 2019, 15:48:43
Grundsätzlich sehe ich aktuell keinen Grund warum das nicht klappen sollte.
Das hört sich grundsätzlich gut an.
Erste FTUI-Zeile wird korrekt dargestellt:
<li data-row="2" data-col="1" data-sizex="7" data-sizey="2">
<div class="top"
data-type="chart"
data-device='["ws980wifi","ws980wifi"]'
data-logdevice='["FileLog_ws980wifi","FileLog_ws980wifi"]'
data-logfile="CURRENT"
data-columnspec='["4:temperature\\x3a:","4:humidity\\x3a:"]'
data-style='["ftui l2","ftui l6"]'
data-height="175px"
data-uaxis='["primary","secondary"]'
data-legend='["Temperatur","Luftfeuchtigkeit"]'
data-ptype='["lines","lines"]'
data-yunit="°C"
data-ytext="Temperatur"
data-minvalue="-15"
data-maxvalue="40"
data-yunit_sec="%"
data-ytext_sec="Luftfeuchtigkeit"
data-yticks="5"
data-minvalue_sec="0"
data-maxvalue_sec="100"
data-cursorgroup="1"
data-scrollgroup="1">
</div>
</li>
Dann möchte ich eine Zeile darunter auch füllen - das Diagramm wird aufgebaut - es wird aber nichts dargestellt. Die Variablen für Readings sollten koorekt sein: Wenn ich die testweise in die obere Grafik übernehme, werden sie dargestellt. So sieht die zweite, nicht funktionierende aus (wie auch die dritte, die auch nicht funktioniert):
<li data-row="4" data-col="1" data-sizex="7" data-sizey="1">
<div class="top nobuttons"
data-type="chart"
data-device='["ws980wifi","ws980wifi","ws980wifi"]'
data-logdevice='["FileLog_ws980wifi","FileLog_ws980wifi","FileLog_ws980wifi"]'
data-logfile="CURRENT"
data-columnspec='["4:windkmh\x3a","4:windGustskmh\x3a","4:windDirection\x3a]'
data-style='["ftui l0","ftui l2","ftui l6dot"]'
data-height="85px"
data-uaxis='["primary","primary","secondary"]'
data-legend='["Wind","Spitzen","Richtung"]'
data-ptype='["lines","lines","steps"]'
data-yunit="x"
data-ytext="Wind"
data-minvalue="0"
data-maxvalue="20"
data-yunit_sec="x"
data-yticks="90"
data-minvalue_sec="0"
data-maxvalue_sec="360"
data-cursorgroup="1"
data-scrollgroup="1">
</div>
</li>
Wenn Du einen Auszug des Logfiles brauchst, lasse es mich bitte wissen.
Zitato sieht die zweite, nicht funktionierende aus (wie auch die dritte, die auch nicht funktioniert):
Schau Dir bitte mal die Columnspec für die zweite Zeile an (fehlendes " am Ende, \\ statt \, ...).
Statt:
data-columnspec='["4:windkmh\x3a","4:windGustskmh\x3a","4:windDirection\x3a]'
sollte dort so etwas wie:
data-columnspec='["4:windkmh\\x3a","4:windGustskmh\\x3a","4:windDirection\\x3a"]'stehen
Zitat von: amenomade am 15 März 2019, 16:14:39
Hallo @eki
Vielleicht kannst Du diese Frage beantworten? https://forum.fhem.de/index.php/topic,98514.msg918653.html#msg918653
Vielen Dank im Voraus :)
Ist beantwortet.
Zitat von: eki am 18 März 2019, 09:43:25
Schau Dir bitte mal die Columnspec für die zweite Zeile an
Das ist so peinlich ... je mehr man schaut, desto weniger sieht man. :(
Danke @eki !
P.S: Reine Punkte - wie geht das? Ich versuchte "ftui l6plot" in Verbindung mit "cubic", so genau sind die Parameter leider nicht erklärt. Ist jedenfalls noch nicht so, wie ich mir das vorstelle.
Hintergrund: Windrichtung. Auf der y-Achse sind 0-360 (jaja, 359). Ein Graph macht bei Windrichtung wenig Sinn, da die Messerwerte ja diskret sind. Es müssten also schon Punkte sein, damit entsteht eine Punktwolke.
Wenn Du die Werte als Punkte darstellen willst, dann solltest Du beim data-style irgendetwas mit ..sym verwenden (also z.B. "ftui l6sym" sonst werden die Punkte sehr klein.
Beim Plottyp (data-ptype) musst Du anstatt eines Linientyps (lines, steps, cubic ...) ein beliebiges Symbol (unterstützt werden Font-Awesome ('fa-...'), Open Automation ('oa-...') und FHEM-Symbole ('fs-...')) verwenden als Beisiel könntest Du also folgendes machen:
data-style='["ftui l6sym"]'
data-ptype='["fa-star"]'
dann werden die Symbole als blaue Sterne dargestellt.Ein normaler Punkt geht mit "fa-circle". Wenn die Symbole gefüllt werden sollen, dann musst Du beim data-style noch " fas" dahinter setzen. Ein gefüllter Kreis wäre dann:
data-style='["ftui l6sym fas"]'
data-ptype='["fa-circle"]'
Leider kann das Chart aktuell noch nicht die neuesten font awesome symbole, das muss ich mir noch mal anschauen, aber es werden eine ganze Menge unterstützt, einfach mal probieren.
Hallo @eki
[quote author=eki link=topic=45864.msg920948#msg920948 date=1552980778]
data-ptype='["fa-star"]'
...
data-ptype='["fa-circle"]'[/code]
[/quote]
Beide Symbole funktionieren (bei mir) nicht. In https://xxx:8083/fhem/ftui/icons_table.html werden sie dargestellt, in FTUI nicht. Eine ähnliche Situation hatte ich schon mal: "wi-rain" vs. "wi wi-rain". Das scheint hier aber nicht zu helfen.
Die Frage ist, ob Du dem Widget nicht doch einen schönen Punkt spenden könntest - ein Dateiaufruf weniger. Denn Meine Doppelgrafik der neuen Wetterstation baut jetzt schon unendlich langsam auf.
Wie üblich, ohne eine Kopie Deines Codes würde helfen (in dem Fall möglichst ein komplettes HTML mit dem Header), das Problem einzugrenzen, das mit den Symbolen sollte eigentlich funktionieren.
Deinen zweiten Hinweis verstehe ich nicht so ganz, wo soll ich denn etwas einsparen? Was meinst Du mit Dateiaufruf? Ich lasse mir da gerne helfen, aber ich versuche eigentlich keine unnötigen get oder sonstig Aufrufe zu machen.
Zitat von: eki am 20 März 2019, 08:57:00
Wie üblich, ohne eine Kopie Deines Codes würde helfen (in dem Fall möglichst ein komplettes HTML mit dem Header), das Problem einzugrenzen, das mit den Symbolen sollte eigentlich funktionieren.
Das wird schon sehr lang, ich muss leider gleich weg. Ok, das wäre auch aus anderem Grund sinnvoll: Da schaut dann ein neutraler Blick drüber.
Zitat von: eki am 20 März 2019, 08:57:00
Deinen zweiten Hinweis verstehe ich nicht so ganz, wo soll ich denn etwas einsparen? Was meinst Du mit Dateiaufruf? Ich lasse mir da gerne helfen, aber ich versuche eigentlich keine unnötigen get oder sonstig Aufrufe zu machen.
Naja, die Grafikdatei steht ja erstmal auf der Platte. Datei öffnen, Datei lesen, Datei schließen. Also für einen schnöden Punkt (bzw. Kreis) wäre es aus meiner ganz bescheidenen Sicht deutlich schlauer, wenn das Widget den Punkt gleich selbst setzen könnte. Und den Zirkus "da ist irgend ein Pfad falsch" spart man sich auch noch.
Jetzt fange ich an zu verstehen, und natürlich ;) geht das schon. Wenn Du tatsächlich nur einen Kreis und kein spezielles Symbol haben willst, dann geht das natürlich auch mit data-pytpe='["points"]'.
Das wird meines Erachtens aber nicht viel für die Ladezeit bringen, die Fonts werden einmal geladen (und dann normalerweise sogar im Cache des Browsers gehalten, wenn Du die Seite wieder aufrufst), da gewinnt man nicht viel. Warum das bei Dir so lange dauert liegt sicher an etwas anderem.
Ich muss zu meiner und zur Schande aller anderen Wiki Autoren gestehen, dass das bisher im Chart Wiki noch nicht beschrieben war, werde ich (oder andere Freiwillige) bei Gelegenheit ergänzen müssen.
Schick. - Wenn ich es nicht verdränge, trage ich das im Wiki nach.
Unabhängig davon würde ich Dir gern meinen Code zeigen - und das zuständige Log: Ich habe es bei diesem Wettersensor (ws980) geschafft, dass der Aufbau der Grafik gefühlte 10 Sekunden geht und anschließend die CPU-Last noch einige Zeit bei 100% ist.
Das ist ja eher untypisch für das/Dein Widget.
Zitat von: curt am 19 März 2019, 23:45:04
Hallo @eki
Beide Symbole funktionieren (bei mir) nicht. In https://xxx:8083/fhem/ftui/icons_table.html werden sie dargestellt, in FTUI nicht. Eine ähnliche Situation hatte ich schon mal: "wi-rain" vs. "wi wi-rain". Das scheint hier aber nicht zu helfen.
[...]
@curt: Das Problem hatte ich auch. Mit ein wenig Modifikation funktioniert es nun:
https://forum.fhem.de/index.php/topic,48450.msg901151.html#msg901151
Zitat von: eki am 20 März 2019, 09:10:55
Jetzt fange ich an zu verstehen, und natürlich ;) geht das schon. Wenn Du tatsächlich nur einen Kreis und kein spezielles Symbol haben willst, dann geht das natürlich auch mit data-pytpe='["points"]'.
Das funktioniert sehr fein. (Habe ich im Wiki ergänzt.)
Hast Du auch noch einen versteckten Parameter, um die Größe des Punkts zu beeinflussen? (Mir ist der zu groß.)
das geht über styles.
Wenn Du eine beliebige Größe einstellen willst, ist das Einfachste, einen der '..sym' Einträge aus dem ftui_chart.css heraus zu kopieren, umzubenennen und angepasst (stroke-width gibt die Dicke der Punkte vor) in Deine fhem-tablet-ui-user.css Datei hinein zu setzen (vorausgesetzt, Du hast die auch in dein HTML eingebunden). Der Eintrag in fhem-tablet-ui-user.css würde dann z.B. so aussehen:
.ftui.l99sym { stroke:#DDA400; stroke-width:8px; fill:none;}
In der Chart Definition müsste dann natürlich bei data-style entsprechend ftui l99sym stehen.
@eki
Das hatte ich mir jetzt einfacher vorgestellt, ohne Bruch auf irgendwelche individuellen Dinge. Langfristig halte ich sowas für gefährlich.
Der Weg zur Hölle ist mit guten Vorsätzen gepflastert - schau mal, wie schön das jetzt mit meiner Wetterstation aussieht.
Oben ist nebst Temperatur und Luftfeuchte in türkis der Regen und gelb die kaum vorhandene Sonne.
Unten ist die Windgeschwindigkeit, rot sind die Windspitzen dazu. Die himmelblauen Punkte zeigen die Windrichtung (wenn gar kein Wind weht, ergibt das einen Strich, weil der Windzeiger in immer gleicher Position steht).
Leider verstehe ich nicht was Du meinst. Was ist gefährlich und was meinst Du mit "Bruch auf irgendwelche individuellen Dinge".
Mein Grundkonzept war mal, wie man das bei HTML eben so macht, alles was den Inhalt des Charts betrifft kommt ins HTML und alles, was mit Templates der Details des Aussehens zu tun hat, ins CSS. Die als Standard mitgelieferten Templates (im ftui-chart.css) kann man erweitern, indem man eben Zusätzliche ins user CSS einfügt. Wo soll da eine Gefahr liegen.
Deine Charts sehen übrigens sehr gut aus und sind sicher schon "hohe Schule" was das Ausnutzen der Features vom Chart Widget betrifft. Da muss man dann eben auch schon mal ein bisschen in die Trickkiste greifen ;-).
Ich dachte an ein Attribut für die Dicke/Stärke/Durchmesser des Kreises/Punktes innerhalb Deines Widgets.
Sowas hier
.ftui.l99sym { stroke:#DDA400; stroke-width:8px; fill:none;}
halte ich für mich für gefährlich: Aus meiner Sicht ist das ein Philosophie-Bruch. Und vor allem sehe ich irgendwann nicht mehr durch ... mal hier was zu ändern, mal da was zu ändern, mal dort oder da drüben ...
Ja, das ist eine eher akademische Diskussion.
(Die angehängte Grafik sollte nicht zeigen, dass irgendwas nicht ginge - das sollte im Gegenteil so eine Art Erfolgsmeldung sein: "Schau mal wie schön das jetzt ist.")
Für mich wäre gerade das direkte Ändern der Strichstärke im HTML ein Philosophi-Bruch. Aber ich stimme Dir zu, das ist Ansichtssache und eher akademisch.
Zitat von: curt am 29 März 2019, 21:56:05
Frage @curt, in dem Bild sieht man das untere chart hat keinen header (Navigation und co),ist da das untere chart mit dem oberen Verknüpft?
Ich würde das auch gerne haben, im oberen Chart Temperaturen und im unteren die Feuchte dazu. (jeweils 4)
Ist relativ einfach. Beim unteren Chart die Klasse 'nobuttons' setzen. Und für die Synchronisation bei beiden Charts folgende Settings machen:
data-scrollgroup = "1"
data-cursorgroup = "1"
Setzen.
hmmmm, alkso nobuttons und das scrollen und zoomen funktioniert.
Allerdings das data-cursorgroup="1" bewirkt nichts, das solle ja bewirken, das wenn ich oben den Cursor aktiviere auch im unteren Chart den Cursor sehe oder?
Gibt es schon eine Lösug für das data-cursorgroup ?
Müsste eigentlich funktionieren. Hast Du die Cursor bei beiden Charts denn auch eingeschaltet (auf den Text Cursor klicken)
ah okay, ja so funktioniert es, ich dachte ich kann mir die Buttons beim zweiten sparen, da habe ich das nobuttons drinnen.
aber wenn ich den cursor einschalte oder per data-crosshair="true" dann funktioniert es
Die Fonts für rund um das chart sind leider völlig anders als die anderen welche in ftui habe.
Kann mir jemand sagen wo ich das anpassen kann?
ftui_chart.css
ich bekomme beim öffnen des charts folgende Fehlermeldung angzeigt:
widgt_chart.js:4437 Type Error: window.checkResizeListener is not a function
Die Fehlermeldung wir bei einem meiner Tablets angezeigt und bei meinem Notebook.
Was mich verwundert ist, das ich bei meinem anderen Tablet keine Fehlermeldung angezeigt bekomme.... :o
<div data-type="chart"
data-device='["Wohnzimmer_Thermostat_Climate","Heizkreis1"]'
data-logdevice='["FileLog_Wohnzimmer_Thermostat","Heizkreis1_Log"]'
data-logfile="-"
data-columnspec='["4:measured-temp","4:level"]'
data-style='["ftui l0","ftui l5dot"]'
data-ptype='["quadraticSmooth","steps"]'
data-uaxis='["primary","secondary"]'
class="normal nobuttons"
data-width="700px"
data-height="130px"
data-minvalue="17"
data-maxvalue="26"
data-yticks="2"
data-xticks="180"
data-daysago_start="1"
data-ytext="Temperatur"
data-ytext_sec="Schaltzustand">
</div>
Ich glaube nicht das es am Code liegt. Ich hoffe ihr könnt mir da weiter helfen...
Gruß
Kalle
Bei mir ist in widget_chart.js der Aufruf von window.checkResizeListerner in der Zeile 4439
Hast Du die Datei irgendwie editiert?
hatte anscheinend nicht die aktuellste Version.
Habe nun auf die aktuelle Version upgedated und bekomme nun auch den Fehler in Zeile 4439 angezeigt.
Lässt sich das beheben, bzw. was will mir diese Fehlermeldung sagen?
Gruß
Kalle
Ich habe eine neue Version hier https://forum.fhem.de/index.php/topic,48450.msg401006.html#msg401006 (https://forum.fhem.de/index.php/topic,48450.msg401006.html#msg401006) eingestellt. Kann mal jemand schauen, ob es damit weg ist.
@eki
Ich möchte eine (ggf. mehrere) waagerechte Linien in einen Chart einziehen.
Mir ist klar, wie Gitter funktioniert, ich meine etwas anderes: Eine möglicherweise fette, möglicherweise rote waagerechte Linie, deren Wer ist selbst bestimme.
Geht das jetzt schon irgendwie?
Ja, das geht mit logproxy (gern auch mal das Wiki dazu anschauen). Die Definition sollte in Etwa so aussehen (davon ausgehend, dass in FHEM ein logProxy Device existiert, das "logP" heißt und dass es ein Device mit dem Namen "test" gibt in dessen Reading "tval" der zu plottende Wert steht. Falls Du wirklich eine Kostante fest vorgeben willst, kannst Du natürlich statt "ReadingsVal..." auch einfach eine Zahl einfügen):
data-logdevice = "logP"
data-columnspec = "ConstY:ReadingsVal(\"test\",\"tval\",\"0\")"
Auf die Gefahr, dass meine Frage sicher schon gestellt wurde, ich jedoch die Antwort nicht finden konnte möchte ich gern folgendes erfragen:
Mein Chart soll Werte der letzten 30 Tage darstellen. Die FileLog Dateien sind monatlich abgespeichert, d.h. seit dem 01. März wird in die Datei "Log_Gaszaehler2359-2020-03.log" täglich 1 Wert geschrieben. Zuvor hieß die (noch immer existente!) Datei "Log_Gaszaehler2359-2020-02.log"
Heute sehe ich jedoch im Chart ausschließlich Daten beginnend dem 01. März. Die Werte der vorherigen Datei werden nicht dargestellt.
Hier der HTML-Code:
<div data-type="chart"
data-device="Gaszaehler"
data-logdevice='["Log_Gaszaehler2359","Log_Durchschnittstemp"]'
data-columnspec='["4:EnergyCostDay2359:","4:Tagesdurchschnittstemperatur:"]'
data-style='["ftui l2","ftui l4fill"]'
data-ptype='["lines","lines"]'
data-uaxis='["primary","secondary"]'
data-legend='["Gaskosten [EUR]","Außentemp[°C]"]'
data-legendpos="right"
data-showlegend="true"
data-yunit="€"
data-ytext="Gaskosten"
data-minvalue="1"
data-maxvalue="10"
data-yunit_sec="°C"
data-ytext_sec="Außentemp"
data-height="350"
data-yticks="auto"
data-minvalue_sec="-5"
data-maxvalue_sec="30"
data-nofulldays="true"
data-daysago_start="30d"
data-daysago_end="-1"
data-cursorgroup="1"
data-scrollgroup="1"
data-xticks="auto">
</div>
Muss ich das FileLog etwa ändern auf 1 Datei pro Jahr ? (wobei sich dann mein Problem auf den Jahreswechsel verschieben würde)
Ja, die Frage wurde schon mehrfach gestellt. Das Problem ist nicht das Chart sondern FHEM und dort die FileLog Get Funktion. Es gibt verschiedene Möglichkeiten:
1. Im FileLog das Attribut createGluedFile setzen. Das wird aber bei großen Dateimengen manchmal etwas langsam. Außerdem habe ich festgestellt, dass das Feature von FHEM irgendwie noch relativ viele Probleme macht. Abhängig von den genauen Start und Endwerten klappt es manchmal und manchmal nicht. Ich werde das mal ins Forum schreiben, vielleich kann Rudi da ja was verbessern.
Damit dieser Fall funktioniert, musst Du auf jeden Falls data-logfile="CURRENT" zu Deiner Definition dazu fügen.
2. Du machst 2 Graphen mit verschiedenen Logfiles im gleichen Chart, das müsste man dann aber jeden Monat ändern (ist nicht sehr praktikabel, fürchte ich).
3. Eventuell geht das auch mit logproxy, habe ich aber nicht genauer untersucht.
Ich könnte natürlich im Chart irgendetwas einbauen, das versucht, die jeweiligen richtigen Logfiles zu holen, das wäre aber recht kompliziert udn würde wahrscheinlich auch nicht immer funktionieren. Ich werde erst mal versuchen das Problem mit "createGluedFile" zu klären.
OKay danke.
Ich werde die betreffenden Logfiles bis auf Weiteres auf jährlich verändern, damit hält sich das "Problem" dann erstmal in Grenzen.
probiers erst mal mit data-logfile="CURRENT", das wird zumindest einen Teil des Problems lösen (nur wenn mehrere Logfiles gleichzeitig in einem Plot vorkommen, habe ich die Probleme gesehen, außerdem habe ich festgestellt, dass Rudi im FileLog eine Korrektur gemacht hat, eventuell verbessert das das Problem auch schon). In der nächsten Chart Version wird data-logfile="CURRENT" auch der default sein.
P.S.: wenn du damit noch ein bisschen rumtestest, dann hilft mir das auch um mögliche weitere Probleme im Chart zu erkennen und zu beseitigen.
Feedback:
Deine genannte Option funktioniert. Allerdings nur in Kombination mit "createGluedFile=1" im FileLog Device.
Ohne createGluedFile=1:
Im Plot wird nur die alte Logfile ausgelesen, in meinem Beispiel vom Februar 2020.
Mit createGluedFile=1:
Im Plot wird die alte und die neue Logfile gemeinsam ausgelesen
Zitat
Autor: eki
« am: 01 März 2020, 13:18:32 »
Ich habe eine neue Version hier https://forum.fhem.de/index.php/topic,48450.msg401006.html#msg401006 eingestellt. Kann mal jemand schauen, ob es damit weg ist.
ich bin leider jetzt erst dazu gekommen die neue Version zu teste.
Fazit: Gleiche Fehlermeldung, nur eine andere Zeile....
ich bekomme nun beim öffnen des charts folgende Fehlermeldung angzeigt:
widgt_chart.js:5150 Type Error: window.checkResizeListener is not a function
Ich klinke mich mal hier ein, da mein Problem thematisch sicher hier gut aufgehoben ist:
Die Darstellung meiner Plots unter FTUI ist viel zu schmal (s. Anlage).
Dieser Fehler taucht nur auf dieser Seite auf wobei die Menüleiste im korrekten Größenverhältnis dargestellt wird.
ich schließe daraus, dass, da kein globales Problem auftritt, es mit dem Chart selbst zu tun hat - aber, das gleiche Chart zeigt mein Firefox (PC) formatfüllend.
Im Programmiercode kann ich keine Angaben zum Format erkennen:
<!DOCTYPE html>
<html>
<head></head>
<body>
<div class="page" id="1_Heizung">
<div class="gridster">
<ul>
<li data-row="1" data-col="1" data-sizex="9" data-sizey="10">
<header>Heizung</header>
<div class="chart">
<div class="row">
<div class="cell">
<div data-type="chart"
data-device="Gasheizung"
data-logdevice="HeizungsLog"
data-logfile="CURRENT"
data-columnspec='["Gasheizung:WW-Solltemperatur","Gasheizung:WW-Isttemperatur","Gasheizung:Kesseltemperatur","Gasheizung:Aussentemperatur","Gasheizung:Brenner_Modulation"]'
data-style='["ftui l6dot","ftui l6","ftui l0","ftui l4","ftui l2"]'
data-ptype='["lines","lines","lines","lines","cubic"]'
data-legend='["WW-Solltemperatur","WW-Isttemperatur","Kesseltemperatur","Außentemperatur","Brenner-Modulation [%]"]'
data-daysago_start="1"
data-daysago_end="-1"
data-showlegend="true"
data-minvalue="-20"
data-maxvalue="80"
data-minvalue_sec="0"
data-maxvalue_sec="100"
data-yunit="°C"
data-ytext="Temperatur"
data-yunit_sec="%"
data-ytext_sec="Prozent"
data-uaxis='["primary","primary","primary","primary","secondary"]'>
</div>
</div>
</div>
<div class="row">
<div class="cell">
<div data-type="chart"
data-device="Gasheizung"
data-logdevice="HeizungsLog"
data-logfile="CURRENT"
data-columnspec='["4:HK1-Vorlauftemperatur.:0:","4:HK2-Vorlauftemperatur.:0:","4:HK1-Zirkulationspumpe:0:$fld[3]=($fld[3]=~\\x22on\\x22?28:0)","4:HK2-Zirkulationspumpe:0:$fld[3]=($fld[3]=~\\x22on\\x22?27:0)","3:KG_Funkschalter_ZirkuPumpe:0:$fld[2]=($fld[2]=~\\x22on\\x22?26:0)"]'
data-yticks_sec='[[20,"off"],[28,"on"]]'
data-style='["ftui l0","ftui l1","ftui l2","ftui l4","ftui l6fill"]'
data-ptype='["lines","lines","lines","lines","histeps"]'
data-legend='["VL Heizkörper","VL Fussbodenheizung","Pumpe Heizkörper","Pumpe FBH","WW-Zirku-Pumpe"]'
data-uaxis='["primary","primary","secondary","secondary","secondary"]'
data-minvalue="20"
data-maxvalue="70"
data-minvalue_sec="20"
data-maxvalue_sec="70"
data-daysago_start="1"
data-daysago_end="-1"
data-showlegend="true"
data-yunit="°C"
data-ytext="Temperatur"
data-ytext_sec="Pumpenstatus">
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</body>
</html>
ebenfalls im .gplot-File nicht
# Created by FHEM/98_SVG.pm, 2020-10-20 06:15:36
set terminal png transparent size <SIZE> crop
set output '<OUT>.png'
set xdata time
set timefmt "%Y-%m-%d_%H:%M:%S"
set xlabel " "
set title 'VL-Temperaturen und Pumpenstatus'
set ytics
set y2tics "on" 30, "off" 20
set grid ytics
set ylabel "Termperaturen"
set y2label "Status"
set yrange [20:70]
set y2range [20:70]
#HeizungsLog 4:Gasheizung.HK1-Vorlauftemperatur\x3a::
#HeizungsLog 4:Gasheizung.HK2-Vorlauftemperatur\x3a::
#HeizungsLog 4:Gasheizung.HK1-Zirkulationspumpe\x3a::$fld[3]=($fld[3]=~'on'?31:0)
#HeizungsLog 4:Gasheizung.HK2-Zirkulationspumpe\x3a::$fld[3]=($fld[3]=~'on'?29:0)
#HeizungsLog 3:KG_Funkschalter_ZirkuPumpe.*::$fld[2]=($fld[2]=~'on'?28:0)
#HeizungsLog 4:EG_Heizkoerperthermostat_Buero.valveposition\x3a::
plot "<IN>" using 1:2 axes x1y1 title 'VL Heizkörper' ls l4 lw 1 with lines,\
"<IN>" using 1:2 axes x1y1 title 'VL FBH' ls l5 lw 1 with lines,\
"<IN>" using 1:2 axes x1y2 title 'VL-Pumpe Heizkörper' ls l0 lw 1 with lines,\
"<IN>" using 1:2 axes x1y2 title 'VL-Pumpe FBH' ls l1 lw 1 with lines,\
"<IN>" using 1:2 axes x1y2 title 'Zirku-Pumpe WW' ls l2fill lw 1 with steps,\
"<IN>" using 1:2 axes x1y2 title 'Thermostat HK Büro' ls l3 lw 1 with lines
oder übersehe ich etwas?
Kürzlich wurden die Grafiken noch korrekt angezeigt; ich hatte in den vergangenen Tage ein wenig an der Zeile 'data-columnspec' des 2. Chart gearbeitet. Irgendwann danach bemerkte ich später die Grafikänderung - muss aber nicht damit zusammenhängen.
Hat jemand einen Tipp?
Kannst Du mal probieren, ob sich was ändert, wenn Du bei den Chart divs noch class="fitsize" hinzufügst.
Uuuii, dann schrumpft die Höhe der Graphen auf jeweils ca. 1 cm, nur die Legenden bleiben gleich groß :-\
Das hört sich jetzt so ein bisschen wie Stochern im Dunklen an, aber ich kenne leider zu wenig von Deiner Umgebung (welcher Browser, wie sieht Dein Gesamtaufbau aus, welche Version von FTUI und Chart, ...) aber versuche mal die folgenden beiden Parameter bei den Chart divs:
data-width="100%"
data-height="50%"
Wieder einmal Danke eki für deine Mühe,
ich habe bereits heute Morgen bis gerade ebend in mühevoller Kleinarbeit versucht, meine Änderungen auf Basis eines Backups von vor 10 Tagen zurückzuverfolgen.
Dabei ist mir irgendwann aufgefallen, dass ich unter dem <header> statt
<div class="sheet"> den Code
<div class="chart">
verwendet habe. Das lässt sich am Ende dann leicht rekonstruieren und die beiden Versionen vergleichen.
Moin Moin...
ich hab da mal ein Problem wo ich nicht weiterkommen... Ich hab folgendes Widget erstellt:
<div data-type="chart" data-device="Stromzaehler1" data-logdevice="Stromzaehler1Log" data-logfile="-" data-columnspec='["Stromzaehler1:Leistung\\x3a","Stromzaehler1:ZStandHourLast\\x3a"]'
data-style='["ftui l0","ftui l2"]' data-uaxis='["primary","secondary"]' data-ytext="Leistung" data-yunit="W" data-ytext_sec="Verbrauch" data-yunit_sec="kWh"
data-legend='["Leistung Haus","Verbrauch Haus"]'></div>
Dieses flutet mir das FHEM-Log mit dieser Fehlermeldung:
PERL WARNING: Argument "Stromzaehler1" isn't numeric in subtraction (-) at ./FHEM/92_FileLog.pm line 884, <GEN32596> line 19
Woran liegt das? Ich sehe nur Zahlen mit denen gearbeitet wird. Das Diagramm wird auch richtig angezeigt...
MfG zebbl
Ich vermute das kommt von der columnspec. Die sieht für mich nach LogDB aus, da Du ja offensichtlich Logfiles verwendest (zumindest kommt daher die Fehlermeldung), musst Du bei columnspec noch eine Zahl an den Anfang stellen, die besagt, in welcher Spalte (beginnend bei 1, Trenner is das Leerzeichen) das auszulesende Datum steht. Also so etwas wie:
data-columnspec='["x:Stromzaehler1.Leistung\\x3a","x:Stromzaehler1.ZStandHourLast\\x3a"]'
Was das x ist musst Du selbst anhand Deiner Logeinträge feststellen.
Hallo zusammen,
ich hatte ein über lange Zeit funktionierendes Diagramm zur Darstellung des "Intraday"-Windwetters. Seit ein paar Wochen (genau kann ich es leider nicht sagen) war mir aufgefallen, daß die Beschriftungen der Y-Achsen nicht mehr angezeigt werden. Ich dachte, es hätten sich vielleicht die Daten von Proplanta geändert, aber nein, die Daten kommen im selben Format wie immer und werden auch korrekt aufgetragen. Nur werden eben die Y-Achsen nicht mehr beschriftet, der Code ist wie folgt:
<div class="normal"
data-type="chart"
data-logdevice='["logProxy","logProxy","logProxy"]'
data-logfile="CURRENT"
data-columnspec='["Func:logProxy_proplanta2Plot(\\x22WetterFC\\x22,\\x22wind_\\x22,$from,$to,0,\\x22hour\\x22)","Func:logProxy_proplanta2Plot(\\x22WetterFC\\x22,\\x22gust_\\x22,$from,$to,0,\\x22hour\\x22)","Func:logProxy_proplanta2Plot(\\x22WetterFC\\x22,\\x22windDir_\\x22,$from,$to,0,\\x22hour\\x22)"]'
data-style='["ftui l6","ftui l5","ftui l4"]'
data-ptype='["quadraticSmooth","quadraticSmooth","quadraticSmooth"]'
data-uaxis='["primary","primary","secondary"]'
data-legend='["Windgeschwindigkeit","max Wind","Windrichtung"]'
data-yunit="km/h"
data-ytext="Wind km/h"
data-minvalue="0"
data-maxvalue="120"
data-yticks='[[0,"0 Bft"],[1.85,"1 Bft"],[7.41,"2 Bft"],[12.96,"3 Bft"],[20.37,"4 Bft"],[29.63,"5 Bft"],[40.74,"6 Bft"],[51.86,"7 Bft"],[62.97,"8 Bft"],[75.93,"9 Bft"],[88.9,"10 Bft"],[103.71,"11 Bft"],[118.53,"12 Bft"]]'
data-yunit_sec="Grad"
data-ytext_sec="Windrichtung Grad"
data-yticks_sec='[[0,"Nord"],[90,"Ost"],[180,"Süd"],[270,"West"]]'
data-yticks_prio="secondary"
data-minvalue_sec="0"
data-maxvalue_sec="360"
data-nofulldays="true"
data-daysago_start = "0"
data-daysago_end = "-1"
data-crosshair="true"
data-cursorgroup="1"
data-scrollgroup="1"
data-showlegend="true"
data-height="300"
data-xticks="auto">
</div>
Hat jemand eine Ahnung ob sich da was am Widget geändert hat?
Gruß,
doc.
Kannst Du mal schauen, was passiert, wenn Du die Werte bei den Ticks auch in Anführungszeichen setzt?
Also:
data_yticks='[["0","0 Bft"...
Zitat von: eki am 27 Dezember 2021, 11:51:03
Kannst Du mal schauen, was passiert, wenn Du die Werte bei den Ticks auch in Anführungszeichen setzt?
Leider keine Änderung...wenn ich es auf auto stelle, dann kommt die Standardbeschriftung, aber sobald ich versuche über data_yticks das array zu verwenden, sehe ich nur den untersten Wert. Ich hab jetzt sogar mal alle Einheiten etc. entfernt, es funktioniert schlicht nicht mehr...ich hab's jetzt sogar mal auf das Minimum reduziert:
<div class="normal"
data-type="chart"
data-logdevice='["logProxy","logProxy","logProxy"]'
data-logfile="CURRENT"
data-columnspec='["Func:logProxy_proplanta2Plot(\\x22WetterFC\\x22,\\x22wind_\\x22,$from,$to,0,\\x22hour\\x22)","Func:logProxy_proplanta2Plot(\\x22WetterFC\\x22,\\x22gust_\\x22,$from,$to,0,\\x22hour\\x22)","Func:logProxy_proplanta2Plot(\\x22WetterFC\\x22,\\x22windDir_\\x22,$from,$to,0,\\x22hour\\x22)"]'
data-style='["ftui l6","ftui l5","ftui l4"]'
data-uaxis='["primary","primary","secondary"]'
data-yticks_sec='[["0","Nord"],["90","Ost"],["180","Süd"],["270","West"]]'
>
</div> Sobald ich die letzte Zeile hinzufüge (egal ob mit Anführungszeichen oder ohne), verschwinden alle Achsenbeschriftungen bis auf die erste (die 0 ganz unten).
Also bei mir funktioniert das mit genau Deiner Definition einwandfrei (siehe angehängten Plot, der mit einer Kopie genau Deiner Definition gemacht wurde). Welche Chart Version benutzt Du (Datum bzw. Header Info im widget_charts.js File).
/* FTUI Plugin
* Copyright (c) 2015-2017 Kurt Eckert
* Under MIT License (http://www.opensource.org/licenses/mit-license.php)
*/
/* Version 2.11.0
/* Compatible FTUI Version >= 2.7.2
/* global ftui:true, Modul_widget:true, Powerange:true */
Kannst Du mal die angehängte Version nehmen (nach dem Austausch der Files musst Du möglicherweise den Browser Cache löschen, damit die Änderung wirksam wird).
Zitat von: eki am 20 April 2022, 16:56:41
Kannst Du mal die angehängte Version nehmen (nach dem Austausch der Files musst Du möglicherweise den Browser Cache löschen, damit die Änderung wirksam wird).
Funktioniert :o
Aber
update check https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt" hatte mir angezeigt:
Downloading https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt
nothing to do...
Ja, ich habe diese Version per pull request an setstate gegeben, ist aber noch nicht eingecheckt. Kommt hoffentlich demnächst auch mit dem normalen update.
Zitat von: eki am 05 März 2020, 10:06:06
Ja, die Frage wurde schon mehrfach gestellt. Das Problem ist nicht das Chart sondern FHEM und dort die FileLog Get Funktion. Es gibt verschiedene Möglichkeiten:
1. Im FileLog das Attribut createGluedFile setzen. Das wird aber bei großen Dateimengen manchmal etwas langsam. Außerdem habe ich festgestellt, dass das Feature von FHEM irgendwie noch relativ viele Probleme macht. Abhängig von den genauen Start und Endwerten klappt es manchmal und manchmal nicht. Ich werde das mal ins Forum schreiben, vielleich kann Rudi da ja was verbessern.
Damit dieser Fall funktioniert, musst Du auf jeden Falls data-logfile="CURRENT" zu Deiner Definition dazu fügen.
2. Du machst 2 Graphen mit verschiedenen Logfiles im gleichen Chart, das müsste man dann aber jeden Monat ändern (ist nicht sehr praktikabel, fürchte ich).
3. Eventuell geht das auch mit logproxy, habe ich aber nicht genauer untersucht.
Ich könnte natürlich im Chart irgendetwas einbauen, das versucht, die jeweiligen richtigen Logfiles zu holen, das wäre aber recht kompliziert udn würde wahrscheinlich auch nicht immer funktionieren. Ich werde erst mal versuchen das Problem mit "createGluedFile" zu klären.
Hallo eki,
ich stehe vor dem gleichen Problem... createGluedFile macht den Raspi3 extrem langsam... ich könnte aber auch mit einer Möglichkeit leben, dass ich im FTUI, per dropdown das jeweilige Filelog auswähle und anzeigen lasse... aber geht sowas überhaupt mit dem chart-Widget? wenn ja, hättest ein Stichwort, wo nach ich suchen muss?
Danke!!
Das Problem besteht nur dann, wenn man in einem Plot mehrer Files mischt (also z.B wenn mehrere Monate dargestellt werden sollen und die Files pro Monat angelegt sind). Für dieses Problem habe ich aktuell keine Lösung (außer createCluedFile).
Wenn Du nur verschiedene Zeitbereiche komfortabel auswählen willst, gibt es das Feature "data-timeranges" im Chart Widget damit kannst Du Dir beliebige Zeiträume in ein drop down Menu legen und dann auswählen. Beim Wechsel auf einen anderen Zeitraum wird dann auch das richtige File geholt (mit der oben genannten Einschränkung)
Hi Eki,
danke für die Rückmeldung...
Ich habs fast befürchtet... Mit createGluedFile hat der Raspi Probleme, da auch die Datenmenge nicht gerade klein ist...
Bleibt wohl nur der Umweg über dblog und grafana....
LG
Ich stehe gerade etwas auf dem Schlauch mit einem meiner charts.
Bei filelog ist das Thema data-columnspec klar... 4:xxx
Aber wie macht man das bei LogDB/DbLog, wenn man über das statistic Modul eben Werte
statEnergy Hour: 0 Day: 29 Month: 29 Year: 29 (since: 2023-01-29_16:53:20 )
in der Datenbank hat?
data-type="chart"
data-device="FBDECT_fbahahttp_08761_0019041"
data-get="statEnergy"
data-logdevice='["DbLog"]'
data-logfile="HISTORY"
data-columnspec='["FBDECT_fbahahttp_08761_0019041:?????????"]'
Danke
Jörg