Google Visualization API Fail in SmartGWT Window

Smart GWT Technical Q&A
1

It failed when I tried adding Gauge into a window.
Both addChild and addItem failed.
It sucess when using Canvas.

class Showcase implements EntryPoint {
  public void onModuleLoad() {
    VisualizationUtils.loadVisualizationApi(
        new Runnable() {
          public void run() {
        	initWidget();
           }
        }, Gauge.PACKAGE);
  }

  public void initWidget(){
      	Window window = new Window();
     	window.setHeight(500);
     	window.setWidth(500);

        GaugeWidget g = new GaugeWidget();
        window.addItem(g);
        window.draw();

  }
}

public class GaugeWidget extends Widget {
  private Widget widget;

  public GaugeWidget() {
    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);

    DataTable data = getDailyActivities();
    
    widget = new Gauge(data, options);
  }

  public Widget getWidget() {
    return widget;
  }
  
  static DataTable getDailyActivities() {
	    DataTable data = DataTable.create();
	    data.addColumn(ColumnType.STRING, "Task");
	    data.addColumn(ColumnType.NUMBER, "Hours per Day");
	    data.addRows(5);
	    data.setValue(0, 0, "Work");
	    data.setValue(0, 1, 11);
	    data.setValue(1, 0, "Eat");
	    data.setValue(1, 1, 2);
	    data.setValue(2, 0, "Commute");
	    data.setValue(2, 1, 2);
	    data.setValue(3, 0, "Watch TV");
	    data.setValue(3, 1, 2);
	    data.setValue(4, 0, "Sleep");
	    data.setValue(4, 1, 7);
	    return data;
	  }
  
}
2

I found the anwer:

  1. custom Gauge [GaugetWidget] don’t extends from Widget
  2. embed GaugeWidget into a Canvas [cvs] first.
  3. embed [cvs] into a Window, by addItem();
	public GaugeView()
	{

	    VisualizationUtils.loadVisualizationApi(
	            new Runnable() {
	              public void run() {
	            	initWidget();
	               }
	            }, Gauge.PACKAGE);
		
	}
	private void initWidget(){
		Canvas cvs = new Canvas();
		GaugeWidget g = new GaugeWidget();
		cvs.addChild(g.getWidget());
		addItem(cvs);
	}

public class GaugeWidget {
  private Widget widget;

  public GaugeWidget() {
    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);

    DataTable data = getDailyActivities();
    
    widget = new Gauge(data, options);
  }

  public Widget getWidget() {
    return widget;
  }
  
  static DataTable getDailyActivities() {
	    DataTable data = DataTable.create();
	    data.addColumn(ColumnType.STRING, "Task");
	    data.addColumn(ColumnType.NUMBER, "Hours per Day");
	    data.addRows(5);
	    data.setValue(0, 0, "Work");
	    data.setValue(0, 1, 11);
	    data.setValue(1, 0, "Eat");
	    data.setValue(1, 1, 2);
	    data.setValue(2, 0, "Commute");
	    data.setValue(2, 1, 2);
	    data.setValue(3, 0, "Watch TV");
	    data.setValue(3, 1, 2);
	    data.setValue(4, 0, "Sleep");
	    data.setValue(4, 1, 7);
	    return data;
	  }
  
}