1. #1
    Ext User
    Join Date
    Sep 2009
    Posts
    1
    Vote Rating
    0
    fakoori is on a distinguished road

      0  

    Default Using GWT Gauge in a GXT Portlet

    Using GWT Gauge in a GXT Portlet


    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

  2. #2
    Ext User
    Join Date
    Nov 2009
    Posts
    3
    Vote Rating
    0
    pawel.sawicki is on a distinguished road

      0  

    Default


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

    First - create some abstract portlet class
    Code:
    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 :

    Code:
    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 :

    Code:
    Portal portal = new Portal();
    BarChartPortlet barPortlet = new BarChartPortlet();
    portal.add(barPortlet,0);
    Hope it helps

  3. #3
    Ext User
    Join Date
    Nov 2009
    Posts
    3
    Vote Rating
    0
    pawel.sawicki is on a distinguished road

      0  

    Default


    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.

  4. #4
    Ext User
    Join Date
    Sep 2008
    Location
    Germany
    Posts
    961
    Vote Rating
    1
    Arno.Nyhm is on a distinguished road

      0  

    Default


    http://code.google.com/p/gwt-google-apis/
    i think you use this one?
    This forum needs your help: you got hints from the community and now you have fixed your code? dont just reply with "now its fixed" or "i found the error"! please take the time to post also an detailed answer with the working code.

    GreaseMonkey Script for a GXT-only Forum: it hides ExtJs here: New Posts • Search Results • Advanced Search form • Category overview http://www.extjs.com/forum/showthrea...041#post410041

  5. #5
    Ext User
    Join Date
    Nov 2009
    Posts
    3
    Vote Rating
    0
    pawel.sawicki is on a distinguished road

      0  

    Default


    to be more precious (I have listed BarChart code not Gauge code), Gauge code is listed below :
    Code:
    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

  6. #6
    Ext User si_gee2000's Avatar
    Join Date
    Apr 2008
    Posts
    23
    Vote Rating
    0
    si_gee2000 is on a distinguished road

      0  

    Default


    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.

  7. #7
    Ext User
    Join Date
    Jul 2010
    Posts
    4
    Vote Rating
    0
    JochenH is on a distinguished road

      0  

    Default


    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.

  8. #8
    Ext User si_gee2000's Avatar
    Join Date
    Apr 2008
    Posts
    23
    Vote Rating
    0
    si_gee2000 is on a distinguished road

      0  

    Default


    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.

  9. #9
    Ext User si_gee2000's Avatar
    Join Date
    Apr 2008
    Posts
    23
    Vote Rating
    0
    si_gee2000 is on a distinguished road

      0  

    Default


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

  10. #10
    Ext User
    Join Date
    Jul 2010
    Posts
    4
    Vote Rating
    0
    JochenH is on a distinguished road

      0  

    Default


    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.