FHEM Forum

FHEM => Frontends => TabletUI => Thema gestartet von: Aeroschmelz am 26 Dezember 2016, 13:02:03

Titel: Layout von Swiper Tabs mit Charts funktioniert nicht
Beitrag von: Aeroschmelz am 26 Dezember 2016, 13:02:03
Hallo,

ich versuche das angehängte Beispiel mit Charts nachzubauen. Wenn ich das allerdings durch Aufruf über ein Template aus einer Index.hmt mache wie hier, ist die Button-Leiste immer ewig weit vom Chart weg. Definiere ich im Template ein extra Gridster Element funktioniert die Navigation leider nicht...

Warum ist der Abstand so groß bzw. wie kann ich das zum funktionieren bekommen? Herzlichen Dank.

Viele Grüsse
Marcus



<header>Wetterdaten</header>
<div data-type="swiper" data-height="660px" data-width="740px" class="hashnav nopagination">
    <ul>
        <li data-hash="chart1"> 
            <div class="noswipe row-2-3 container center"
                data-type="chart"
            data-device="myDbLog"
            data-logdevice='["myDbLog","myDbLog"]'
            data-logfile='["HISTORY","HISTORY"]'
            data-columnspec='["Balkon:temperature","Balkon:humidity"]'
            data-style='["ftui l1","ftui l5fill"]'
            data-ptype='["lines","lines"]'
            data-uaxis='["primary","secondary"]'
            data-legend='["Temperatur","Luftfeuchte"]'
            data-yunit=" &deg;C"
            data-yunit_sec=" %"
                data-ytext="Temperatur"
                data-ytext_sec="Luftfeuchte"
            data-minvalue="auto"
            data-maxvalue="auto"
            data-minvalue_sec="0"
                data-maxvalue_sec="100"
                data-yticks="auto"
            data-xticks="auto"
            data-daysago_start="1"
            data-daysago_end="-1"
            data-crosshair="true"
            data-cursorgroup="1"
            data-scrollgroup="1"
            data-showlegend="true"
                data-xticks="auto"
                data-height="95%"
                data-width="98%">
            </div>       
        </li>
        <li data-hash="chart2" class="noswipe">
            <div class="noswipe row-2-3 container center"
                data-type="chart"
            data-device="myDbLog"
            data-logdevice='["myDbLog","myDbLog"]'
            data-logfile='["HISTORY","HISTORY"]'
            data-columnspec='["Luminosity:luminosity","Luminosity:IR"]'
            data-style='["ftui l1","ftui l5fill"]'
            data-ptype='["lines","lines"]'
            data-uaxis='["primary","secondary"]'
            data-legend='["Lichtst&auml;rke VIS","Lichtst&auml;rke IR"]'
            data-yunit=" lx"
            data-yunit_sec=" lx"
                data-ytext="Lichtst&auml;rke VIS"
                data-ytext_sec="Lichtst&auml;rke IR"
            data-minvalue="auto"
            data-maxvalue="auto"
            data-minvalue_sec="0"
                data-maxvalue_sec="100"
                data-yticks="auto"
            data-yticks_sec="auto"
                data-xticks="auto"
            data-daysago_start="1"
            data-daysago_end="-1"
            data-crosshair="true"
            data-cursorgroup="1"
            data-scrollgroup="1"
            data-showlegend="true"
                data-xticks="auto"
                data-height="95%"
                data-width="98%">
            </div>       
        </li>
        <li data-hash="chart3" class="noswipe">
            <div class="noswipe row-2-3 container center"
                data-type="chart"
            data-device="myDbLog"
            data-logdevice='["myDbLog"]'
            data-logfile='["HISTORY"]'
            data-columnspec='["Pressure:pressure-nn"]'
            data-style='["ftui l6fill"]'
            data-ptype='["histeps"]'
            data-uaxis='["primary"]'
            data-legend='["Luftdruck"]'
            data-yunit=" mbar"
                data-ytext="Luftdruck"
            data-minvalue="auto"
            data-maxvalue="auto"
                data-yticks="auto"
            data-xticks="auto"
            data-daysago_start="1"
            data-daysago_end="-1"
            data-crosshair="true"
            data-cursorgroup="1"
            data-scrollgroup="1"
            data-showlegend="true"
                data-xticks="auto"
                data-height="95%"
                data-width="98%">
            </div>       
        </li>
        <li data-hash="chart4" class="noswipe">             
             <div class="noswipe row-2-3 container center"
                data-type="chart"
            data-device="myDbLog"
            data-logdevice='["myDbLog","myDbLog"]'
            data-logfile='["HISTORY","HISTORY"]'
            data-columnspec='["YahooWetter:wind_speed",""]'
            data-style='["ftui l1fill","ftui l5fill"]'
            data-ptype='["cubic","steps"]'
            data-uaxis='["primary","secondary"]'
            data-legend='["Wind","Windrichtung"]'
            data-yunit=" km/h"
            data-yunit_sec=" &deg;"
                data-ytext="Wind"
                data-ytext_sec="Windgeschwindigkeit"
            data-minvalue="0"
            data-maxvalue="auto"
            data-minvalue_sec="0"
                data-maxvalue_sec="auto"
                data-yticks="auto"
            data-xticks="auto"
            data-yticks_sec="auto"
                data-daysago_start="1"
            data-daysago_end="-1"
            data-crosshair="true"
            data-cursorgroup="1"
            data-scrollgroup="1"
            data-showlegend="true"
                data-xticks="auto"
                data-height="95%"
                data-width="98%">
            </div>               
        </li>
     </ul>
