[FHEM-Tablet-UI] Chart

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

Vorheriges Thema - Nächstes Thema

RoBra81

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

eki

Ä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.

RoBra81


RoBra81

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

eki

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?

RoBra81

Nein, leider keine Meldungen.

RoBra81

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, $(&quot;svg.basesvg1&quot;).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, $(&quot;svg.basesvg1&quot;).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, $(&quot;svg.basesvg1&quot;).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, $(&quot;svg.basesvg1&quot;).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

RoBra81

Sorry, habe gerade zufällig gesehen, dass hier jemand das gleiche Problem hat:

http://forum.fhem.de/index.php/topic,37378.msg374672.html#msg374672

RoBra81

Für andere Suchende: im angegeben Thread habe ich eine (temporäre) Lösung beschrieben...

Depechem

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
RaspberryPi2 / FHEM / 3 Wand-Tablets mit Tablet UI / HM USB / verschiedene HM-Aktoren / JeeLink USB für WS1600 und mehrere LaCrosse Sensoren / HEOS ...

eki

Versuche mal bei der columnspec statt Leerzeichen einen . Zu verwenden.

Nobby1805

#11
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
FHEM-Featurelevel: 6.2   (fhem.pl:28227/2023-11-29) auf Windows 10 Pro mit Strawberry Perl 5.32.1.1-32bit
TabletUI: 2.7.15
IO: 2xHMLAN(0.965)|HMUSB2(0.967)

eki

#12
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.

Depechem

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

RaspberryPi2 / FHEM / 3 Wand-Tablets mit Tablet UI / HM USB / verschiedene HM-Aktoren / JeeLink USB für WS1600 und mehrere LaCrosse Sensoren / HEOS ...

eki

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.