0

org.zkoss.zul.Chart.setWidth("100%") not working?

asked 2009-12-26 16:37:00 +0800

andersviklund gravatar image andersviklund
93 2

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());
}

delete flag offensive retag edit

4 Replies

Sort by ยป oldest newest

answered 2009-12-26 20:19:02 +0800

caclark gravatar image caclark
1753 2 5
http://clarktrips.intltwi...

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,

link publish delete flag offensive edit

answered 2009-12-28 21:17:32 +0800

sankarsk gravatar image sankarsk
33

You can add the maximizedMode="whole" attribute in portallayout tag.

like <portallayout maximizedMode="whole">

applicable only after ZK5.0..

link publish delete flag offensive edit

answered 2009-12-29 14:02:23 +0800

andersviklund gravatar image andersviklund
93 2

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)

link publish delete flag offensive edit

answered 2009-12-30 00:53:28 +0800

samchuang gravatar image samchuang
4084 4

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>

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

RSS

Stats

Asked: 2009-12-26 16:37:00 +0800

Seen: 1,287 times

Last updated: Dec 30 '09

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