</div>
<div class="hbox items-space-around">   
        <div data-type="link" class="small inline narrow swipertab"
             data-width="142" data-height="35"
             data-color="white"
             data-background-color=""
             data-border-color="white"
             data-active-color="white"
             data-active-background-color="#aa6900"
             data-active-border-color="white"
             data-active-pattern=".*chart1"
             data-icon="fa-thermometer-half"
             data-url="#chart1">Temperatur
        </div>
        <div data-type="link" class="small inline narrow swipertab"
             data-width="142" data-height="35"
             data-color="white"
             data-background-color=""
             data-border-color="white"
             data-active-color="white"
             data-active-background-color="#aa6900"
             data-active-border-color="white"
             data-active-pattern=".*chart2"
             data-icon="fa-lightbulb-o"
             data-url="#chart2">Helligkeit
        </div>
        <div data-type="link" class="small inline narrow swipertab"
             data-width="142" data-height="35"
             data-color="white"
             data-background-color=""
             data-border-color="white"
             data-active-color="white"
             data-active-background-color="#aa6900"
             data-active-border-color="white"
             data-active-pattern=".*chart3"
             data-icon="fa-bar-chart"
             data-url="#chart3">Luftdruck
        </div>
        <div data-type="link" class="small inline narrow swipertab"
             data-width="142" data-height="35"
             data-color="white"
             data-background-color=""
             data-border-color="white"
             data-active-color="white"
             data-active-background-color="#aa6900"
             data-active-border-color="white"
             data-active-pattern=".*chart4"
             data-icon="oa-weather_wind"
             data-url="#chart4">Wind
        </div>
</div>   
Titel: Antw:Layout von Swiper Tabs mit Charts funktioniert nicht
Beitrag von: Aeroschmelz am 26 Dezember 2016, 18:19:26
Kaum geschrieben, habe ich es hinbekommen  :D

War wohl die Verwendung von Row in Verbindung mit der Höhe des Swipers. So geht es:


