Chart not displayed with dynamic data in gwt

Question

I have created a gwt application with charts in it and have deployed it in Tomcat. I am able to display the charts with static data.

I am making rpc call to get data from the database.I want to use this data to draw charts. But when I deploy and run my application in tomcat,charts are not displayed.The chart caption is displayed and "no data" message is shown instead of chart.

But I can display the retrieved data in an alert box.This means RPC is successful.

Below is the snippet of code I used :

public class MyGWTApp implements EntryPoint {

    /**
     * Create a remote service proxy to talk to the server-side Greeting service.
     */
    private final DataServiceAsync dataService = GWT
            .create(DataService.class);


    /**
     * This is the entry point method.
     */
    @SuppressWarnings("deprecation")
    public void onModuleLoad() {

        Runnable onLoadCallback=new Runnable(){

            public void run()
            {       


                TabPanel tabPanel = new TabPanel();
                //tabPanel.setAnimationDuration(1000);
                tabPanel.getElement().getStyle().setMarginBottom(10.0, Unit.PX);
                tabPanel.setSize("100%", "100%");


                //code to populate datatable and setting options for motion chart here


                final MotionChart motionchart=new MotionChart(data, options);
                final ColumnChart columnchart=new ColumnChart(createCategoryTable(),createCategoryBarOptions());
                final ColumnChart columnchart2=new ColumnChart(createCategoryTable(),createCategoryBarOptions());
                final ColumnChart columnchart3=new ColumnChart(createCategoryTable(),createCategoryBarOptions());

                final PieChart pie=new PieChart(createSentimentTable(), createSentimentPieOptions());

                FlexTable flexTable=new FlexTable();
                FlexCellFormatter flexCellFormatter=flexTable.getFlexCellFormatter();

                flexCellFormatter.setHorizontalAlignment(0, 0, HasHorizontalAlignment.ALIGN_CENTER);
                flexCellFormatter.setVerticalAlignment(0, 0, HasVerticalAlignment.ALIGN_MIDDLE);
                //flexTable.addStyleName("cw-FlexTable");

                flexCellFormatter.setColSpan(0, 0, 2);


                flexTable.setWidget(0, 0, pie);
                flexTable.setWidget(1, 0,columnchart2);
                flexTable.setWidget(1, 1, columnchart3);

                FlexTable flexTable2=new FlexTable();
                FlexCellFormatter flexCellFormatter2=flexTable.getFlexCellFormatter();

                flexCellFormatter2.setHorizontalAlignment(0, 0, HasHorizontalAlignment.ALIGN_CENTER);
                flexCellFormatter2.setVerticalAlignment(0, 0, HasVerticalAlignment.ALIGN_MIDDLE);
                flexTable2.setWidget(0, 0, motionchart);


                //tabPanel.add(new HTML("Testing tab panel"),"Text");
                tabPanel.add(flexTable,"Charts");
                tabPanel.add(flexTable2,"Motion Chart");

                /*tabPanel.setHeight("600");
                tabPanel.setWidth("900");*/
                tabPanel.selectTab(0);


                RootPanel.get("motionChartContainer").add(tabPanel);
            }
        };


        VisualizationUtils.loadVisualizationApi(onLoadCallback, MotionChart.PACKAGE,ColumnChart.PACKAGE);


    }

code to get data through GWt-RPC

private AbstractDataTable createCategoryTable(){

          final DataTable data = DataTable.create();

          data.addColumn(ColumnType.STRING, "Category");
          data.addColumn(ColumnType.NUMBER,"TweetCount");

          //dataService.getRowIDData(input, callback)

          dataService.getRowIDData("category",
                    new AsyncCallback<List<Record>>(){
                        public void onFailure(Throwable caught) {
                            // Show the RPC error message to the user
                            System.out.println("RPC Call failed");
                            Window.alert("category : RPC call failed");
                        }

                        public void onSuccess(List<Record> result) {

                            data.addRows(result.size());

                            String msg;
                            msg=result.size()+"\n";
                            System.out.println(msg);

                            for(int i=0;i<result.size();i++)
                            {
                                data.setValue(i,0,result.get(i).getQualifier());
                                data.setValue(i,1,Integer.parseInt(result.get(i).getValue()));  

                                msg="\n"+" Qualifier : "+result.get(i).getQualifier()+"Value : "+Integer.parseInt(result.get(i).getValue());

                            }

                            Window.alert("category : RPC Call successfull :size"+ result.size()+"\n "+ msg);

                        }
                    });  


          return data;

      }

and

private AbstractDataTable createSentimentTable(){

           final DataTable data = DataTable.create();

           //final DataTable dTable = DataTable.create(jso);

           data.addColumn(ColumnType.STRING,"Sentiment");
           data.addColumn(ColumnType.NUMBER,"TweetCount");

           dataService.getRowIDData("sentiment",
                    new AsyncCallback<List<Record>>(){
                        public void onFailure(Throwable caught) {
                            // Show the RPC error message to the user
                            System.out.println("RPC Call failed");
                            Window.alert("Sentiment : RPC call failed");
                        }

                        public void onSuccess(List<Record> result) {

                            data.addRows(result.size());
                            String msg=result.size()+"\n";
                            System.out.println(msg);

                            for(int i=0;i<result.size();i++)
                            {
                                data.setValue(i,0,result.get(i).getQualifier());
                                data.setValue(i,1,Integer.parseInt(result.get(i).getValue()));  

                                msg="\n"+" Qualifier : "+result.get(i).getQualifier()+"Value : "+Integer.parseInt(result.get(i).getValue());

                            }

                            Window.alert("Sentiment :RPC Call successfull "+ msg);
                        }
                    });  

          return data;    

      }

Answer 1

The problem lies in the line

final ColumnChart columnchart=new ColumnChart(createCategoryTable(),createCategoryBarOptions());

createCategoryTable() method does not wait till the RPC success method executes as it is asynchronous. So it will return empty data table.

The solution is to create ColumnCharts without data and options intially.

final ColumnChart columnchart=new ColumnChart();

In the RPC onSuccess() method, you can draw the chart as:

columnchart.draw(dataTable, options);