Question

Following is the startup code which I wrote in order to switch between the data within my stacked bar graph, so that when user clicks on any of the column, the data is reordered and shown in the graph:

package com.test.visualization.client;


import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.Panel;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.visualization.client.AbstractDataTable;
import com.google.gwt.visualization.client.VisualizationUtils;
import com.google.gwt.visualization.client.DataTable;
import com.google.gwt.visualization.client.Selection;
import com.google.gwt.core.client.JsArray;
import com.google.gwt.user.client.Window;
import com.google.gwt.visualization.client.events.SelectHandler;
import com.google.gwt.visualization.client.AbstractDataTable.ColumnType;
import com.google.gwt.visualization.client.visualizations.corechart.BarChart;
import com.google.gwt.visualization.client.visualizations.corechart.Options;


@SuppressWarnings("deprecation")
public class TestVisualization implements EntryPoint {


    static int increment = 1;


    public void onModuleLoad() {
        Runnable onLoadCallback = new Runnable() {
            public void run() {
                Panel panel = RootPanel.get();
                BarChart bar = new BarChart(createTable(increment), createOptions());
                bar.addSelectHandler(createSelectHandler(bar));
                panel.add(bar);
            }
        };



        VisualizationUtils.loadVisualizationApi(onLoadCallback,BarChart.PACKAGE);
    }


    private SelectHandler createSelectHandler(final BarChart bar){
        return new SelectHandler(){
            public void onSelect(SelectEvent event){
                String message = "";
                JsArray<Selection> selections = bar.getSelections();
                for (int i = 0; i < selections.length(); i++) {
                    // add a new line for each selection
                    message += i == 0 ? "" : "\n";

                    Selection selection = selections.get(i);


                    if (selection.isColumn()){
                        int column = selection.getColumn();
                        message += "column " + column + " selected";
                        increment = column;
                        Window.alert(message);
                    }
                }

            }
        };
    }

    private Options createOptions() {
        Options options = Options.create();
        options.setIsStacked(true);
        options.setWidth(400);
        options.setHeight(240);
        options.setTitle("My Daily Activities");
        return options;
    }


    private AbstractDataTable createTable(int input) {
        // Underlying data
        int rowsadded = 3;
        DataTable data = DataTable.create();
        data.addColumn(ColumnType.STRING, "Item");
        data.addColumn(ColumnType.NUMBER, "item per sec");
        data.addColumn(ColumnType.NUMBER, "item per minute");
        data.addRows(rowsadded);
        if (input == 2){
            data.setValue(0, 2, 10);
            data.setValue(1, 2, 10);
            data.setValue(2, 2, 10);
            } else {
            data.setValue(0, 0, "Nits");
            data.setValue(0, 1, 10);
            data.setValue(1, 0, "Gnats");
            data.setValue(1, 1, 4);
            data.setValue(2, 0, "Pits");
            data.setValue(2, 1, 8);
        }
        return data;
    }
}

currently what’s happening is the data for first column shows up fine but when I click on the columns, the other data is not showing up on the screen. but when i click on the column the windows.alert shows that the event handler is working but the data is not getting redrawn on the UI. I debugged through the code and found that once the JScript is loaded on client(Browser), the control never returns back to onModuleLoad().

Should I make an RPC call in order to createtable data i.e. should I move createTable(int input) to server and through asynchronous calls should I be populating data ?? I though so because I think once the JScript moves to client, the UI cannot be redrawn.

Please help me out with this.

Thanks in advance

Answer 1

You need to redraw the visualization. Something like this:

@SuppressWarnings("deprecation")
public class TestVisualization implements EntryPoint {


static int increment = 1;
BarChart bar = null;

public void onModuleLoad() {
    Runnable onLoadCallback = new Runnable() {
        public void run() {
            Panel panel = RootPanel.get();
            bar = new BarChart(createTable(increment), createOptions());
            bar.addSelectHandler(createSelectHandler(bar));
            panel.add(bar);
        }
    };



    VisualizationUtils.loadVisualizationApi(onLoadCallback,BarChart.PACKAGE);
}


private SelectHandler createSelectHandler(final BarChart bar){
    return new SelectHandler(){
        public void onSelect(SelectEvent event){
            String message = "";
            JsArray<Selection> selections = bar.getSelections();
            for (int i = 0; i < selections.length(); i++) {
                // add a new line for each selection
                message += i == 0 ? "" : "\n";

                Selection selection = selections.get(i);


                if (selection.isColumn()){
                    int column = selection.getColumn();
                    message += "column " + column + " selected";
                    increment = column;
                    Window.alert(message);
                    // and now redraw
                    bar.draw(createTable(increment), createOptions());
                }
            }

        }
    };
}

private Options createOptions() {
    Options options = Options.create();
    options.setIsStacked(true);
    options.setWidth(400);
    options.setHeight(240);
    options.setTitle("My Daily Activities");
    return options;
}


private AbstractDataTable createTable(int input) {
    // Underlying data
    int rowsadded = 3;
    DataTable data = DataTable.create();
    data.addColumn(ColumnType.STRING, "Item");
    data.addColumn(ColumnType.NUMBER, "item per sec");
    data.addColumn(ColumnType.NUMBER, "item per minute");
    data.addRows(rowsadded);
    if (input == 2){
        data.setValue(0, 2, 10);
        data.setValue(1, 2, 10);
        data.setValue(2, 2, 10);
        } else {
        data.setValue(0, 0, "Nits");
        data.setValue(0, 1, 10);
        data.setValue(1, 0, "Gnats");
        data.setValue(1, 1, 4);
        data.setValue(2, 0, "Pits");
        data.setValue(2, 1, 8);
    }
    return data;
}
}