-
FEATURED COMPONENTS
First time here? Check out the FAQ!
Hi,
how can I make a org.zkoss.zul.Chart fill 100% of a parent panel?
Lets say the panel is moved within a portal layout or resized, I would like the contained chart
also to resize automatically.
I have tried with chart.setWidth("100%"), but it throws an exception.
Please Help!!
private void getHorizontalBarChart(){
CategoryModel model = new SimpleCategoryModel();
model.setValue("2001", "Q1", new Integer(20));
model.setValue("2001", "Q2", new Integer(35));
model.setValue("2001", "Q3", new Integer(40));
model.setValue("2001", "Q4", new Integer(55));
model.setValue("2002", "Q1", new Integer(40));
model.setValue("2002", "Q2", new Integer(60));
model.setValue("2002", "Q3", new Integer(70));
model.setValue("2002", "Q4", new Integer(5990));
org.zkoss.zul.Chart chart = new org.zkoss.zul.Chart();
chart.setType("stacked_bar");
chart.setModel(model);
chart.setOrient("horizontal");
Panel panel = new Panel();
panel.setHeight("420px");
panel.setTitle("Chart Title");
panel.setBorder("normal");
panel.setCollapsible(true);
panel.setClosable(true);
panel.setMaximizable(true);
Panelchildren panelchildren =new Panelchildren();
panelchildren =new Panelchildren();
panelchildren.appendChild(chart);
panel.appendChild(panelchildren);
portalchildrenleft.insertBefore(panel,portalchildrenleft.getFirstChild());
}
I had the same issue. The width on charts has to be the number of pixels; percentages are not allowed (hence the NumberFormatExcpetion you got). My solution was to hook the window's onSize event and recalculate things myself. Here's a sample ZUL with my chart in it. I'm an MVC & Spring guy, so there are pieces in this code for databinding and revolving the "apply" controller via the DelegatingVarialbeResolver that you can do without.
<?xml version="1.0" encoding="windows-1251"?> <zk> <?variable-resolver class="org.zkoss.zkplus.spring.DelegatingVariableResolver"?> <?init class="org.zkoss.zkplus.databind.AnnotateDataBinderInit" arg0="busIncidentsByDoWWindow" ?> <window id="busIncidentsByDoWWindow" border="normal" apply="${busIncidentsChartController}" width="500px" height="345px" closable="true" sizable="true" left="20%" top="30px" xmlns:a="http://www.zkoss.org/2005/zk/annotation"> <zscript> int stringToInt(String str) { int j = str.lastIndexOf("px"); if (j > 0) { final String num = str.substring(0, j); return Integer.parseInt(num); } j = str.lastIndexOf("pt"); if (j > 0) { final String num = str.substring(0, j); return (int) (Integer.parseInt(num) * 1.3333); } j = str.lastIndexOf("em"); if (j > 0) { final String num = str.substring(0, j); return (int) (Integer.parseInt(num) * 13.3333); } return Integer.parseInt(str); } </zscript> <!-- this is what you really need...it calls the defined stringToInt() above --> <attribute name="onSize"> // 50 and 95 are my own fudge factors...adjust as necessary int newWidth = stringToInt(self.width) - 50 ; int newHeight = stringToInt(self.height) - 95 ; //alert(newWidth + " : "+ newHeight ); chart.setWidth(String.valueOf(newWidth)) ; chart.setHeight(String.valueOf(newHeight)) ; </attribute> <zscript> <![CDATA[//@IMPORT import java.util.Calendar; ]]> </zscript> <!-- you don't need this, but it shows how I prepopulate a list box with some years... --> <zscript> <![CDATA[ Calendar rightNow = Calendar.getInstance(); int currentYear = rightNow.get( Calendar.YEAR ) ; int prevYear = -1 ; System.out.println( "current year: " + currentYear ) ; ArrayList data = new ArrayList() ; data.add( "- Select -" ) ; for(int j = currentYear; j >= 2008; --j) { prevYear = j + 1 ; data.add( String.valueOf(j) + "-" + String.valueOf(prevYear) ) ; } ListModel strset = new SimpleListModel(data); ]]> </zscript> <caption><label style="display: block; text-align: center; font-weight: bold; font-size: 16px;">Bus Incidents By Day of Week</label></caption> <borderlayout> <north> <hbox> School Year: <listbox id="schoolYearListbox" width="100px" model="${strset}" mold="select" /> <radiogroup id="chartTypeRadio"> <radio label="Pie" value="pie" /> <radio label="Bar" value="bar" selected="true" /> </radiogroup> </hbox> </north> <center> <chart id="chart" width="450px" height="250px" type="bar" threeD="true" fgAlpha="128" model="@{win$controller.countByDayOfWeekModel}" <!-- I set a variable in my composer's doAfterCompose(...) named win$composer to support this --> showLegend="false" > </chart> </center> <south> <hbox> <button id="refreshButton" label="Refresh" /> <checkbox label="3D Chart" checked="true" onCheck="chart.setThreeD(self.isChecked())" /> <checkbox label="Legend" checked="false" onCheck="chart.setShowLegend(self.isChecked())" /> <checkbox label="Tooltip" checked="true" onCheck="chart.setShowTooltiptext(self.isChecked())" /> </hbox> </south> </borderlayout> </window> </zk>
Perhaps you can adapt this to some other UI container instead of a Window...
HTH,
Despite having selected the zk-bin-ent-5.0.0RC2 version in eclipse, I get this error
<portallayout id="portallayout" maximizedMode="whole">
<portalchildren width="70%" id="portalchildrenleft"/>
<portalchildren width="30%" id="portalchildrenright"/>
</portallayout>
org.zkoss.zk.ui.metainfo.PropertyNotFoundException: Method setMaximizedMode not found for class org.zkoss.zkmax.zul.Portallayout
org.zkoss.zk.ui.metainfo.Property.resolve(Property.java:192)
org.zkoss.zk.ui.metainfo.Property.assign0(Property.java:208)
org.zkoss.zk.ui.metainfo.Property.assign(Property.java:175)
org.zkoss.zk.ui.metainfo.ComponentInfo.applyProperties(ComponentInfo.java:769)
org.zkoss.zk.ui.impl.AbstractUiFactory.newComponent(AbstractUiFactory.java:95)
org.zkoss.zk.ui.impl.UiEngineImpl.execCreateChild0(UiEngineImpl.java:616)
org.zkoss.zk.ui.impl.UiEngineImpl.execCreateChild(UiEngineImpl.java:587)
org.zkoss.zk.ui.impl.UiEngineImpl.execCreate0(UiEngineImpl.java:531)
org.zkoss.zk.ui.impl.UiEngineImpl.execCreateChild(UiEngineImpl.java:563)
org.zkoss.zk.ui.impl.UiEngineImpl.execCreate0(UiEngineImpl.java:531)
org.zkoss.zk.ui.impl.UiEngineImpl.execCreate(UiEngineImpl.java:498)
org.zkoss.zk.ui.impl.UiEngineImpl.execNewPage0(UiEngineImpl.java:378)
org.zkoss.zk.ui.impl.UiEngineImpl.execNewPage(UiEngineImpl.java:299)
org.zkoss.zk.ui.http.DHtmlLayoutServlet.process(DHtmlLayoutServlet.java:229)
org.zkoss.zk.ui.http.DHtmlLayoutServlet.doGet(DHtmlLayoutServlet.java:165)
javax.servlet.http.HttpServlet.service(HttpServlet.java:617)
javax.servlet.http.HttpServlet.service(HttpServlet.java:717)
Hi
It work fine on zk demo, do you use ZK 5.0 RC2 EE Evaluation version, it should work
<portallayout id="portallayout" maximizedMode="whole"> <portalchildren width="70%" id="portalchildrenleft"/> <portalchildren width="30%" id="portalchildrenright"/> </portallayout>
Asked: 2009-12-26 16:37:00 +0800
Seen: 1,287 times
Last updated: Dec 30 '09