AmCharts.js - don't work?

Hi,
I would like to use AmCharts in one of my vaadin project. But I missed something....
I have tried to move in small steps.
First goal: could I use the amcharts.

My project structure picture is attached to this post.

1. I have create a custom layout (amchartlayout.html). I planned to create here the chart. Now it consists a simple check method, checks the amcharts:

<!-- placeholder -->
<div id="chartdiv" style="width:100%; height:400px;"></div>

<!-- Create the component and bind it to the placeholder -->
<script type="text/javascript">
alert('here 1');
var ashamchartlibrary = ashamchartlibrary || {};
alert('here 2');

ashamchartlibrary.AmChartComponent = function () {
alert('here 3');
AmCharts.ready(function () {
// chart def here
alert('here 4');
});
alert('here 5');
};

alert('here 6');
window.foo = new ashamchartlibrary.AmChartComponent();
alert('here 7');
</script>

2. Component and state class:

@JavaScript({"amchartcomponent-connector.js"})
public class AmChartComponent extends AbstractJavaScriptComponent {

    private static final long serialVersionUID = 201605191300345345L;

    public void setValue(String value) {
        getState().setValue(value);
    }

    public String getValue() {
        return getState().getValue();
    }

    @Override
    protected AmChartComponentState getState() {
        return (AmChartComponentState) super.getState();
    }
}

public class AmChartComponentState extends JavaScriptComponentState {
    
    private static final long serialVersionUID = 201605191301234236L;
    
    private String value;

    public String getValue() {
        return value;
    }

    public void setValue(String value) {
        this.value = value;
    }
    
}

3. Placeholser: this is a panel. It uses the custom layout:

public class AmChartPlaceholder extends Panel implements Serializable {
    
    private static final long serialVersionUID = 201605191255983245L;
    
    public AmChartPlaceholder() {
        CustomLayout content = new CustomLayout("amchartlayout");
        content.setSizeUndefined();
        
        AmChartComponent amComp = new AmChartComponent();
        content.addComponent(amComp);
        
        setContent(content);
        setSizeUndefined();
    }
    
}

4. Here is the connector javascript file (amchartcomponent-connector.js):

window.com_ash_amcharts_AmChartComponent = function () {
    alert('here connector 1');
};

5. I have linked to the amcharts.js (to the main amcharts library) in the UI source file:

@Theme("mytheme")
@Widgetset("com.ash.chartexample003_amchart.MyAppWidgetset")
@JavaScript({"vaadin://themes/mytheme/js/amcharts/amcharts.js", "vaadin://themes/mytheme/js/amcharts/serial.js"})
public class MyUI extends UI {

    @Override
    protected void init(VaadinRequest vaadinRequest) {
        final VerticalLayout layout = new VerticalLayout();
        
        final TextField name = new TextField();
        name.setCaption("Type your name here:");

        Button button = new Button("Click Me");
        button.addClickListener( e -> {
            layout.addComponent(new Label("Thanks " + name.getValue()
                    + ", it works!"));
    });
        
        AmChartPlaceholder c1 = new AmChartPlaceholder();
        
        layout.addComponents(name, button, c1);
        layout.setMargin(true);
        layout.setSpacing(true);
        
        setContent(layout);
    }

Something I missed, because the script in the amchartlayout.html shows:
here1
here2
here6
here3

and 'here 4', 'here 5' and 'here 7'? Amcharts is not ready? What did I miss?

after that it shows the connector alert:
here connector 1