Problem mit mehreren Plots in einem Abschnitt

[shs2]

Hallo,

ich habe aus Platzgründen ein Verschachtelung mehrerer Detailinformationen eingebaut. Klappt auch einwandfrei, wenn in einem 3er Block nur ein Plot auftaucht. Sobald ich 2 Plots einbaue, wird der im nicht geöffneten Bereich liegende Plot beim Vergrößern nur auf halber Breite dargestellt. Mit Text und Icons passiert das nicht:

Würde man hier an Stelle des ersten Plots Text einfügen , gibt´s keine Probleme.
Es ist immer der Plot in einem data-collapsed ="true", der beim Vergrößern nur in halber Größe dargestellt wird, selbst wenn man diesen in ein 100% Tab packt:

  
    <div class="block">
  <div class="set-2" data-role="collapsible-set" data-theme="c" data-content-theme="a" data-mini="true">
    <div data-role="collapsible" data-collapsed="true">
         <h3>
              <table width=100%>
                  <tr>
                      <td align=left> 
                      Lüftung 
                     
                      </td>
                      <td align= right > 
                      Stufe {{ basic.value('wert_lueftungsswitch2', 'lueftung', '') }}</td>  
                     </td>                 
                           
                  </tr>
              </table>
        </h3>
          
      
    
        <table width=100%>
            <tr>
                   <td align=left style="padding-left: 10px;">
                    {{ myButtons.multi_state_button('Lueftungswitch', 'lueftung',  icon1~'vent_ventilation_level_1.png', 1, 'Stufe 1', icon1~'vent_ventilation_level_2.png', 2, 'Stufe 2', icon1~'vent_ventilation_level_3.png', 3, 'Stufe 3') }}
   Stufe {{ basic.value('wert_lueftungsswitch', 'lueftung', '') }}
                   </td>
                   <td align=right>
                   
                   </td>
            </tr>
       </table>
  
        
      
  
        
  
      </div>
    
        <div data-role="collapsible" data-collapsed="true">
        <h3>Statistik</h3> 
               
        
       <table width=100%>
            <tr>
                     {{ plot.period('plot_lueanl_2', ['kwl.temp.intakeair','kwl.temp.exhaustair','ow.aussen','ow.supplyair','kwl.temp.extractair','temp','kwl.temp.freshair'], 'avg', '1w', '', '', '', '', ['Intake','Exhaust','Out','Supply','Extract','In','fresh'],['#0040FF','#FE9A2E','#000FF0','#00FF00','#FE2EF7','#f00','#2ECCFA'], '', '', '300' ) }}  
             </tr>
       </table>
  
       
      
        </div>
      
      <div data-role="collapsible" data-collapsed="false">
        <h3>Temperaturverlauf </h3>
        <table width=100%>
    
            <tr>
             
                         {{ plot.period('plot_lueanl', ['kwl.temp.intakeair','kwl.temp.exhaustair','ow.aussen','ow.supplyair','kwl.temp.extractair','temp','kwl.temp.freshair'], 'avg', '1w', '', '', '', '', ['Intake','Exhaust','Out','Supply','Extract','In','fresh'],['#0040FF','#FE9A2E','#000FF0','#00FF00','#FE2EF7','#f00','#2ECCFA'], '', '', '300' ) }}                 
            </tr>
       </table>                                                        
      </div>
    </div>
    </div>

Die ersten Beiden Bilder zeigen, wie es sein sollte.
1. nach Laden. 2. Nach Klick auf Statistik ( Temperaturverlauf schliesst - Statistik öffnet)
Das dritte Bild zeigt den Fehler.
Das 4. Bild den Zustand des gleichen Bereiches nach dem Laden.

Habt Ihr eine Idee, wie man das in den Griff bekommt?

Wo finde ich mehr Dokumentation zu den hier verwendeten HTML Steuerelementen ?
Gibt´s von der Demo [smartVISU] Demohaus den Quelltext als ZIP, das würde bei manchen Problemen vermutlich schon etwas helfen.

Gruß Stephan

[LuKa]

Dasselbe Verhalten habe ich leider auch!
Nach einem Resize der Seite wird der Plot wieder vollständig dargestellt.

[JimBE]

I also have the same problem. This is quite annoying.
Is there anything we can do about that ?
@LuKa/SHS2 : Have you been able to find a solution ?
Thanks

[2ndsky]

Das Problem erhält man, wenn man Plots in (beim Laden) unsichtbare Bereiche packt. Da kann highcharts die Größe nicht korrekt ermitteln und setzt sie auf einen Default wert. Man kann die Größenberechnung programmatisch nachholen... geht jedoch nicht out of the box und muss an die Gegebenheiten angepasst werden. Ich mache sowas in meiner quad Visu. Den Thread und die Sourcen dazu gibts irgendwo hier im smartVISU support Forum... einfach mal suchen.

[shs2]

Danke Dir für die Erklärung. Ich wer mir Deinen Code mal bei Gelegenheit ansehen.
Gruss Stephan

[fhartlieb]

Danke Dir für die Erklärung. Ich wer mir Deinen Code mal bei Gelegenheit ansehen.
Gruss Stephan

Hallo Stephan,

hast du das Problem inzwischen beheben können? Habe auch einen "versteckten" Plot wo dieses Problem der kleinen Breite auftritt.

Grüße
Florian

[marian]

Hallo, habe versucht die Lösung zu finden, aber leider erfolglos.

Jemand den Tip/Link zur Hand?

