Custom OrgChart Component using Google Visualization

Gordon · December 29, 2009, 11:00pm

I’m trying to create a custom OrgChart component using the google visualization libray (http://code.google.com/p/gwt-google-apis/). Documentation on the OrgChart is located at…

This library contains a java wrapper for the following Visualization…

http://code.google.com/apis/visualization/documentation/gallery/orgchart.html

My client side widget currently looks like this…

[font=Courier New]

import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.user.client.ui.Composite;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.VerticalPanel;
import com.google.gwt.visualization.client.DataTable;
import com.google.gwt.visualization.client.AbstractDataTable.ColumnType;
import com.google.gwt.visualization.client.visualizations.OrgChart;
import com.google.gwt.visualization.client.visualizations.OrgChart.Options;
import com.google.gwt.visualization.client.visualizations.OrgChart.Size;
import com.vaadin.terminal.gwt.client.ApplicationConnection;
import com.vaadin.terminal.gwt.client.Paintable;
import com.vaadin.terminal.gwt.client.UIDL;

/**

Client side widget which communicates with the server. Messages from the
server are shown as HTML and mouse clicks are sent to the server.
*/
public class VOrgChart extends Composite implements Paintable, ClickHandler {

public static final String CLICK_EVENT_IDENTIFIER = “click”;

/** The client side widget identifier */
protected String paintableId;

/** Reference to the server connection object. */
protected ApplicationConnection client;

protected VerticalPanel panel = new VerticalPanel();

/**
- The constructor should first call super() to initialize the component and
- then handle any initialization relevant to Vaadin.
  */
  public VOrgChart() {
  initWidget(panel);
  initOrgChart();
  }
private void initOrgChart() {
Options options = Options.create();
options.setSize(Size.LARGE);
options.setAllowCollapse(true);
options.setColor(“#00FF00”);
options.setSelectionColor(“#FF0000”);
```
 DataTable data = DataTable.create();
 data.addColumn(ColumnType.STRING, "Name");
 data.addColumn(ColumnType.STRING, "Manager");
 data.addRows(5);
 data.setValue(0, 0, "Goofy");
 data.setValue(1, 0, "Mickey Mouse");
 data.setValue(1, 1, "Donald Duck");
 data.setValue(2, 0, "Alice");
 data.setValue(2, 1, "Mike");
 data.setValue(3, 0, "Bob");
 data.setValue(3, 1, "Jim");
 data.setValue(4, 0, "Carol");
 data.setValue(4, 1, "Bob");

 OrgChart viz = new OrgChart(data, options);
 Label status = new Label();
 viz.addSelectHandler(new SelectionDemo(viz, status));
 panel.add(status);
 panel.add(viz);
```
}

/**
- Called whenever an update is received from the server
  */
  public void updateFromUIDL(UIDL uidl, ApplicationConnection client) {
  // This call should be made first.
  // It handles sizes, captions, tooltips, etc. automatically.
  if (client.updateComponent(this, uidl, true)) {
  // If client.updateComponent returns true there has been no changes
  // and we
  // do not need to update anything.
  return;
  }
  
  // Save reference to server connection object to be able to send
  // user interaction later
  this.client = client;
  
  // Save the client side identifier (paintable id) for the widget
  paintableId = uidl.getId();
}

/**
- Called when a native click event is fired.
- @param event
- ```
       the {@link ClickEvent} that was fired
```
*/
public void onClick(ClickEvent event) {
}
}

[/font]

On the line “DataTable data = DataTable.create()”, I get the following error message in the Debug Window.

Any ideas would be extremely helpful. Thanks!

Matti · December 30, 2009, 8:09am

Hi!

I suggest you set up GWT hosted mode debugger and try with it. JS errors from GWT code are mostly so cryptic that there is no way to figure out what is wrong. With hosted mode is as easy as it is with normal java apps.

cheers,
matti

Gordon · January 2, 2010, 4:32pm

Thanks for the hint. I got the OrgChart working using the GWT hosted mode debugger!