search

omradouane / smartgwt

Automatically exported from code.google.com/p/smartgwt
0 stars 0 forks source link

Google Visualization API (gwt-google-apis) and nested smartGWT layout containers #584

Open GoogleCodeExporter opened 8 years ago

GoogleCodeExporter commented 8 years ago 
Hi,

See these forums posts -> http://forums.smartclient.com/showthread.php?t=16703

In summary:

I would like to add visualization support via gwt-google-apis to an existing 
GWT (2.1.1) and smartGWT (2.4) application.

I would like the "chart" to appear in a nested smartGWT layout container (e.g. 
a HLayout or a VLayout).

I followed the approach described in this post -> 
http://forums.smartclient.com/showpost.php?p=37754&postcount=2 and the 
Visualization Getting Started guide-> 
http://code.google.com/p/gwt-google-apis/wiki/VisualizationGettingStarted

After a bit more investigation I found this post (GWT layout gotcha) -> 
http://turbomanage.wordpress.com/2010/01/12/gwt-layout-gotcha/ on David 
Chandler's blog.

Which states "One gotcha I’ve found is that you must be careful not to attach 
a widget to a DIV nested inside a DIV that is attached to a widget."

ContextArea.java:

->

public class ContextArea extends VLayout {

  private static final String CONTEXT_AREA_WIDTH = "*";
  private static String html = "<div id=\"chart_nested_div\"> </div>\n"; 

  private HTMLFlow htmlFlow; 

  private PieChart pie;

  public ContextArea() {
    super();

    GWT.log("init Context Area()...", null);

    this.setWidth(CONTEXT_AREA_WIDTH);
    this.setBackgroundColor("#EEEEEE");

    htmlFlow = new HTMLFlow(html); 
    this.addMember(htmlFlow);    

    loadVisualizationApi();       
  } 

  public void loadVisualizationApi() {

    Log.debug("loadVisualizationApi()");

    // Create a callback to be called when the visualization API has been loaded.
    Runnable onLoadCallback = new Runnable() {
      public void run() {

        Log.debug("onLoadCallback()");

        pie = new PieChart(createTable(), createOptions());
        // RootPanel.get("chart_sibling_div").add(pie);

        RootPanel.get("chart_nested_div").add(pie);
      }
    };

    // Load the visualization api, passing the onLoadCallback to be called when loading is complete.
    VisualizationUtils.loadVisualizationApi("1.1", onLoadCallback, PieChart.PACKAGE);
  }  

  ...

}

->

Host file:

->

  <body>

    <div id="chart_sibling_div"> </div>

    <div id="mainWindow"> </div>

    ...

  </body>

->

I have attached a minimal test case which reproduces the problem.

Requires: smartgwt.jar (2.5), gwt_log-3.0.4.jar, gwt-visualisation.jar (1.1)

Cheers
Rob

Original issue reported on code.google.com by rob.ferg...@gtempaccount.com on 11 May 2011 at 3:52

Attachments:

GoogleCodeExporter commented 8 years ago 
I'll look into this.

Original comment by sanjiv.j...@gmail.com on 11 May 2011 at 3:57

GoogleCodeExporter commented 8 years ago 
Hi,

Some more feedback.

The following will display the chart (in Chrome) in a nested layout container 
(see attached screen shot) but the image is hidden if you re-size the browser 
window.

In FF3 the chart is not shown but if you re-size the browser window you can see 
it momentarily.

->

public class ContextArea extends VLayout {

  private static final String CONTEXT_AREA_WIDTH = "*";
  private static String html = "<div id=\"chart_nested_div\" style=\"position: absolute; z-index: 1000000\"> </div>\n"; 

  private HTMLFlow htmlFlow; 

  private PieChart pie;

  public ContextArea() {
    super();

    Log.debug("init Context Area()...");

    this.setWidth(CONTEXT_AREA_WIDTH);
    this.setBackgroundColor("#EEEEEE");

    htmlFlow = new HTMLFlow(html); 
    this.addMember(htmlFlow);    

    loadVisualizationApi();       
  } 

  public void loadVisualizationApi() {

    Log.debug("loadVisualizationApi()");

    // Create a callback to be called when the visualization API has been loaded.
    Runnable onLoadCallback = new Runnable() {
      public void run() {

        Log.debug("onLoadCallback()");

        // pie = new PieChart(createTable(), createOptions());
        // RootPanel.get("chart_sibling_div").add(pie);
        // RootPanel.get("chart_nested_div").add(pie);

        drawChart();
      }
    };

    // Load the visualization api, passing the onLoadCallback to be called when loading is complete.
    VisualizationUtils.loadVisualizationApi("1.1", onLoadCallback, PieChart.PACKAGE);
  }  

  private native void drawChart() /*-{

    // Create our data table.
    var dataTable = new $wnd.google.visualization.DataTable();

    dataTable.addColumn('string', 'Task');
    dataTable.addColumn('number', 'Hours per Day');
    dataTable.addRows(5);
    dataTable.setValue(0, 0, "Work");
    dataTable.setValue(0, 1, 11);
    dataTable.setValue(1, 0, "Eat");
    dataTable.setValue(1, 1, 2);
    dataTable.setValue(2, 0, "Commute");
    dataTable.setValue(2, 1, 2);
    dataTable.setValue(3, 0, "Watch TV");
    dataTable.setValue(3, 1, 2);
    dataTable.setValue(4, 0, "Sleep");
    dataTable.setValue(4, 1, 7);

    // Instantiate and draw our chart, passing in some options.
    // var chart = new $wnd.google.visualization.PieChart($doc.getElementById('chart_sibling_div'));
    var chart = new $wnd.google.visualization.PieChart($doc.getElementById('chart_nested_div'));
    chart.draw(dataTable, {width: 400, height: 240});

  }-*/;  

  ...

}
->

Cheers
Rob

Original comment by rob.ferg...@gtempaccount.com on 12 May 2011 at 1:39

Attachments:

GoogleCodeExporter commented 8 years ago 
I would also like to add that I tested Rob's code with the modified version of 
ContextArea that uses JSNI to create the chart with these libraries:

- SmartGWT 2.5, nightly build from May 15, 2011
- Google Visualization 1.1.1
- GWT 2.2.0

But was able to produce the chart in IE without error.  Firefox 3.6.17 was not 
able to produce the chart just as Rob outlined.  It left the screen blank.  
When I used just straight Java to try to create the chart, I produced the 
dreaded AssertionError that's been driving me nuts for the past couple weeks in 
both Firefox and IE.

Original comment by etblackw...@gmail.com on 17 May 2011 at 2:11

GoogleCodeExporter commented 8 years ago 
does anyone have a workaround for it?

Original comment by mail.Sev...@gmail.com on 29 Aug 2011 at 3:54

GoogleCodeExporter commented 8 years ago 
This never got fixed?

Original comment by flint.ba...@gmail.com on 20 Jan 2012 at 2:37

GoogleCodeExporter commented 8 years ago 
Hi,

I don't think so.

That's why I use gwt-highcharts:

-> http://gwt-cx.com/serendipity/Serendipity.html

Cheers
Rob

Original comment by rob.ferg...@uptick.com.au on 20 Jan 2012 at 3:53

GoogleCodeExporter commented 8 years ago 
Is there any workaround to resolve the assertion error other than using the 
following

if(GWT.isScript()){
}

Kind regards,
Anoop

Original comment by anoop.si...@gmail.com on 2 Apr 2012 at 12:38