Problems with Javascript component and TabSheet

Hi,

i’m implementing a java-script component, which renders
flot
charts (inspired by the
tutorial
in the vaadin 7 wiki).

In most cases, everything works very well. But inside tabs, the component is broken.


Example:

Without tabs:


public class ABCDieKattzzee extends UI {
    
    @Override
    protected void init(VaadinRequest request) {
        
        
        
        Flotchart chart = new Flotchart();
        Plot plot = new Plot();
        Series series = new Series();
        series.data = new Object[100]
[2]
;
        for (int i = 0; i < series.data.length; i++) {
            series.data[i]
[0]
 = i;
            series.data[i]
[1]
 = new Double(i * i);
        }
        plot.series().add(series);
        
        chart.setWidth("100%");chart.setHeight("400px");
        chart.setPlot(plot);
        

//        VerticalLayout content = new VerticalLayout();        
        VerticalLayout tabLayout = new VerticalLayout(
                                       new Label("abc"),
                                       chart,
                                       new Label("def"));
        
//        TabSheet tabs = new TabSheet();
//        content.addComponent(tabs);
//        tabs.addTab(tabLayout, "abcdef");
//        
//        setContent(content);
        setContent(tabLayout);
    }
    
    public static void main(String[] args) {
        VaadinUITest.run(ABCDieKattzzee.class);
    }
}

With Tabs:


public class ABCDieKattzzee extends UI {
    
    @Override
    protected void init(VaadinRequest request) {
        
        
        
        Flotchart chart = new Flotchart();
        Plot plot = new Plot();
        Series series = new Series();
        series.data = new Object[100]
[2]
;
        for (int i = 0; i < series.data.length; i++) {
            series.data[i]
[0]
 = i;
            series.data[i]
[1]
 = new Double(i * i);
        }
        plot.series().add(series);
        
        chart.setWidth("100%");chart.setHeight("400px");
        chart.setPlot(plot);
        

        VerticalLayout content = new VerticalLayout();        
        VerticalLayout tabLayout = new VerticalLayout(
                                       new Label("abc"),
                                       chart,
                                       new Label("def"));
        
        TabSheet tabs = new TabSheet();
        content.addComponent(tabs);
        tabs.addTab(tabLayout, "abcdef");
        
        setContent(content);
//        setContent(tabLayout);
    }
    
    public static void main(String[] args) {
        VaadinUITest.run(ABCDieKattzzee.class);
    }
}

Here is my connector javascript code:


window.a_b_c_Flotchart = function() {
	var e = $(this.getElement());
	this.onStateChange = function() {
		var jsonSeries = this.getState().jsonSeries;
		var jsonPlotoptions = this.getState().jsonPlotoption;
		
		var plotoptions = $.parseJSON(jsonPlotoptions);
		var seriesArr = [];
		for ( var i = 0; i < jsonSeries.length; i++) {
			seriesArr.push($.parseJSON(jsonSeries[i]
));
		}
		
		var fPlot = function() {
			$.plot(e, seriesArr, plotoptions);
		};
		$(e).ready(fPlot);
		$(window).resize(fPlot); 
	}
}

The first image in the attachments shows the scenario without a TabSheet (first code example), where everything works fine.

In the second picture you see the chart after loading the page. The chart itself is to small and the axis labels have wrong positions.

The third picture shows the charts after firing a resize-event. The chart has the correct size, but the labels still have wrong positions.

Any ideas how to fix this?
12856.png
12857.png
12858.png