Announcement

Collapse
No announcement yet.
X
  • Filter
  • Time
Clear All
new posts

    Google Visualization

    Hi, I am new to SmartGWT as well as with the Visualization API from Google.

    Right now I'm trying to make those two work together, but I can't manage to find what I do wrong. So I'm asking for help.

    I use this VLayout to make my main panel which consist in a header and the container of the Graph (it's a PieChart).

    Here is the code (I use the latest vertions of GWT, Smart and Visu.).
    Code:
    import com.google.gwt.visualization.client.AbstractDataTable;
    import com.google.gwt.visualization.client.DataTable;
    import com.google.gwt.visualization.client.VisualizationUtils;
    import com.google.gwt.visualization.client.AbstractDataTable.ColumnType;
    import com.google.gwt.visualization.client.visualizations.PieChart;
    import com.smartgwt.client.types.Alignment;
    import com.smartgwt.client.widgets.IButton;
    import com.smartgwt.client.widgets.Label;
    import com.smartgwt.client.widgets.layout.HLayout;
    import com.smartgwt.client.widgets.layout.VLayout;
    
    public class FloWatchMainPanel extends VLayout {
    
    	public FloWatchMainPanel() {
    
    		HLayout header = new HLayout();
    		header.setMembers(new Label("test"), new IButton("Logout"));
    		header.setStyleName("target-header");
    		header.setLayoutMargin(15);  
    		header.setHeight(50);
    		header.setAlign(Alignment.RIGHT);
    		addMember(header);
    		
    		addMember(new Graphic());
    
    	}
    	public class Graphic extends HLayout {
    		public Graphic() {
    			Runnable onLoadCallback = new Runnable() {
    				public void run() {
    					addMember(new PieChart(createTablePie(), createOptionsPie()));
    				}
    			};
    			VisualizationUtils.loadVisualizationApi(onLoadCallback, PieChart.PACKAGE);
    		}
    		private PieChart.Options createOptionsPie() {
    			PieChart.Options options = PieChart.Options.create();
    			options.setWidth(400);
    			options.setHeight(240);
    			options.set3D(true);
    			options.setBorderColor("white");
    			options.setTitle("GWT Chart test.");
    			return options;
    		}
    		private AbstractDataTable createTablePie() {
    			DataTable data = DataTable.create();
    			data.addColumn(ColumnType.STRING, "Data set");
    			data.addColumn(ColumnType.NUMBER, "Value");
    			data.addRows(3);
    			data.setValue(0, 0, "Data set 1");
    			data.setValue(0, 1, 100);
    			data.setValue(1, 0, "Data set 2");
    			data.setValue(1, 1, 10);
    			data.setValue(2, 0, "Data set 3");
    			data.setValue(2, 1, 20);
    			return data;
    		}
    	}
    }
    I keep on getting this StackTrace.

    Code:
    10:31:27.089 [ERROR] [flw8_3client] Uncaught exception escaped
    java.lang.AssertionError: A widget that has an existing parent widget may not be added to the detach list
        at com.google.gwt.user.client.ui.RootPanel.detachOnWindowClose(RootPanel.java:136)
        at com.google.gwt.user.client.ui.RootPanel.get(RootPanel.java:211)
        at com.smartgwt.client.widgets.WidgetCanvas.onDraw(WidgetCanvas.java:39)
        at com.smartgwt.client.widgets.BaseWidget.rendered(BaseWidget.java:205)
        at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
        at sun.reflect.NativeMethodAccessorImpl.invoke(Unknown Source)
        at sun.reflect.DelegatingMethodAccessorImpl.invoke(Unknown Source)
        at java.lang.reflect.Method.invoke(Unknown Source)
        at com.google.gwt.dev.shell.MethodAdaptor.invoke(MethodAdaptor.java:103)
        at com.google.gwt.dev.shell.MethodDispatch.invoke(MethodDispatch.java:71)
        at com.google.gwt.dev.shell.OophmSessionHandler.invoke(OophmSessionHandler.java:157)
        at com.google.gwt.dev.shell.BrowserChannel.reactToMessagesWhileWaitingForReturn(BrowserChannel.java:1713)
        at com.google.gwt.dev.shell.BrowserChannelServer.invokeJavascript(BrowserChannelServer.java:165)
        at com.google.gwt.dev.shell.ModuleSpaceOOPHM.doInvoke(ModuleSpaceOOPHM.java:120)
        at com.google.gwt.dev.shell.ModuleSpace.invokeNative(ModuleSpace.java:507)
        at com.google.gwt.dev.shell.ModuleSpace.invokeNativeVoid(ModuleSpace.java:284)
        at com.google.gwt.dev.shell.JavaScriptHost.invokeNativeVoid(JavaScriptHost.java:107)
        at com.smartgwt.client.widgets.layout.Layout.addMemberPostCreate(Layout.java)
        at com.smartgwt.client.widgets.layout.Layout.addMember(Layout.java:995)
        at com.smartgwt.client.widgets.layout.Layout.addMember(Layout.java:982)
        at com.banctec.flw.client.view.FloWatchMainPanel$Graphic$1.run(FloWatchMainPanel.java:33)
        at com.google.gwt.ajaxloader.client.ExceptionHelper.runProtected(ExceptionHelper.java:36)
        at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
        at sun.reflect.NativeMethodAccessorImpl.invoke(Unknown Source)
        at sun.reflect.DelegatingMethodAccessorImpl.invoke(Unknown Source)
        at java.lang.reflect.Method.invoke(Unknown Source)
        at com.google.gwt.dev.shell.MethodAdaptor.invoke(MethodAdaptor.java:103)
        at com.google.gwt.dev.shell.MethodDispatch.invoke(MethodDispatch.java:71)
        at com.google.gwt.dev.shell.OophmSessionHandler.invoke(OophmSessionHandler.java:157)
        at com.google.gwt.dev.shell.BrowserChannel.reactToMessages(BrowserChannel.java:1668)
        at com.google.gwt.dev.shell.BrowserChannelServer.processConnection(BrowserChannelServer.java:401)
        at com.google.gwt.dev.shell.BrowserChannelServer.run(BrowserChannelServer.java:222)
        at java.lang.Thread.run(Unknown Source)
    I tried _many_ others workaround but nothing seem to work.

    Any pointers ?

    TY.

    #2
    This code is very close to what you have and it works with the latest build of Smart GWT with GWT 2.0.1

    Code:
    import com.google.gwt.core.client.EntryPoint;
    import com.google.gwt.core.client.JsArray;
    import com.google.gwt.visualization.client.AbstractDataTable;
    import com.google.gwt.visualization.client.DataTable;
    import com.google.gwt.visualization.client.Selection;
    import com.google.gwt.visualization.client.VisualizationUtils;
    import com.google.gwt.visualization.client.AbstractDataTable.ColumnType;
    import com.google.gwt.visualization.client.events.SelectHandler;
    import com.google.gwt.visualization.client.visualizations.PieChart;
    import com.google.gwt.visualization.client.visualizations.PieChart.Options;
    import com.smartgwt.client.util.SC;
    import com.smartgwt.client.widgets.IButton;
    import com.smartgwt.client.widgets.Label;
    import com.smartgwt.client.widgets.layout.HLayout;
    import com.smartgwt.client.widgets.layout.VLayout;
    
    /**
     * Entry point classes define <code>onModuleLoad()</code>.
     */
    public class HelloWorld implements EntryPoint {
    
    	/**
    	 * This is the entry point method.
    	 */
    	public void onModuleLoad() {	
    		HLayout hlayout = new HLayout();
    		hlayout.setMembers(new Label("Pie Chart"), new IButton("Logout"));
    		VLayout layout = new VLayout();
    		layout.setMembers(hlayout, new Graphic());
    		layout.draw();
    	}
    	
    	
    	private class Graphic extends HLayout {
    		public Graphic() {
    			Runnable onLoadCallback = new Runnable() {
    				public void run() {
    					addMember(new PieChart(createTable(), createOptions()));
    				}
    			};
    			VisualizationUtils.loadVisualizationApi(onLoadCallback, PieChart.PACKAGE);
    		}
    		private Options createOptions() {
    			    Options options = Options.create();
    			    options.setWidth(400);
    			    options.setHeight(240);
    			    options.set3D(true);
    			    options.setTitle("My Daily Activities");
    			    return options;
    		}
    
    			  private SelectHandler createSelectHandler(final PieChart chart) {
    			    return new SelectHandler() {
    			      @Override
    			      public void onSelect(SelectEvent event) {
    			        String message = "";
    			        
    			        // May be multiple selections.
    			        JsArray<Selection> selections = chart.getSelections();
    
    			        for (int i = 0; i < selections.length(); i++) {
    			          // add a new line for each selection
    			          message += i == 0 ? "" : "\n";
    			          
    			          Selection selection = selections.get(i);
    
    			          if (selection.isCell()) {
    			            // isCell() returns true if a cell has been selected.
    			            
    			            // getRow() returns the row number of the selected cell.
    			            int row = selection.getRow();
    			            // getColumn() returns the column number of the selected cell.
    			            int column = selection.getColumn();
    			            message += "cell " + row + ":" + column + " selected";
    			          } else if (selection.isRow()) {
    			            // isRow() returns true if an entire row has been selected.
    			            
    			            // getRow() returns the row number of the selected row.
    			            int row = selection.getRow();
    			            message += "row " + row + " selected";
    			          } else {
    			            // unreachable
    			            message += "Pie chart selections should be either row selections or cell selections.";
    			            message += "  Other visualizations support column selections as well.";
    				        SC.say(message);
    
    			          }
    			        }
    			        
    			      }
    			    };
    			  }
    
    			  private AbstractDataTable createTable() {
    			    DataTable data = DataTable.create();
    			    data.addColumn(ColumnType.STRING, "Task");
    			    data.addColumn(ColumnType.NUMBER, "Hours per Day");
    			    data.addRows(2);
    			    data.setValue(0, 0, "Work");
    			    data.setValue(0, 1, 14);
    			    data.setValue(1, 0, "Sleep");
    			    data.setValue(1, 1, 10);
    			    return data;
    			  }	
    		
    	}
    }

    Comment


      #3
      Hello,

      Not sure that I can use this thread for my question but it is regarding Visualization too so ....

      I am back in the GWT / SmartGWT world after a 6-months break.
      My application was working fine with GWT 1.7 and smartGWT 1.2.3
      My Visualization graphs were perfectly displayed.

      But now that I have migrated to GWT 2.0.1 and the latest smartGWT version (the visu lib is the same) my graphs are truncated on my screen and I don't find any way to avoid that and to display them correctly.
      I don't understand where the issue can come from as the SAME code was working great 6 months before.

      Is there something that has changed in the Layout behavior in the lastest version of smartGWT or something like that ?

      I tried to set a height to the layouts I add my graphs in but it does not solve the display issue.

      May you help me as visualization is a big part of my application ?

      Regards

      Comment


        #4
        This is rather odd.

        This issue might be coming from how I nested everything together.
        Or Visualization Framework don't react well to MVP pattern.

        Composite (initWidget) + (SmartGWT(HLayout) and Visualization (Callback)) mismatch?

        Parent Class.
        Code:
        // Right now the Display interface only have one signature declared (asWidget). So, no possible weird interactions.
        public class FlowareView extends Composite implements Display {
        	
        	private HLayout container;
        	
        	public FlowareView() {
        		container = new HLayout();
        		this.initWidget(container);
        		container.setHeight("100%");
        		container.setWidth("100%");
        
        		SectionStack sectionStack ...
        
        		// Here is where I instantiate the PieChart's container (Code in first post).
        		VLayout flowatchMainLayout = new FloWatchMainPanel();
        		
        		SectionStackSection flowatchSection ...
        		SectionStackSection rulesarchSection ...
        		SectionStackSection adminSection ...
        
        		sectionStack.setSections(flowatchSection, rulesarchSection, adminSection);  
        
        		container.setMembers(sectionStack, flowatchMainLayout);
        		
        	}
        
        	@Override
        	public Widget asWidget() {
        		return this;
        	}
        }
        I use Eclipse 3.4.2 and latest GWT Plugins.

        TY.
        Last edited by nap; 9 Feb 2010, 13:02.

        Comment


          #5
          Without a standalone test case there is no way to know what's going on.

          Comment


            #6
            Yes, I'll try to make a little project implementing SmartGWT + EventBus + MVP pattern tomorrow. I'll try to reproduce the issue and to implement some workarounds.

            TY.
            Last edited by nap; 9 Feb 2010, 16:25.

            Comment


              #7
              This is a link to Google doc. You will download a src.zip file with the project source code. It's a standalone of this issue.
              (Don't forget to include the isomorphicDir and different library to your build path)

              http://bit.ly/9E72P6

              I just found out that if you compile the project, everything work. It seem to have some issue with the Development mode.
              Last edited by nap; 10 Feb 2010, 08:29.

              Comment


                #8
                Ok, so right now it work with Jetty if the project is compiled and only on IE7+ and Chrome. Somehow FF wont display the chart(Haven't tried on Safari tho).

                I installed the latest version of Tomcat and moved my project, but I get the same issue with FF.

                Comment


                  #9
                  Trying to modify the detach list with:
                  detachOnWindowClose(Widget widget)

                  No success so far.

                  Comment


                    #10
                    Anyone got an idea on what's happening here ?

                    Or just a pointer would help, I obviously tried a lot of things but some of you might find something that I haven't tried yet.

                    Seriously, any help would be appreciated here.

                    Comment


                      #11
                      I posted this as an Issue on the Google code project page.

                      http://code.google.com/p/smartgwt/issues/detail?id=405

                      Comment

                      Working...
                      X