Using GWT Gauge in a GXT Portlet

[fakoori]

Hi folks. I have big problem in using gwt.visualization widgets like gauge for adding to a GXT portlet? can anyone tell me how could i do that? thanks so much

[pawel.sawicki]

Hi,
I am using such an approach and it works :

First - create some abstract portlet class

public abstract class AbstractChartPortlet extends Portlet {
    
    protected DataTable dataTable;
    
    public AbstractChartPortlet(String title, int height, String url){
        
        setHeading(title);
        setHeight(height);
        setLayout(new FitLayout());
        
        Query query = Query.create(url);
        query.send(new Callback() {

            @Override
            public void onResponse(QueryResponse response) {
                if (response.isError()) {
                    Log.error("Error in query: " + response.getMessage() + ' ' + response.getDetailedMessage());
                    return;
                }
                dataTable = response.getDataTable();
                createChart();

            }
        });
    }

   protected abstract void createChart();

then I have some certain implementation of Portlet that contains different gaugae,
for example :

public class BarChartPortlet extends AbstractChartPortlet{
    
    private final static String DATA_URL = "some url";

    public BarChartPortlet() {
        super("Title", 250, DATA_URL);
    }

    @Override
    protected void createChart() {
        Options options = Options.create();
        options.setWidth(380);
        options.setHeight(200);
        options.set3D(true);
        options.setShowCategories(true);
        options.setEnableTooltip(true);
        BarChart viz = new BarChart(dataTable, options);
        
        add(viz);
        doLayout();
    }

}

and finally usage :

Portal portal = new Portal();
BarChartPortlet barPortlet = new BarChartPortlet();
portal.add(barPortlet,0);

Hope it helps

[pawel.sawicki]

BarChart comes from com.google.gwt.visualization.client.visualizations.BarChart so it is a gwt.visualization gauge.
In my example we connect to remote data source to get some data to be shown within bar chart.

[Arno.Nyhm]

http://code.google.com/p/gwt-google-apis/
i think you use this one?

[pawel.sawicki]

to be more precious (I have listed BarChart code not Gauge code), Gauge code is listed below :

public class  GaugePortlet extends AbstractChartPortlet {

    private final static String DATA_URL = "some url";

    public  GaugePortlet() {
        super("Title", 250, DATA_URL);
    }

    @Override
    protected void createChart() {
        Gauge.Options options = Gauge.Options.create();
    options.setWidth(400);
    options.setHeight(240);
    options.setGaugeRange(0, 24);
    options.setGreenRange(0, 6);
    options.setYellowRange(6, 12);
    options.setRedRange(12, 24);
      Gauge gauge = new Gauge(dataTable, options);
        add(gauge );
        doLayout();

    }

usage : create instance of this class and add it to your portal

[si_gee2000]

I agree - I have no problems with this - portlets and all visulaizations work OK. Do make sure you are getting the gwt / gxt container to render - sometime you will need to use a layout(true) call to force it to refresh once this google viz is loaded and drawn.

[JochenH]

Hello,

I'm new to GWT and GXT. I'm very interested in using Google Visualizations within a GXT Portlet. I've used the source code of the GXT Portal demo and the code shown within this thread. I used a line chart of Google's Visualization API. After the start of the GXT portal, the line chart is displayed within the respective portlet. Unfortunately, after a drag and drop of the chart's portlet to another row, the chart disappears and an empty portlet in the original size will be shown. I have tried to call the layout method of the respective portlet, without success. Please can you give me some hints how to display the line chart again after an drag and drop of the respective portlet.

Thank you in advance.

[si_gee2000]

for me the "layout(true)" call always seems to work, but you can also try the underlying draw commands on the Google Visualization object itself (see the google visualization api docs) .. Make sure you use the force = true argument in the layout call though.

[si_gee2000]

Oh - and make sure the layout(true) call is on the Content Panel of the portlet, not the portlet

[JochenH]

Maybe this is a stupid question. How can I invoke layout(true) of the portlet's Content Panel? The Portlet inherits the layout(boolean) method from LayoutContainer.