How to set Chart width in a window that have 100%?

Question

asked 2013-06-20 21:41:29 +0800

I'm trying out the Zk charts, and noticed that I cannot set width to 100%. If my window have a 100% width, how can I calculate the Chart size?

I don't want to fix my window width because the browser can have the center (border layout) resized and I want the chart to fit the new width.

Any solutions for that?

<borderlayout hflex="1" vflex="1">
...
<center>
  <window hflex="1" vflex="1" id="centerWindow">
     <tabbox id="mainTabs" width="100%" height="100%" sclass="mainTabs">
         <tabs>
           <tab label="Chart Data" closable="true"/>
    </tabs>
    <tabpanels>
        <tabpanel>
        <include src='chart.zul' />
        </tabpanel>
    </tabpanels>
     </tabbox>
  </window>
</center>
...
</borderlayout>

Accepted Answer

answered 2013-06-21 05:11:04 +0800

cor3000
6280 ● 2 ● 7

updated 2013-06-21 05:24:33 +0800

At the moment charts only support a user defined width and height and no hflex/vflex or percentage A workaround to fit the chart automatically into the surrounding container is:

<div hflex="1" onAfterSize='chart.setWidth(event.getWidth() + "px")'>
   <chart id="chart" type="area" />
</div>

Like that whenever the <div> resizes to its parents width, it will update the width of the chart at the same time an trigger a rerender.

see AfterSizeEvent since 6.5.2

It works, thanks!
SergioMichels ( 2013-06-21 18:44:54 +0800 )edit

Answer 2

0

answered 2015-08-06 14:10:45 +0800

ifmis
1 ● 2

I have 2 pages one including another and I want to achieve the Chart resize (Responsiveness). But the chart size is not visible as I expected.

Please, any one can tell me what I am doing wrong!

page.zul

<panel hflex="1" vflex="1">
  <panelchildren>
            <hlayout hflex="6" vflex="1">
                <div sclass="chart" hflex="4" vflex="1">
                    <include
                        src="chart.zul" />
                </div>

                <vlayout hflex="2"></vlayout>
     </panelchildren>
 </panel>

chart.zul

<div hflex="1">
     <charts id="chart" type="column" hflex="1" />
</div>

Thanks.

Emma.

link publish delete flag offensive edit

Comments

Try assigning the include component hflex and vflex also.

vincentjian ( 2015-08-11 01:16:36 +0800 )edit

Hello Vincentjian, Thanks alot for your reponse. I tried your recommendation but still I am getting the same result. The chart is coming very small (width is like 2% of the page) so that you can't read its content. Where Am I doing wrong?

ifmis ( 2015-08-11 14:48:43 +0800 )edit

Did you set hflex="1" and vflex="1" on include component? Also, ZK Charts support h/vflex since 2.0.0, which version are you using?

vincentjian ( 2015-08-12 02:13:42 +0800 )edit

Take a look at my code above. From the window and the panel which are the parent components to the charts the last child component have these attributes vflex="1" hflex="1". Review it and help me if I am doing wrong. Thanks a lot.

ifmis ( 2015-08-12 06:05:00 +0800 )edit

I mean on include component. <include src="chart.zul" hflex="1" vflex="1" />

vincentjian ( 2015-08-12 07:39:12 +0800 )edit

CORE FRAMEWORK

FEATURED COMPONENTS

TOOLS

EXPLORE ZK

RESOURCES

LEARN ZK

RESOURCES

GET HELP

RESOURCES

MORE ABOUT ZK

MORE ABOUT ZK

How to set Chart width in a window that have 100%?

2 Answers

Comments

Comments

Question tools

Stats

Related questions