<header>Wetterdaten</header>
<div data-type="swiper" data-height="380px" data-width="740px" class="hashnav nopagination">
    <ul>
        <li data-hash="chart1"> 
            <div class="noswipe container center"
                data-type="chart"
            data-device="myDbLog"
            data-logdevice='["myDbLog","myDbLog"]'
            data-logfile='["HISTORY","HISTORY"]'
            data-columnspec='["Balkon:temperature","Balkon:humidity"]'
            data-style='["ftui l1","ftui l5fill"]'
            data-ptype='["lines","lines"]'
            data-uaxis='["primary","secondary"]'
            data-legend='["Temperatur","Luftfeuchte"]'
            data-yunit=" &deg;C"
            data-yunit_sec=" %"
                data-ytext="Temperatur"
                data-ytext_sec="Luftfeuchte"
            data-minvalue="auto"
            data-maxvalue="auto"
            data-minvalue_sec="0"
                data-maxvalue_sec="100"
                data-yticks="auto"
            data-xticks="auto"
            data-daysago_start="1"
            data-daysago_end="-1"
            data-crosshair="true"
            data-cursorgroup="1"
            data-scrollgroup="1"
            data-showlegend="true"
                data-xticks="auto"
                data-height="95%"
                data-width="98%">
            </div>       
        </li>
        <li data-hash="chart2" class="noswipe">
            <div class="noswipe container center"
                data-type="chart"
            data-device="myDbLog"
            data-logdevice='["myDbLog","myDbLog"]'
            data-logfile='["HISTORY","HISTORY"]'
            data-columnspec='["Luminosity:luminosity","Luminosity:IR"]'
            data-style='["ftui l1","ftui l5fill"]'
            data-ptype='["lines","lines"]'
            data-uaxis='["primary","secondary"]'
            data-legend='["Lichtst&auml;rke VIS","Lichtst&auml;rke IR"]'
            data-yunit=" lx"
            data-yunit_sec=" lx"
                data-ytext="Lichtst&auml;rke VIS"
                data-ytext_sec="Lichtst&auml;rke IR"
            data-minvalue="auto"
            data-maxvalue="auto"
            data-minvalue_sec="0"
                data-maxvalue_sec="100"
                data-yticks="auto"
            data-yticks_sec="auto"
                data-xticks="auto"
            data-daysago_start="1"
            data-daysago_end="-1"
            data-crosshair="true"
            data-cursorgroup="1"
            data-scrollgroup="1"
            data-showlegend="true"
                data-xticks="auto"
                data-height="95%"
                data-width="98%">
            </div>       
        </li>
        <li data-hash="chart3" class="noswipe">
            <div class="noswipe container center"
                data-type="chart"
            data-device="myDbLog"
            data-logdevice='["myDbLog"]'
            data-logfile='["HISTORY"]'
            data-columnspec='["Pressure:pressure-nn"]'
            data-style='["ftui l6fill"]'
            data-ptype='["histeps"]'
            data-uaxis='["primary"]'
            data-legend='["Luftdruck"]'
            data-yunit=" mbar"
                data-ytext="Luftdruck"
            data-minvalue="auto"
            data-maxvalue="auto"
                data-yticks="auto"
            data-xticks="auto"
            data-daysago_start="1"
            data-daysago_end="-1"
            data-crosshair="true"
            data-cursorgroup="1"
            data-scrollgroup="1"
            data-showlegend="true"
                data-xticks="auto"
                data-height="95%"
                data-width="98%">
            </div>       
        </li>
        <li data-hash="chart4" class="noswipe">             
             <div class="noswipe container center"
                data-type="chart"
            data-device="myDbLog"
            data-logdevice='["myDbLog","myDbLog"]'
            data-logfile='["HISTORY","HISTORY"]'
            data-columnspec='["YahooWetter:wind_speed",""]'
            data-style='["ftui l1fill","ftui l5fill"]'
            data-ptype='["cubic","steps"]'
            data-uaxis='["primary","secondary"]'
            data-legend='["Wind","Windrichtung"]'
            data-yunit=" km/h"
            data-yunit_sec=" &deg;"
                data-ytext="Wind"
                data-ytext_sec="Windgeschwindigkeit"
            data-minvalue="0"
            data-maxvalue="auto"
            data-minvalue_sec="0"
                data-maxvalue_sec="auto"
                data-yticks="auto"
            data-xticks="auto"
            data-yticks_sec="auto"
                data-daysago_start="1"
            data-daysago_end="-1"
            data-crosshair="true"
            data-cursorgroup="1"
            data-scrollgroup="1"
            data-showlegend="true"
                data-xticks="auto"
                data-height="95%"
                data-width="98%">
            </div>
         </li>               
          <li data-hash="chart5" class="noswipe">
            <div class="noswipe container center"
               data-type="chart"
               data-logdevice='["lp","lp","lp","lp"]'
           data-logfile=="CURRENT"
               data-columnspec='["Func:logProxy_proplanta2Plot(\\x22AgroWeather\\x22,\\x22rain_\\x22,$from,$to,0,\\x22day\\x22)","Func:logProxy_proplanta2Plot(\\x22AgroWeather\\x22,\\x22chOfRain_\\x22,$from,$to,0,\\x22day\\x22)","Func:logProxy_proplanta2Plot(\\x22AgroWeather\\x22,\\x22cloud_\\x22,$from,$to,0,\\x22day\\x22)","ConstY:0"]'
               data-style='["ftui l4fill","ftui l5fill","ftui l6fill","ftui l2fill"]'
               data-ptype='["steps","quadraticSmooth","quadratic","lines"]'
               data-uaxis='["primary","secondary","secondary","secondary"]'
               data-legend='["Regen","Regenwahr.","Wolkenbed.",""]'
               data-yunit="mm"
               data-ytext="Regen"
               data-minvalue="auto"
               data-maxvalue="auto"
               data-yunit_sec="%"
               data-ytext_sec="Wolkenbed. / Regenwahr."
               data-yticks="auto"
               data-minvalue_sec="0"
               data-maxvalue_sec="110"
          data-nofulldays="true"
               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="95%"
                data-width="98%">
            </div>                 
        </li>
       
       
        <li data-hash="chart6" class="noswipe">
            <div class="noswipe container center"
               data-type="chart"
               data-logdevice='["lp","lp","lp","lp"]'
           data-logfile=="CURRENT"
               data-columnspec='["Func:logProxy_proplanta2Plot(\\x22AgroWeather\\x22,\\x22rain_\\x22,$from,$to,0,\\x22day\\x22)","Func:logProxy_proplanta2Plot(\\x22AgroWeather\\x22,\\x22chOfRain_\\x22,$from,$to,0,\\x22day\\x22)","Func:logProxy_proplanta2Plot(\\x22AgroWeather\\x22,\\x22cloud_\\x22,$from,$to,0,\\x22day\\x22)","ConstY:0"]'
               data-style='["ftui l4fill","ftui l5fill","ftui l6fill","ftui l2fill"]'
               data-ptype='["steps","quadraticSmooth","quadratic","lines"]'
               data-uaxis='["primary","secondary","secondary","secondary"]'
               data-legend='["Regen","Regenwahr.","Wolkenbed.",""]'
               data-yunit="mm"
               data-ytext="Regen"
               data-minvalue="auto"
               data-maxvalue="auto"
               data-yunit_sec="%"
               data-ytext_sec="Wolkenbed. / Regenwahr."
               data-yticks="auto"
               data-minvalue_sec="0"
               data-maxvalue_sec="110"
          data-nofulldays="true"
               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="95%"
                data-width="98%">
            </div>                 
        </li>
       
     </ul>
