Question

I’m trying to get the method data.SetValue(...) working in the asynchronous callback in method getNames. Unfortunately it doesn’t work. data.setValue(...) does work in the synchronous method createColumnChartView.

What could be the cause of this problem? Please explain why setting data doesn’t work in getNames. Thanks in advance!

import java.util.ArrayList;
import com.google.gwt.core.client.GWT;
import com.google.gwt.user.client.rpc.AsyncCallback;
import com.google.gwt.user.client.ui.Widget; 
import com.google.gwt.visualization.client.DataTable;
import com.google.gwt.visualization.client.AbstractDataTable.ColumnType;
import com.google.gwt.visualization.client.visualizations.corechart.ColumnChart;
import com.google.gwt.visualization.client.visualizations.corechart.CoreChart;
import com.google.gwt.visualization.client.visualizations.corechart.Options;
import com.practicum.client.Product;
import com.practicum.client.rpc.ProductService;
import com.practicum.client.rpc.ProductServiceAsync;


public class DataOutColumnChart {
private final DataTable data = DataTable.create();
private final Options options = CoreChart.createOptions();
private final ProductServiceAsync productService = GWT.create(ProductService.class);

public DataOutColumnChart(Runnable runnable) {
}

public Widget createColumnChartView() {
    /* create a datatable */
    data.addColumn(ColumnType.STRING, "Price");
    data.addColumn(ColumnType.NUMBER, "EUR");
    data.addRows(2);
    data.setValue(0, 0, "Bar 1");
    data.setValue(0, 1, 123);
    getNames();

    /* create column chart */
    options.setWidth(400);
    options.setHeight(300);
    options.setBackgroundColor("#e8e8e9");

    return new ColumnChart(data, options);
}

public void getNames() {
    productService.getNames(new AsyncCallback<ArrayList<Product>>() {
        public void onFailure(Throwable caught) {
        }

        public void onSuccess(ArrayList<Product> result) {
            for (Product p : result) {
                data.setValue(0, 0, "Bar 2"); // DONT WORK, NOTHING HAPPENS
                data.setValue(0, 1, 345); // DONT WORK, NOTHING HAPPENS
                System.out.println("Bla bla test"); // THIS WORKS
            }
        }
    });
}
}

Answer 1

The problem is occurring because you’re setting data to a DataTable that has already been rendered. Your Asynchronous call in getNames() completes too slowly to affect the DataTable in time for the rendering of the ColumnChart. Even if it did complete fast enough, it would always be a race condition. Ideally, you would not actually render that chart until after you’ve received all necessary data from the RPC call.

Another option is to store a reference to that ColumnChart and call columnChart.draw(...) after you get your data back from RPC.

Edit:

Here’s the example you requested.

import java.util.ArrayList;
import com.google.gwt.core.client.GWT;
import com.google.gwt.user.client.rpc.AsyncCallback;
import com.google.gwt.user.client.ui.Widget; 
import com.google.gwt.visualization.client.DataTable;
import com.google.gwt.visualization.client.AbstractDataTable.ColumnType;
import com.google.gwt.visualization.client.visualizations.corechart.ColumnChart;
import com.google.gwt.visualization.client.visualizations.corechart.CoreChart;
import com.google.gwt.visualization.client.visualizations.corechart.Options;
import com.practicum.client.Product;
import com.practicum.client.rpc.ProductService;
import com.practicum.client.rpc.ProductServiceAsync;


public class DataOutColumnChart {
    private final DataTable data = DataTable.create();
    private final Options options = CoreChart.createOptions();
    private final ProductServiceAsync productService = GWT.create(ProductService.class);
    private ColumnChart chart = null;

    public DataOutColumnChart(Runnable runnable) {
    }

    public void initColumnChart() {
        /* create a datatable */
        data.addColumn(ColumnType.STRING, "Price");
        data.addColumn(ColumnType.NUMBER, "EUR");

        /* create column chart */
        options.setWidth(400);
        options.setHeight(300);
        options.setBackgroundColor("#e8e8e9");

        chart = new ColumnChart(data, options);
    }

    public void getNames() {
        productService.getNames(new AsyncCallback<ArrayList<Product>>() {
            public void onFailure(Throwable caught) {
            }

            public void onSuccess(ArrayList<Product> result) {
                if (result != null && result.size() > 0) {
                    // if there is data...
                    data.addRows(result.size()); // add a row for each result
                    for (int i = 0; i < result.size(); i++) {
                        // loop through the results
                        Product product = result.get(i); // get out the product
                        // ...then set the column values for this row
                        data.setValue(i, 0, product.getSomeProperty());
                        data.setValue(i, 1, product.getSomeOtherProperty());
                    }
                    updateChart();
                }
            }
        });
    }

    public void updateChart() {
        chart.draw(data, options);
    }
}