Wie gelingt es, dass Charts auf einer Seite richtig angeordnet werden?

Begonnen von I-Punkt, 03 Februar 2017, 23:09:59

Vorheriges Thema - Nächstes Thema
Drucken
Nach unten Seiten1
Benutzer-Aktionen

I-Punkt

03 Februar 2017, 23:09:59 Letzte Bearbeitung: 03 Februar 2017, 23:16:25 von I-Punkt
Mahlzeit zusammen,

in einer Unterseite möchte ich mehrere Charts anordnen. Zum Test ersteinmal zwei übereinander. Wie eine Frage impliziert gelingt mir das nicht  ::)
Das Ergebnis sieht immer etwa so aus.. (siehe Bild)


Das Menü in Spalte 1 wird überschrieben und auch die Charts liegen übereinander.



Probiert habe ich das im Safari und im FireFox, unter IOS 10.2.1, glaube aber das es damit nicht zusammen hängt.


Der Inhalt der html. Datei für die Seite sieht so aus:

Code Auswählen



<!DOCTYPE html>
<html>
<head>
    <title>FHEM-Tablet-UI</title>
</head>
<body>

<div class="gridster">

<ul>
            <li data-row="1" data-col="1" data-sizex="1" data-sizey="9" data-template="menu.html"></li>

</ul>
<ul>


<li data-row"2" data-col="2" data-sizex="6" data-sizey="3">
<div data-type="chart"
data-logdevice='["wetter_log","wetter_log","wetter_log"]'
data-columnspec='["4:temperature.*","4:humidity.*","4:dewpointTemperature.*"]'
data-style='["ftui l0","ftui l3","ftui l4"]'
data-ptype='["lines","lines","lines"]'
data-uaxis='["primary","secondary","primary"]'
data-legend='["Temperatur","Luftfeuchte","Taupunkt"]'
data-yunit="°C"
data-ytext="Temperatur"
data-minvalue="auto"
data-maxvalue="auto"
data-yunit_sec="%"
data-ytext_sec="Luftfeuchte"
data-height="250"
data-yticks="auto"
data-minvalue_sec="auto"
data-maxvalue_sec="auto"
data-nofulldays="true"
data-daysago_start="0"
data-daysago_end="-1"
data-cursorgroup="1"
data-scrollgroup="1"
data-xticks="auto">
</div>
</li>



<header>wetter</header>
<li data-row"2" data-col="2" data-sizex="7" data-sizey="3">
<div data-type="chart"
data-logdevice='["wetter_log","wetter_log","wetter_log"]'
data-columnspec='["4:temperature.*","4:humidity.*","4:dewpointTemperature.*"]'
data-style='["ftui l1","ftui l2","ftui l5"]'
data-ptype='["lines","lines","lines"]'
data-uaxis='["primary","secondary","primary"]'
data-legend='["Temperatur","Luftfeuchte","Taupunkt"]'
data-yunit="°C"
data-ytext="Temperatur"
data-minvalue="auto"
data-maxvalue="auto"
data-yunit_sec="%"
data-ytext_sec="Luftfeuchte"
data-height="250"
data-yticks="auto"
data-minvalue_sec="auto"
data-maxvalue_sec="auto"
data-nofulldays="true"
data-daysago_start="0"
data-daysago_end="-1"
data-cursorgroup="1"
data-scrollgroup="1"
data-xticks="auto">
</div>
</li>

</ul>
</div>
</body>
</html>





Ein Update von FTUI hatte ich vorgestern schon durchgeführt. Alles andere funktioniert wie erwartet, nur die Anordnung nicht. Die Werte in den <li ..  Zeilen für die Spalten, Zeilen und Abmessungen hatte ich schon variiert.
Wegen eines anderen Fehlers, hatte ich auch schon mit der "Umklammerung" in li, div und ul experimentiert- natürlich ohne Erfolg.


Über einen keinen Schubs in die richtige Richtung würde ich mich freuen.


Grüße


I-Punkt

SirMarco

#1
03 Februar 2017, 23:23:24
Die sitzen doch beide an der selben Position. Data-raw prüfen

I-Punkt

#2
04 Februar 2017, 20:01:35
Hallo SirMarco,

Wie peinlich, Du hast natürlich Recht, der angegebene Code stammte aus meinen Experimenten. Hier noch einmal eine abgeänderte Version und das dazugehörige Ergebnis.

Code Auswählen


<!DOCTYPE html>
<html>
<head>
    <title>FHEM-Tablet-UI</title>
</head>
<body>

<div class="gridster">

<ul>
            <li data-row="1" data-col="1" data-sizex="1" data-sizey="9" data-template="menu.html"></li>

</ul>
<ul>


<li data-row"1" data-col="2" data-sizex="7" data-sizey="3">
<div data-type="chart"
data-logdevice='["wetter_log","wetter_log","wetter_log"]'
data-columnspec='["4:temperature.*","4:humidity.*","4:dewpointTemperature.*"]'
data-style='["ftui l0","ftui l3","ftui l4"]'
data-ptype='["lines","lines","lines"]'
data-uaxis='["primary","secondary","primary"]'
data-legend='["Temperatur","Luftfeuchte","Taupunkt"]'
data-yunit="°C"
data-ytext="Temperatur"
data-minvalue="auto"
data-maxvalue="auto"
data-yunit_sec="%"
data-ytext_sec="Luftfeuchte"
data-height="250"
data-yticks="auto"
data-minvalue_sec="auto"
data-maxvalue_sec="auto"
data-nofulldays="true"
data-daysago_start="0"
data-daysago_end="-1"
data-cursorgroup="1"
data-scrollgroup="1"
data-xticks="auto">
</div>
</li>



