FTUI und SVG Charts

Begonnen von elektro_rainer, 05 Mai 2020, 10:58:41

Vorheriges Thema - Nächstes Thema

elektro_rainer

Servus,

.. ich verzweifel,.... wie bekomme ich die Charts links bündig untereinander?

VG,
Rainer
<li data-row="1" data-col="2" data-sizex="11" data-sizey="4">
<header>Verbrauch in Watt</header>
  <div data-type="chart"
class="small"
       data-device="FileLog_Strom_neu"
       data-logdevice="FileLog_Strom_neu"
       data-logfile="-"
       data-columnspec='["4:myPowerMeter.power:"]'
       data-style='["ftui l2"]'
       data-ptype='["lines"]'
       data-uaxis='["primary"]'
       data-legend='["Watt"]'
       data-yunit=" Watt"
       data-minvalue="auto"
       data-maxvalue="auto"
       data-height="auto"
       data-yticks="auto"
data-title="Stromverbrauch Min $data{min1}, Max $data{max1}, Aktuell $data{currval1} Watt"
      </div>
</li>
<li data-row="5" data-col="2" data-sizex="11" data-sizey="4">
<header>Strom</header>
  <div data-type="chart"
        data-device="FileLog_Strom_neu"
        data-logdevice="FileLog_Strom_neu"
        data-logfile="-"
        data-columnspec='["4:myPowerMeter.current_L1:","4:myPowerMeter.current_L2:","4:myPowerMeter.current_L3:"]'
        data-style='["ftui l2","ftui l4","ftui l6"]'
        data-ptype='["lines","lines","lines"]'
        data-uaxis='["primary","primary","primary"]'
        data-legend='["L1","L2","L3"]'
        data-legendpos='["top","right"]'
        data-showlegend='true'
        data-ytext="Ampere"
        data-minvalue="auto"
        data-maxvalue="auto"
        data-ytext_sec="Ampere"
        data-nofulldays="true"
        data-title_class="farbe"
        class="fullsize"
        </div>
</li>


yersinia

Zunächst, in beiden widget Aufrufen fehlt das schließende >:
<li data-row="1" data-col="2" data-sizex="11" data-sizey="4">
<header>Verbrauch in Watt</header>
  <div data-type="chart"
class="small"
       data-device="FileLog_Strom_neu"
       data-logdevice="FileLog_Strom_neu"
       data-logfile="-"
       data-columnspec='["4:myPowerMeter.power:"]'
       data-style='["ftui l2"]'
       data-ptype='["lines"]'
       data-uaxis='["primary"]'
       data-legend='["Watt"]'
       data-yunit=" Watt"
       data-minvalue="auto"
       data-maxvalue="auto"
       data-height="auto"
       data-yticks="auto"
data-title="Stromverbrauch Min $data{min1}, Max $data{max1}, Aktuell $data{currval1} Watt"> <!-- <=hier -->
      </div>
</li>
<li data-row="5" data-col="2" data-sizex="11" data-sizey="4">
<header>Strom</header>
  <div data-type="chart"
        data-device="FileLog_Strom_neu"
        data-logdevice="FileLog_Strom_neu"
        data-logfile="-"
        data-columnspec='["4:myPowerMeter.current_L1:","4:myPowerMeter.current_L2:","4:myPowerMeter.current_L3:"]'
        data-style='["ftui l2","ftui l4","ftui l6"]'
        data-ptype='["lines","lines","lines"]'
        data-uaxis='["primary","primary","primary"]'
        data-legend='["L1","L2","L3"]'
        data-legendpos='["top","right"]'
        data-showlegend='true'
        data-ytext="Ampere"
        data-minvalue="auto"
        data-maxvalue="auto"
        data-ytext_sec="Ampere"
        data-nofulldays="true"
        data-title_class="farbe"
        class="fullsize"> <!-- <=hier -->
        </div>
</li>

Schau mal, ob das schon Abhilfe schafft.
viele Grüße, yersinia
----
FHEM 6.4 (SVN) on RPi 4B with RasPi OS Bookworm (perl 5.36.0) | FTUI
nanoCUL->2x868(1x ser2net)@tsculfw, 1x433@Sduino | MQTT2 | Tasmota | ESPEasy
VCCU->14xSEC-SCo, 7xCC-RT-DN, 5xLC-Bl1PBU-FM, 3xTC-IT-WM-W-EU, 1xPB-2-WM55, 1xLC-Sw1PBU-FM, 1xES-PMSw1-Pl

elektro_rainer

OMG,... danke
hab ich eingefügt, bringt aber leider nix,...

ich denke das wenn an der linken Achse die Werte > einer -irgendwo- festgelegten Breite sind, dann verrückt es den Graphen nach Rechts um Links den gleichen Abstand zum Rand zu haben,.... keine Ahnung wo man das einstellt.......

eki

Das Chart Widget reserviert für die y-Achsen Beschriftung immer Platz abhängig von den möglicherweise auftretenden Beschriftungen. In Deinem Fall sind das einmal (bei den Watt Werten) große Zahlen und bei den Amperes eher kleine. Dadurch wird einmal viel und einmal wenig Platz vorgesehen.
Anpassung kann aus meiner Sicht auf 2 Arten passieren:
1. Die Beschriftung auf die rechte Achse (Sekundärachse) legen und linkst nichts beschriften. Wie das geht kannst Du im FTUI Chart Wiki nachlesen.
2. Den Parameter data-yticks_format verwenden und das gleiche Format für beide Charts festlegen (dann verbraucht das Ampere Chart eben ein bisschen mehr Platz als notwendig). Wie das geht steht auch im Chart Wiki.

elektro_rainer

danke, das war der entscheidende tipp!!