</div>
<div class="hbox items-space-around left-space right-space top-space">
   <div class="vbox">
      <div data-type="switch"
        data-device="WetterChartDummy"
        data-get-off="!on"
        data-set-off=""
        data-icon="fa-thermometer-half"
        data-get-on="Temp"
        class="swipertab">
      </div>
      <div class="darker">Temperatur</div>
  </div>
  <div class="vbox">
      <div data-type="switch"
        data-device="WetterChartDummy"
        data-get-off="!on"
        data-set-off=""
        data-icon="fa-lightbulb-o"
        data-get-on="Light"
        class="swipertab">
      </div>
    <div class="darker">Helligkeit</div>
  </div>
  <div class="vbox">
      <div data-type="switch"
        data-device="WetterChartDummy"
        data-get-off="!on"
        data-set-off=""
        data-icon="fa-bar-chart"
        data-get-on="Druck"
        class="swipertab">
      </div>
    <div class="darker">Luftdruck</div>
  </div>
  <div class="vbox">
      <div data-type="switch"
        data-device="WetterChartDummy"
        data-get-off="!on"
        data-set-off=""
        data-icon="oa-weather_wind"
        data-get-on="Wind"
        class="swipertab">
      </div>
    <div class="darker">Wind</div>     
  </div> 
   <div class="vbox">
      <div data-type="switch"
        data-device="WetterChartDummy"
        data-get-off="!on"
        data-set-off=""
        data-icon="oa-weather_rain_gauge"
        data-get-on="Regen"
        class="swipertab">
      </div>
    <div class="darker">Regenverteilung</div>
  </div>
     <div class="vbox">
      <div data-type="switch"
        data-device="WetterChartDummy"
        data-get-off="!on"
        data-set-off=""
        data-icon="fa-sun-o"
        data-get-on="Sonne"
        class="swipertab">
      </div>
    <div class="darker">Sonnenstunden</div>
  </div>
