ext.ux.ofcgxt - ChartWidget

[gslender]

UPDATE 24/12/2008 : v1.2.1 released

[pedrosousa]

UPDATE: 2009-Jan-07: Released v1.2.3 - bug fix regarding attach/detach + sync with OFCGWT

[pedrosousa]

Hi,

I using ext.ux.ofcggxt. So far I have problems when I add the chart widget to a Panel with CenterLayout or if I add to an Horizontal Panel. Anyone has the same problem?

My goal is to put charts in Portlet panels and I want to center the chart.

Can anyone give me a hand?

Regards,
Pedro Sousa

[dardison]

Hi Pedro,

I'm also using Chart inside panels but in my case is the only widget I have in the panel, so I used FitLayout and it works fine. I don't have experience with other layouts and Charts.

Regards,
Daniel

[gslender]

I using ext.ux.ofcggxt. So far I have problems when I add the chart widget to a Panel with CenterLayout or if I add to an Horizontal Panel. Anyone has the same problem?

There are known bugs in IE that cause this problem. GXT breaks the DOM and so IE coughs and the Javascript <-> Flash interaction breaks. There is nothing I can do (at least I don't think there is).

In any case, can you provide a test snippet that demonstrates the bug. I might have another go at trying to solve it.

Cheers,
Grant

[gslender]

In any case, can you provide a test snippet that demonstrates the bug. I might have another go at trying to solve it.

eg... this works fine for me so its hard to know what to fix ;-)

		Viewport vp = new Viewport();
		vp.setLayout(new CenterLayout());
		ContentPanel cp = new ContentPanel();
		cp.setHeading("chart");
		cp.setSize(400,400);
		cp.add(getGxtChartWidget());
		vp.add(cp);
		RootPanel.get().add(vp);

[widget]

How to properly load data to ext.ux.ofcggxt's store before render it?

This code does not work:

public class GraphPanel extends LayoutContainer {

    @Override
    protected void onRender(Element parent, int index) {
        super.onRender(parent, index);
             
        setLayout(new FitLayout());
        
        final ListStore<DayStat> store = new ListStore<DayStat>();
        DBServiceAsync service = (DBServiceAsync) Registry.get(MainWindow.DBSERVICE);
        service.getDayStats(new AsyncCallback<List<DayStat>>() {

            public void onFailure(Throwable caught) {
            }

            public void onSuccess(List<DayStat> result) {
                for (DayStat dayStat : result) {
                    store.add(dayStat);
                }
                store.commitChanges();
            }
            
        });
        
        GxtChartWidget<DayStat> chart = new GxtChartWidget<DayStat>();
        chart.setStore(store);
        
        BarChartProvider<DayStat> bcp = new BarChartProvider<DayStat>(BarChart.BarStyle.GLASS, "Cdr", "D");
        bcp.getChartData().setTitle(new Text("Some title"));
        bcp.getChartData().setBackgroundColour("#eeeeee");
        bcp.getBarChart().setColour("#9933CC");
        
        chart.setModelChartProvider(bcp);
        
        add(chart);
    }    

}

But if I load data in button's listener, it works:

public class GraphPanel extends LayoutContainer {

    @Override
    protected void onRender(Element parent, int index) {
        super.onRender(parent, index);
        
        //setLayout(new FitLayout());
        
        // some initial data
        store.add(new DayStat("2008", "12", "01", "10.0", "20.0"));
        store.add(new DayStat("2008", "12", "02", "11.0", "20.0"));
        store.add(new DayStat("2008", "12", "03", "13.0", "20.0"));
        
        GxtChartWidget<DayStat> chart = new GxtChartWidget<DayStat>();
        chart.setStore(store);
        
        BarChartProvider<DayStat> bcp = new BarChartProvider<DayStat>(BarChart.BarStyle.GLASS, "Cdr", "D");
        bcp.getChartData().setTitle(new Text("Some title"));
        bcp.getChartData().setBackgroundColour("#eeeeee");
        bcp.getBarChart().setColour("#9933CC");
        
        chart.setModelChartProvider(bcp);
        
        chart.setPixelSize(600, 50);
        add(chart);
        
        Button btn = new Button("Load");
        
        btn.addSelectionListener(new SelectionListener<ButtonEvent>() {

            @Override
            public void componentSelected(ButtonEvent ce) {
                DBServiceAsync service = (DBServiceAsync) Registry.get(MainWindow.DBSERVICE);
                service.getDayStats(new AsyncCallback<List<DayStat>>() {

                    public void onFailure(Throwable caught) {
                    }

                    public void onSuccess(List<DayStat> result) {
                        for (DayStat dayStat : result) {
                            store.add(dayStat);
                        }
                        store.commitChanges();
                    }
                    
                });
            }
            
        });
        add(btn);
    }    

}

