0

ZK Charts and Settings

asked 2015-07-06 12:41:42 +0800

IngoB gravatar image IngoB flag of Germany
256 6

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

delete flag offensive retag edit

Comments

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

3 Answers

Sort by ยป oldest newest most voted
0

answered 2015-07-15 09:42:33 +0800

vincentjian gravatar image vincentjian
2245 6

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:

<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.

link publish delete flag offensive edit
0

answered 2015-07-07 10:20:04 +0800

IngoB gravatar image IngoB flag of Germany
256 6

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>
link publish delete flag offensive edit
0

answered 2015-07-16 11:05:11 +0800

IngoB gravatar image IngoB flag of Germany
256 6

updated 2015-07-16 11:26:03 +0800

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
link publish delete flag offensive edit

Comments

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

Thank you. Everything is working now. You were right :)

IngoB ( 2015-07-17 11:24:44 +0800 )edit
Your answer
Please start posting your answer anonymously - your answer will be saved within the current session and published after you log in or create a new account. Please try to give a substantial answer, for discussions, please use comments and please do remember to vote (after you log in)!

[hide preview]

Question tools

Follow
1 follower

RSS

Stats

Asked: 2015-07-06 12:41:42 +0800

Seen: 36 times

Last updated: Jul 16 '15

Support Options
  • Email Support
  • Training
  • Consulting
  • Outsourcing
Learn More