0

ZK Charts Flexibility - Responsiveness

asked 2015-08-06 08:10:45 +0800

ifmis gravatar image ifmis
1 2

Hello,

I'm a newbie in ZK especially in ZK Charts. In my current application, I want to create a dashboard with many components such as charts, panels, etc. On dashboard, the responsiveness is the most crucial point like Flatty template (wrapbootstrap.com/preview/WB0P6NR1N).

So the big challenge is that I can't use the percentage on ZK charts or FLEX attribute (vflex, hflex).

Please anyone with a solution, I will really appreciate.

Thanks.

Emma ~ IFMIS.

delete flag offensive retag edit

Comments

//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></hlayout></panelchildren></panel> //chart.zul//<div hflex="1"><charts id="chart" type="column" hflex="1" /></div>

ifmis ( 2015-08-06 14:00:22 +0800 )edit

3 Answers

Sort by ยป oldest newest most voted
0

answered 2015-08-06 10:31:08 +0800

Darksu gravatar image Darksu
1991 1 4

Hello ifmis,

As mentioned at the following post, you can accomplish your task by fitting the chart automatically into the surrounding container (i.e. a div)

http://forum.zkoss.org/question/87550/how-to-set-chart-width-in-a-window-that-have-100/

If you need more assistance, please let me know.

Best Regards,

Darksu

link publish delete flag offensive edit

Comments

0

answered 2015-08-10 06:38:59 +0800

ifmis gravatar image ifmis
1 2

Hello Darksu,

Thank you for your good and helping answer to my question. I tried using below code, but I still have a problem. The chart is very small so that I can read its contents.

//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></hlayout>
     </panelchildren>
</panel> 

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

Your help is very welcome.

Thank you.

Emma IFMIS

link publish delete flag offensive edit

Comments

Any one with a solution or comment please???

ifmis ( 2015-08-19 07:05:46 +0800 )edit

Hello, may I ask what version of zk and zkcharts are you using?

christopherszu ( 2015-09-11 02:34:21 +0800 )edit

Hello, I am using zk 7.0.0 and zk charts 2.0.0.1. Thanks

ifmis ( 2015-09-11 07:02:03 +0800 )edit

Can you record a video for us to check what's wrong in your environment? the tool - https://www.techsmith.com/jing.html

jumperchen ( 2015-09-15 09:18:27 +0800 )edit

Video shared at http://www.screencast.com/t/A8Se3uTVpYm

ifmis ( 2015-09-15 13:47:43 +0800 )edit
0

answered 2015-09-16 15:05:31 +0800

ifmis gravatar image ifmis
1 2

Finally I got the simple answer: Charts support Horizontal Flexibility as other components:

//chart.zul//

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

Note:

  1. min hflex is not supported
  2. hflex="1" seems to work but with difficulties
  3. As you see above my code hflex="max" works perfectly as I wanted.

Big up to ZK Team for this feature.

Emma ~ IFMIS

link publish delete flag offensive 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-08-06 08:10:45 +0800

Seen: 57 times

Last updated: Sep 16 '15

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