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:

[code]

[/code]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();
    }
}

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

[code]
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();
}

}
[/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:

[code]
@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);
}

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

25822.png

Hi,

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.

-Pontus