</div>

Titel: Antw:Layout von Swiper Tabs mit Charts funktioniert nicht
Beitrag von: Aeroschmelz am 14 Dezember 2017, 12:08:42
Hi,

seit dem letzten Update von TabletUi sieht das jetzt leider so aus. Auch die Verwendung von
class="fullsize"
oder Der Austausch der alten "widget_chart.js" führt nicht dazu, dass das Chart im kompletten Swiper dargestellt wird, d.h. es scheint wohl eine Kombination von mehreren Änderungen zu sein. Was muss ich denn da ändern?
Titel: Antw:Layout von Swiper Tabs mit Charts funktioniert nicht
Beitrag von: Aeroschmelz am 24 März 2018, 13:53:38
Hallo zusammen,

nach dem letzten Update habe ich leider wieder genau das gleiche Problem. Ich habe das Chart Widget mit zugehöriger CSS ausgetauscht und die tabletUi.css. Das brachte keine Änderung.
Erst der Austausch der widget_swiper.js in Kombination mit der class="container center" beim chart Widget behebt das Problem. Ich weiß nicht, was sich beim Swiper Widget geändert hat, das versuche ich noch herauszufinden. Fehlermeldungen erscheinen allerdings immer noch, siehe Screenshot. Handelt es sich hier um ein Feature oder um einen Bug oder warum verwendet das Swiper Widget in der neuen Version nicht mehr den vollständig zur Verfügung stehenden Platz?

Hier noch mal die aktuelle Definition:

<header>Wetterdaten</header>
<div class="sheet">
<div class="row">
<div data-type="swiper" data-height="380px" data-width="720px" class="hashnav nopagination">
    <ul>
        <li data-hash="chart1" class="noswipe">
             <div class="container center"
                data-type="chart"
            data-device="Kueche"
            data-logdevice='["myDbLog","myDbLog"]'
            data-logfile='["HISTORY","HISTORY"]'
            data-columnspec='["Kueche:temperature","Kueche:humidity"]' 
                data-style='["ftui l1","ftui l5fill"]'
            data-ptype='["lines","lines"]'
            data-uaxis='["primary","secondary"]'
            data-legend='["Temperatur","Luftfeuchte"]'
           
                data-prefetch="true"
                data-yunit="&deg;C"
            data-yunit_sec="%"
                data-ytext="Temperatur"
                data-ytext_sec="Luftfeuchte"
           
                data-minvalue="auto"
            data-maxvalue="auto"
            data-minvalue_sec="auto"
                data-maxvalue_sec="auto"
               
                data-y_margin="5"
                data-y_margin_sec="5"
                data-yticks="auto"
            data-xticks="auto"
           
                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>       
        </li>
        <li data-hash="chart2" class="noswipe">
             <div class="container center"
                data-type="chart"
            data-device="Luminosity"
            data-logdevice='["myDbLog","myDbLog"]'
            data-logfile='["HISTORY","HISTORY"]'
            data-columnspec='["Luminosity:luminosity","Luminosity:ir"]'
            data-style='["ftui l1","ftui l0"]'
            data-ptype='["lines","lines"]'
            data-uaxis='["primary","secondary"]'
            data-legend='["Lichtst&auml;rke VIS","Lichtst&auml;rke IR"]'
           
                data-prefetch="true"
                data-yunit="lx"
            data-yunit_sec="lx"
                data-ytext="Lichtst&auml;rke VIS"
                data-ytext_sec="Lichtst&auml;rke IR"
           
                data-minvalue="auto"
            data-maxvalue="auto"
            data-minvalue_sec="0"
                data-maxvalue_sec="auto"
               
                data-y_margin="5"             
                data-y_margin_sec="5"
                data-yticks="auto"
            data-yticks_sec="auto"
                data-xticks="auto"
           
                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>       
        </li>
        <li data-hash="chart3" class="noswipe">
            <div class="container center"
                data-type="chart"
            data-device="Pressure"
            data-logdevice='["myDbLog"]'
            data-logfile='["HISTORY"]'
            data-columnspec='["Pressure:pressure-nn"]'
            data-style='["ftui l1fill"]'
            data-ptype='["histeps"]'
            data-uaxis='["primary"]'
            data-legend='["Luftdruck"]'
           
                data-prefetch="true"
                data-yunit="mbar"
                data-ytext="Luftdruck"
           
                data-minvalue="auto"
            data-maxvalue="auto"
                data-y_margin="10"
                data-yticks="auto"
            data-xticks="auto"
           
                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>       
        </li>
