Jquery Integration issues

I was trying to integrate a FLOT jquery plugin into vaadin using the integration guide on the wiki.

All this loads without any error. But then just returns a blank page. What am I doing wrong? Please help!

Below is my code:

Server side code:

@JavaScript({"lib/jquery.min.js", "lib/jquery.flot.js", "js/flot_connector.js"})
public class Flot extends AbstractJavaScriptComponent {

    /**
     *
     */
    private static final long serialVersionUID = -4938265741782728550L;
    
     public void addSeries(double data[][]
) {
           

            getState().data = data;
        }

        @Override
        public FlotState getState() {
            return (FlotState) super.getState();
        }

}

State Class:

public class FlotState extends JavaScriptComponentState {

    /**
     *
     */
    private static final long serialVersionUID = -4120199422611252006L;

    public double data[][]
 = null;

}

connector js

window.com_example_test_Flot = function() {
    var element = $(this.getElement());
    
    
    this.onStateChange = function() {
        $.plot(element, this.getState().series);
    };
};

And finally the UI class:


public class TestUI extends UI {

    @Override
    protected void init(VaadinRequest request) {

        final VerticalLayout layout = new VerticalLayout();
        layout.setMargin(true);
        layout.setSizeFull();
        setContent(layout);        

        Flot flot = new Flot();
        
        double data[][]
={{1,2,3.4,5,6,6,6,6,8},{3,5,6.4,7,8,8,8,8,10}};

        flot.addSeries(data);
        layout.addComponent(flot);

    }

}

I even tried this with the Easy Guage plug-in. Still the same result.

It would be really great if someone could help me with this.

A quick guess: is the gauge displayed but with size 0?
You can try to check with browser debug tools, or directly set the size of the Flot component to full or some fixed pixel size to test.

That was exactly the issue.

Thanks a lot!!