Tags
People
Badges
Help-
CORE FRAMEWORK
FEATURED COMPONENTS
-
RESOURCES
-
LEARN ZK
RESOURCES
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.
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
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
Hello, may I ask what version of zk and zkcharts are you using?
christopherszu ( 2015-09-11 02:34:21 +0800 )editCan 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 )editFinally 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:
Big up to ZK Team for this feature.
Emma ~ IFMIS
Asked: 2015-08-06 08:10:45 +0800
Seen: 63 times
Last updated: Sep 16 '15
//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