<li data-hash="chart4" class="noswipe">             
              <div class="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="&deg;"
                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>
         </li>
                 <li data-hash="chart5" class="noswipe">             
              <div class="container center"
                data-type="chart"
            data-device="Balkon"
            data-logdevice='["myDbLog","myDbLog","myDbLog"]'
            data-logfile='["HISTORY","HISTORY","HISTORY"]'
            data-columnspec='["Balkon:statRainHour","Balkon:statRainYear","Balkon:statRainDay"]'
                data-style='["ftui l6fill","ftui l1","ftui l5fill"]'       
                data-ptype='["histeps","lines","lines"]'
            data-uaxis='["primary","secondary","primary"]'
            data-legend='["Regen letzte Stunde","Regen im Jahr","Regen am Tag"]'
           
                data-prefetch="true"
                data-yunit="mm"
            data-yunit_sec="mm"
                data-ytext="Regenmenge pro Tag"
                data-ytext_sec="Regenmenge im Jahr"
                data-y_margin_sec='["5","0"]'
           
                data-minvalue="0"
            data-maxvalue="auto"
            data-minvalue_sec="auto"
                data-maxvalue_sec="auto"
                data-xticks="auto"
                data-yticks="auto"
            data-yticks_sec="auto"
               
                data-daysago_start="0"
            data-daysago_end="-1"
            data-crosshair="true"
            data-cursorgroup="1"
            data-scrollgroup="1"
            data-showlegend="true"
                data-height="95%"
                data-width="98%">
            </div>
         </li>                               
          <li data-hash="chart6" class="noswipe">
            <div class="container center"
               data-type="chart"
               data-logdevice='["lp","lp","lp","lp"]'
           data-logfile="CURRENT"
               data-columnspec='["Func:logProxy_proplanta2Plot(\\x22AgroWeather\\x22,\\x22rain_\\x22,$from,$to,0,\\x22day\\x22)","Func:logProxy_proplanta2Plot(\\x22AgroWeather\\x22,\\x22chOfRain_\\x22,$from,$to,0,\\x22day\\x22)","Func:logProxy_proplanta2Plot(\\x22AgroWeather\\x22,\\x22cloud_\\x22,$from,$to,0,\\x22day\\x22)","ConstY:0"]'
               data-style='["ftui l6fill","ftui l5fill","ftui l1fill","ftui l2fill"]'
               data-ptype='["steps","quadraticSmooth","quadratic","lines"]'
               data-uaxis='["primary","secondary","secondary","secondary"]'
               data-legend='["Regen","Regenwahr.","Wolkenbed.",""]'
               
               data-prefetch="true"
               data-yunit="mm"
               data-ytext="Regen"
               
               data-minvalue="auto"
               data-maxvalue="auto"
               data-yunit_sec="%"
               data-ytext_sec="Wolkenbed. / Regenwahr."
               data-xticks="auto"
               data-yticks="auto"
               data-minvalue_sec="0"
               data-maxvalue_sec="110"
         
               data-nofulldays="true"
               data-daysago_start = "0"
           data-daysago_end = "-4"
               data-crosshair="true"
               data-cursorgroup="1"
               data-scrollgroup="1"
               data-showlegend="true"       
               data-height="95%"
               data-width="98%">
            </div>                 
        </li>     
        <li data-hash="chart7" class="noswipe">
            <div class="container center"
               data-type="chart"
               data-logdevice='["lp","lp","lp","lp"]'
           data-logfile="CURRENT"
               data-columnspec='["Func:logProxy_proplanta2Plot(\\x22AgroWeather\\x22,\\x22rad\\x22,$from,$to,12)","Func:logProxy_proplanta2Plot(\\x22AgroWeather\\x22,\\x22rad\\x22,$from,$to,12)","Func:logProxy_proplanta2Plot(\\x22AgroWeather\\x22,\\x22sun\\x22,$from,$to,12)","Func:logProxy_proplanta2Plot(\\x22AgroWeather\\x22,\\x22evapor\\x22,$from,$to,0,\\x22day\\x22)"]'
               data-style='["ftui l6","ftui l3","ftui l0fill","ftui l5fill"]'
               data-ptype='["quadraticSmooth","points","bars","steps"]'
               data-uaxis='["primary","primary","secondary","primary"]'
               data-legend='["UV-Index","","Sonnenein.","Verd."]'
               
               data-prefetch="true"
               data-yunit=""
               data-ytext="Verdunstung / UV"
               data-yunit_sec="%"
               data-ytext_sec="Sonnenein."
               data-xticks="auto"
               data-yticks="auto"
               
               data-minvalue="0"
               data-maxvalue="10"
               data-minvalue_sec="0"
               data-maxvalue_sec="110"
          data-nofulldays="true"
               
               data-daysago_start="0"
           data-daysago_end="-4"
               data-crosshair="true"
               data-cursorgroup="1"
               data-scrollgroup="1"
               data-showlegend="true"
               data-height="95%"
               data-width="98%">
            </div>                 
        </li>       
     </ul>