=> Gibt aber mehrer Threads mit dem gleiche Problem.

Gruß Marian

[mumpf]

Hi,

auch ich suche für das Problem eine Lösung - hat jemand schon was? Oder einen Tip, wo die Lösung steht?

Gruß, Waldemar

[Apollo]

Gedacht war es so, daß er beim Aufklappen die Größe neu rechnet.

Gruss

[stromie]

Moin

Den Thread und die Sourcen dazu gibts irgendwo hier im smartVISU support Forum... einfach mal suchen.

hier ist der relevante Teil aus dem Quad

$(document).on("pagecreate", function() {
    $(".nw_tab-header ul li").on("click",function(){
        $(this).parent().find(".ui-btn-active").removeClass("ui-btn-active");
        $(this).addClass("ui-btn-active");
        var newSelection = $(this).children("a").attr("data-tab-class");
        var prevSelection = $(this).parent().parent().attr("data-tab-selection");
        $("."+prevSelection).addClass("ui-screen-hidden");
        $("."+newSelection).removeClass("ui-screen-hidden");
        $(this).parent().parent().attr("data-tab-selection", newSelection);
        
        $("."+newSelection).find('[data-widget="plot.period"]').each(function(idx) {
            if ($('#' + this.id).highcharts()) {
                $('#' + this.id).highcharts().destroy(); 
                var values = widget.get(widget.explode($(this).attr('data-item')));
                if (widget.check(values))
                    $(this).trigger('update', [values]);
            }
        });
        
    });
});

Der passt aber nur für die Quad Visu. Da hier das .nm_tab-header ul li Click Event ausgewärtet wird. Du Musst halt das Event beim öffnen des Blocks auswerten.

Grüße Ronny

[apoc4lyps]

Falls noch jemand die Lösung hierzu sucht:

HTML (class=hidden-chart):

<div class="ui-block-b" data-role="collapsibleset" data-collapsed="false">
  <div data-role="collapsible" data-collapsed="false">
    <h2>Heizung</h2>
  </div>
  <div data-role="collapsible" [B]class="hidden-chart"[/B]>
    <h2>Diagram</h2>
  </div>
</div>

JavaScript:

$( document ).on( "pagecreate", ".ui-page", function( event ) {
   $(".hidden-chart").collapsible({
    expand: function( event, ui ) {
      $( this ).find('[data-widget^="plot."]').each(function() {
        if( $(this).highcharts()) {
          $( this ).highcharts().destroy();
          var values = widget.get(widget.explode($(this).attr('data-item')));
          if (widget.check(values))
            $(this).trigger('update', [values]);
        }
      });
    }
  })
});

[Mike01]

Hallo Sven,

Danke für den Hinweis, nur leider klappt das bei mir nicht,
was mache ich da falsch ?

Hier meine HTML:

    <div class="block">
    <div class="set-2" data-role="collapsible-set" data-theme="c" data-content-theme="a" data-mini="true">
      <div data-role="collapsible" data-collapsed="false">
        <h3>Heizung</h3>
          {% import "widgets/widget_mdt_rtr.html" as mdt %}
          {{ mdt.rtr('og.buero.heizung', '', 'og.buero.heizung.ist', 'og.buero.heizung.soll', 'og.buero.heizung.sollwertverschiebung', 'og.buero.heizung.modus', 'og.buero.heizung.modus', 'og.buero.heizung.modus', 'og.buero.heizung.stellwert', 'og.buero.heizung.sperren', 'og.buero.heizung.modus.uzsu') }}
      </div>
      <div data-role="collapsible" class="hidden-chart">
        <h3>Temperaturverlauf</h3>
          {{ plot.rtr('Th2Buero', 'og.buero.heizung.ist', 'og.buero.heizung.soll', 'og.buero.heizung.stellwert') }}
      </div>
    </div>
    </div>

Den JavaScript Code hab ich in die visu.js eingefügt,
oder muss der woanders hin ?

Mike

[apoc4lyps]

Änder das JavaScript mal in folgendes, um zu sehen ob es ausgeführt wird:

$( document ).on( "pagecreate", ".ui-page", function( event ) {
  $(".hidden-chart").collapsible({
    expand: function( event, ui ) {
      alert("expand function");
      $( this ).find('[data-widget^="plot."]').each(function() {
        alert("found data-widget");
        if( $(this).highcharts()) {
          alert("data-widget is highcharts");
          $( this ).highcharts().destroy();
          var values = widget.get(widget.explode($(this).attr('data-item')));
          if (widget.check(values))
            $(this).trigger('update', [values]);
        }
      });
    }
  })
});

Mit welchem Browser führst du das aus? Mal die Debug Tools angeworfen (Firebug) ob es da JavaScript Fehler Meldungen gibt?

[Mike01]

Hi,

Hab den .js Teil gerade geändert, neu gestartet und getestet.
Wo sollen die alert funktionen auftauchen ?
im Logfile ist diesbezüglich nichts zu finden.
Allerdings taucht die visu.js datei im Firebug auf, somit müßte die auch abgearbeitet werden, oder ? (siehe Screenshot)

Als Browser hab ich es mit Firefox & Internet Explorer getestet, bei bieden das gleiche.

Logfile im Anhang zeigt den Seitenaufruf.

[apoc4lyps]

Sorry vergessen zu schreiben nach dem Click auf den Collapsible Header sollten drei Alerts kommen.
Ich versuch es heute abend mal nachzustellen. Hab gerade keine SmartVisu zum basteln zur hand.