Hi,
I got a window with a tabbox with three tabpanels.
chart | data | settings
The default tabpanel is data, since you have to add some data to display a chart. In the tabpanel settings you can change some chart settings. (legend, logarithmic, ...)
//init of the window charts = new Charts(); charts.getYAxis().setType("linear"); tabbox.setSelectedIndex(1)
My problem is: If the window opens, the chart is created. If you switch instantly from data to settings and change for example logarithmic an error appears: TypeError: this.yAxis is undefined
if (logarithmic.isChecked()) { charts.getYAxis().setType("logarithmic"); } else { charts.getYAxis().setType("linear"); }
BUT If you switch from data to chart and then to settings (presumably because the chart is "drawn") no error occurs.
How am prevent this error? I tried to check null on YAxis and Type, but both are set and not empty. Any Idea?
ZK 8.0.0-RC, ZK Charts 2.0.0.1, FF 39.0
Hi,
I can confirm that this issue is cased by the client render on demand (rod) feature. You can disable this feature as follows to resolve this issue:
Tags
People
Badges
Help
<zk>
<window width="500px" height="380px" apply="TestController">
<borderlayout>
<center border="none">
<hlayout id="content" hflex="true">
<custom-attributes org.zkoss.zul.client.rod="false" />
</hlayout>
</center>
</borderlayout>
</window>
</zk>
BTW, I would suggest use Hlayout component instead of Hbox, as Hbox has very complex HTML DOM structure due to using nested table element.
Hi,
here's a simplified example, but it reproduces the error.
public class TestController extends GenericForwardComposer<Component> {
private static final long serialVersionUID = 1L;
private Hbox content;
private Charts charts;
private boolean isLog = true;
@Override
public void doAfterCompose(Component comp) {
try {
super.doAfterCompose(comp);
} catch (Exception e) {
e.printStackTrace();
}
charts = new Charts();
charts.getYAxis().setType("linear");
Tabbox tabbox = new Tabbox();
tabbox.setHflex("true");
tabbox.setVflex("true");
Tabs tabs = new Tabs();
Tab tabChart = new Tab("chart");
tabs.appendChild(tabChart);
Tab tabData = new Tab("data");
tabs.appendChild(tabData);
Tabpanel tabpanelChart = new Tabpanel();
tabpanelChart.appendChild(charts);
Tabpanel tabpanelData = new Tabpanel();
tabpanelData.appendChild(new Label("dataPanelTab"));
Tabpanel tabpanelSettings = new Tabpanel();
Tab tabSettings = new Tab("setting");
tabs.appendChild(tabSettings);
Button btnLog = new Button("toggle log");
btnLog.addEventListener(Events.ON_CLICK, new EventListener<Event>() {
@Override
public void onEvent(Event event) throws Exception {
if (isLog) {
charts.getYAxis().setType("logarithmic");
isLog = false;
} else {
charts.getYAxis().setType("linear");
isLog = true;
}
}
});
tabpanelSettings.appendChild(btnLog);
Tabpanels tabpanels = new Tabpanels();
tabbox.appendChild(tabs);
tabbox.appendChild(tabpanels);
tabpanels.appendChild(tabpanelChart);
tabpanels.appendChild(tabpanelData);
tabpanels.appendChild(tabpanelSettings);
content.appendChild(tabbox);
tabbox.setSelectedIndex(1);
}
}
<zk>
<window width="500px" height="380px" apply="TestController">
<borderlayout>
<center border="none">
<hbox id="content" hflex="true" />
</center>
</borderlayout>
</window>
</zk>
Thank you for your solution. Now the logarithm is properly set (no error), BUT if I switch to the data tab this error appears:
ERROR: [Desktop z_96c:/chart.zul] client error: Failed to mount: Highcharts error #10: www.highcharts.com/errors/10
The link in the error message http://www.highcharts.com/errors/10 describes the error pretty clear. Can you double check the value?
vincentjian ( 2015-07-17 02:13:17 +0800 )editAsked: 2015-07-06 12:41:42 +0800
Seen: 39 times
Last updated: Jul 16 '15
Can you provide more detailed sample code? The problem may caused by the render on demand feature of tabbox that it won't render the chart unless the corresponding tab is selected.
vincentjian ( 2015-07-07 07:38:14 +0800 )edit