<header>wetter</header>
<li data-row"4" data-col="2" data-sizex="7" data-sizey="3">
<div data-type="chart"
data-logdevice='["wetter_log","wetter_log","wetter_log"]'
data-columnspec='["4:temperature.*","4:humidity.*","4:dewpointTemperature.*"]'
data-style='["ftui l1","ftui l2","ftui l5"]'
data-ptype='["lines","lines","lines"]'
data-uaxis='["primary","secondary","primary"]'
data-legend='["Temperatur","Luftfeuchte","Taupunkt"]'
data-yunit="°C"
data-ytext="Temperatur"
data-minvalue="auto"
data-maxvalue="auto"
data-yunit_sec="%"
data-ytext_sec="Luftfeuchte"
data-height="250"
data-yticks="auto"
data-minvalue_sec="auto"
data-maxvalue_sec="auto"
data-nofulldays="true"
data-daysago_start="0"
data-daysago_end="-1"
data-cursorgroup="1"
data-scrollgroup="1"
data-xticks="auto">
</div>
</li>

</ul>
</div>
</body>
</html>

I-Punkt

#3
04 Februar 2017, 20:05:42
Hallo SirMarco,

Trotz der geänderten Koordinaten gibt es auf die Darstellung der Charts offenbar keine Auswirkungen.

Viele Grüße

I-Punkt

I-Punkt

#4
04 Februar 2017, 23:10:01
Also Mahlzeit Zusammen,

Ich habe eine Lösung gefunden die mich - erst einmal - zufrieden stellt. Außerdem eine Menge gelernt.
Zuerst einmal die Lösung:

Code Auswählen


<!DOCTYPE html>
<html>
<head>
    <title>FHEM-Tablet-UI</title>
</head>
<body>

<div class="gridster">

<ul>
        <li data-row="1" data-col="1" data-sizex="1" data-sizey="9" data-template="menu.html"></li>
</ul>


<li data-row"1" data-col="2" data-sizex="7" data-sizey="3">
<header>Wetter1</header>
<div data-type="chart"
data-logdevice='["wetter_log","wetter_log","wetter_log"]'
data-columnspec='["4:temperature.*","4:humidity.*","4:dewpointTemperature.*"]'
data-style='["ftui l0","ftui l3","ftui l4"]'
data-ptype='["lines","lines","lines"]'
data-uaxis='["primary","secondary","primary"]'
data-legend='["Temperatur","Luftfeuchte","Taupunkt"]'
data-yunit="°C"
data-ytext="Temperatur"
data-minvalue="auto"
data-maxvalue="auto"
data-yunit_sec="%"
data-ytext_sec="Luftfeuchte"
data-height="250"
data-yticks="auto"
data-minvalue_sec="auto"
data-maxvalue_sec="auto"
data-nofulldays="true"
data-daysago_start="0"
data-daysago_end="-1"
data-cursorgroup="1"
data-scrollgroup="1"
data-xticks="auto">
</div>
</li>


<li data-row"10" data-col="2" data-sizex="7" data-sizey="3">
<header>wetter2</header>
<div data-type="chart"
data-logdevice='["wetter_log","wetter_log","wetter_log"]'
data-columnspec='["4:temperature.*","4:humidity.*","4:dewpointTemperature.*"]'
data-style='["ftui l1","ftui l2","ftui l5"]'
data-ptype='["lines","lines","lines"]'
data-uaxis='["primary","secondary","primary"]'
data-legend='["Temperatur","Luftfeuchte","Taupunkt"]'
data-yunit="°C"
data-ytext="Temperatur"
data-minvalue="auto"
data-maxvalue="auto"
data-yunit_sec="%"
data-ytext_sec="Luftfeuchte"
data-height="250"
data-yticks="auto"
data-minvalue_sec="auto"
data-maxvalue_sec="auto"
data-nofulldays="true"
data-daysago_start="0"
data-daysago_end="-1"
data-cursorgroup="1"
data-scrollgroup="1"
data-xticks="auto">
</div>
</li>


</div>
</body>
</html>



Und so bin ich darauf gekommen:

Irgendwann fiel auf das horizontale Angaben (Spalten) funktionieren, aber die Anordnung in den Zeilen wirkungslos blieben. Dann fiel mir auf, dass das MEnü sehr "hoch" ausfällt ("9" Zeilen...).
Den Codeschnipsel für das Menü hatte ich wie die meisten anderen "Schnipsel" irgendwo zusammen kopiert, und dort war dieser Wert so angesetzt - und von mir noch nicht an den Bedarf angepasst worden.

Also wenn man nun den Chart für Wetter2 unter Wetter1 angeordnet haben möchte (siehe Bilder) muss der Zeilenwert für Wetter2 größer sein als die Höhe ("9") des ersten Elements in Zeile1, also mindestens 10.

Dann "rutscht" das Objekt an die richtige Stelle.

Irgendwann, vor ein paar Jahren, hatte ich einmal etwas zur Anordnug der Objekte gelesen und fast wieder vergessen.....

@ SirMarco: Vielen Dank für Deine Hilfe!! Deine Anregung hat mich noch einmal zum Grübeln und zum Ergebnis gebracht.   Genau diesen Schubs hatte ich gemeint ;-)

Grüße

I-Punkt
Drucken
Nach oben Seiten1
Benutzer-Aktionen