</div>
<table width="100%">
<tr>
<td>
  <div class="vbox top-space">
      <div data-type="switch"
        data-device="WetterChartDummy"
        data-get-off="!on"
        data-set-off=""
        data-icon="fa-thermometer-half"
        data-get-on="Temp"
        class="swipertab">
      </div>
        <div class="darker">Temperatur</div>
      </div>
</td>
<td>
<div class="vbox top-space">
      <div data-type="switch"
        data-device="WetterChartDummy"
        data-get-off="!on"
        data-set-off=""
        data-icon="fa-lightbulb-o"
        data-get-on="Light"
        class="swipertab">
      </div>
      <div class="darker">Helligkeit</div>
     </div>
</td>
<td>
<div class="vbox top-space">
      <div data-type="switch"
        data-device="WetterChartDummy"
        data-get-off="!on"
        data-set-off=""
        data-icon="fa-bar-chart"
        data-get-on="Druck"
        class="swipertab">
      </div>
      <div class="darker">Luftdruck</div>
      </div>
</td>
<td>
<div class="vbox top-space">
      <div data-type="switch"
        data-device="WetterChartDummy"
        data-get-off="!on"
        data-set-off=""
        data-icon="oa-weather_wind"
        data-get-on="Wind"
        class="swipertab">
      </div>
      <div class="darker">Wind</div>
     </div>
</td>
<td>
  <div class="vbox top-space">
      <div data-type="switch"
        data-device="WetterChartDummy"
        data-get-off="!on"
        data-set-off=""
        data-icon="oa-weather_rain_gauge"
        data-get-on="Regen"
        class="swipertab">
      </div>
      <div class="darker">Regen</div>
      </div>
</td>
<td>
  <div class="vbox top-space">
      <div data-type="switch"
        data-device="WetterChartDummy"
        data-get-off="!on"
        data-set-off=""
        data-icon="oa-weather_cloudy"
        data-get-on="Wolken"
        class="swipertab">
      </div>
      <div class="darker">Wolken</div>
      </div>
</td>
<td>
  <div class="vbox top-space">
      <div data-type="switch"
        data-device="WetterChartDummy"
        data-get-off="!on"
        data-set-off=""
        data-icon="fa-sun-o"
        data-get-on="Sonne"
        class="swipertab">
      </div>
      <div class="darker">Sonne</div>
      </div>
</td>
</tr>
</table>

</div>
</div>


Viele Grüsse
Marcus


Titel: Antw:Layout von Swiper Tabs mit Charts funktioniert nicht
Beitrag von: Aeroschmelz am 25 März 2018, 17:42:10
Folgende Unterschiede gibt es beim Widget in der alten und neuen Version.