Will work GxtChartWidget with RPCProxy?

[pedrosousa]

There are known bugs in IE that cause this problem. GXT breaks the DOM and so IE coughs and the Javascript <-> Flash interaction breaks. There is nothing I can do (at least I don't think there is).

In any case, can you provide a test snippet that demonstrates the bug. I might have another go at trying to solve it.

Cheers,
Grant

Hi,

I made a sample app where a demonstrate de problem using center layout in a portlet. Hope it can helps.

package pt.test.client;

import com.extjs.gxt.ui.client.widget.Viewport;
import com.extjs.gxt.ui.client.widget.custom.Portal;
import com.extjs.gxt.ui.client.widget.custom.Portlet;
import com.extjs.gxt.ui.client.widget.layout.CenterLayout;
import com.extjs.gxt.ui.client.widget.layout.FitLayout;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.Random;
import com.google.gwt.user.client.ui.RootPanel;
import com.rednels.ofcgwt.client.IChartListener;
import com.rednels.ofcgwt.client.model.ChartData;
import com.rednels.ofcgwt.client.model.elements.PieChart;

import ext.ux.ofcgxt.client.GxtChartWidget;

public class Test implements EntryPoint {

    public void onModuleLoad() {    
        Portal portal = new Portal(1);  
        portal.setBorders(true);  
        portal.setStyleAttribute("backgroundColor", "white");  
        portal.setColumnWidth(0, 1);
        
        Portlet portlet = new Portlet();  
        portlet.setHeading("Chart in a Portlet");  
        portlet.setLayout(new CenterLayout());
        portlet.setHeight(400);
        portlet.add(getCP2());
        
        portal.add(portlet, 0);
        
        final Viewport vp = new Viewport();
        vp.setLayout(new FitLayout());
        
        vp.add(portal);

        RootPanel.get().add(vp);
    }

    private GxtChartWidget getCP2() {

        final TestPieChart tpc = new TestPieChart();
        final GxtChartWidget chart2 = new GxtChartWidget();
        chart2.setJsonData(tpc.getJSON());
        chart2.addChartListeners(new IChartListener() {
            public void handleChartReadyEvent() {
                // chart is ready event... 
                // not used but could be if required
            }
            public void imageSavedEvent() {            
                // chart was saved ok event... 
                // not used but could be if required    
            }
        });
        chart2.setSize("300", "300");
        
        return chart2;
    }

    public class TestPieChart {
        ChartData c;
        PieChart p;

        public TestPieChart() {
            p = new PieChart();
            p.setGradientFill(true);
            p.setAnimate(false);
            p.setStartAngle(35);
            p.setBorder(2);
            p.setColours("#d01f3c", "#345678", "#356aa0", "#C79810");
            p.setTooltip("#label#<br>$#val# (#percent#)");
            p.setAlpha(0.6f);
            p.setNoLabels(true);

            c = new ChartData("Pie Chart");
            c.addElements(p);
            c.setBackgroundColour("#eeffee");
        }

        public String getJSON() {
            p.getValues().clear();
            int n = Random.nextInt(6) + 2;
            for (int i = 0; i < n; i++) {
                p.addSlice(Random.nextInt(12) * 1000, "Slice #" + (i + 1));
            }
            return c.toString();
        }
    }
}

I tested with JDK 1.5.0_15, GWT 1.5.2, GXT 1.2 and ofcgxt 1.2.3.

Regards,

[gslender]

ok, so I tried you sample and it works fine ?

I'm using JDK 1.6 / GWT 1.5.3 / GXT 1.2.1 / ofcgxt 1.2.3


So I'm not sure what else to say?

[gslender]

How to properly load data to ext.ux.ofcggxt's store before render it?

This code does not work:

Will work GxtChartWidget with RPCProxy?

Can you please post a full RPC example - with the server side code etc... zip up the project if you need and post to me (or email to [email protected])

Thanks
Grant