Important Notice - Forums is archived
To simplify things and help our users to be more productive, we have archived the current forum and focus our efforts on helping developers on Stack Overflow. You can post new questions on Stack Overflow or join our Discord channel.

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.
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
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