AmCharts.js - don't work?

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:


[/code]2. Component and state class:

public class AmChartComponent extends AbstractJavaScriptComponent {

    private static final long serialVersionUID = 201605191300345345L;

    public void setValue(String value) {

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

    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;

[/code]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");
    AmChartComponent amComp = new AmChartComponent();

[/code]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:

@JavaScript({“vaadin://themes/mytheme/js/amcharts/amcharts.js”, “vaadin://themes/mytheme/js/amcharts/serial.js”})
public class MyUI extends UI {

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);

[/code]Something I missed, because the script in the amchartlayout.html shows:

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



In this case it looks like AmCharts.ready(…) throws an exception. Are there any error such messages in the browser console?

I have never myself used any JS-code in a custom layout, and I’m not sure it will always work properly. It might be better to set up and call the Javascript library from the component initialisation (in amchartcomponent-connector.js). That way everything will be initialised properly.