re-drawing visualizations in GWT

65 views
Skip to first unread message

Jawfish

unread,
Aug 17, 2010, 6:40:21 PM8/17/10
to Google Web Toolkit
This should be a simple question, but I have read many pages of the
Docs and examples and can't find it....

Me:
Java and Javascript beginner.

Intent:
I am making a small demo app in GWT 2.0x with charts. It intends to
put up a chart and then redraws the chart with new data.

Problem:
Nothing happens when I use the draw method on the chart object. It
seems that once drawn the chart object is rendered in JS, and I can't
talk to it again. I haven't found docs, or maybe haven't understood
the dynamic relationship between the Java GWT code and the JS code
running in the browser. Almost all examples for charts are in JS. I
see the Gauge visualization re-drawing itself in the example, but no
Java source code.

Thanks.
John

My code:

package com.demo.gwtdemoviz1.client;


import com.google.gwt.core.client.JavaScriptObject;
import com.google.gwt.core.client.JavaScriptException;


import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.core.client.JsArray;
import com.google.gwt.user.client.Random;
import com.google.gwt.user.client.Timer;
import com.google.gwt.user.client.Window;
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.DataView;
import com.google.gwt.visualization.client.Query;
import com.google.gwt.visualization.client.QueryResponse;
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.visualization.client.AbstractDataTable.ColumnType;
import com.google.gwt.visualization.client.Query.Callback;
import com.google.gwt.visualization.client.events.SelectHandler;
import com.google.gwt.visualization.client.visualizations.BarChart;
import
com.google.gwt.visualization.client.visualizations.Visualization;
import
com.google.gwt.visualization.client.visualizations.BarChart.Options;

public class GWTDemoViz1 implements EntryPoint {

// stuff to randomize the data
private static final int REFRESH_INTERVAL = 5000; // ms
// randomize the variables
private void randomData(Visualization<Options> bar) {
// do something here to change data

/////////////////////////////// this is where it
fails //////////////////////////////////////
bar.draw( updateTable() );
// updateTable() is called and it runs, the changed values can be
seen
// in the browser; further it can instantiate a fresh barchart if I
swap it for
// createTable(), but used as a refresh, the chart never redraws.
///////////////////////////////////////////////////////////////////////////////////////////////////////
}


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

// Create a pie chart visualization.
BarChart bar = new BarChart(createTable(), createOptions());

bar.addSelectHandler(createSelectHandler(bar));
panel.add(bar);

}

};
// Setup timer to refresh data automatically.
Timer refreshTimer = new Timer() {
@Override
public void run() {
randomData(null);
}
};
refreshTimer.scheduleRepeating( REFRESH_INTERVAL );

// Load the visualization api, passing the onLoadCallback to be
called
// when loading is done.
VisualizationUtils.loadVisualizationApi(onLoadCallback,
BarChart.PACKAGE);
}

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

private SelectHandler createSelectHandler(final BarChart bar) {
*/... just the selecthandler from the simpleviz demo .... */
}
}

Window.alert(message);
}
};
}

private AbstractDataTable createTable() {
// Underlying data
DataTable data = DataTable.create();
data.addColumn(ColumnType.STRING, "Item");
data.addColumn(ColumnType.NUMBER, "item per sec");
data.addRows(3);
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);

// Data view -- read only, and no location column
DataView result = DataView.create(data);
result.setColumns(new int[]{0, 1});
return result;

}

private AbstractDataTable updateTable() {
// Underlying data
DataTable data = DataTable.create();
data.addColumn(ColumnType.STRING, "Item");
data.addColumn(ColumnType.NUMBER, "item per sec");

// now create some values
String message = "";
final int MAX_VALUE = 10;
int nit = Random.nextInt(MAX_VALUE) ;
int gnat = Random.nextInt(MAX_VALUE) ;
int pit = Random.nextInt(MAX_VALUE) ;

data.addRows(3);
data.setValue(0, 0, "Nits");
data.setValue(0, 1, nit);
data.setValue(1, 0, "Gnats");
data.setValue(1, 1, gnat);
data.setValue(2, 0, "Pits");
data.setValue(2, 1, pit);
message += nit + " valu " + nit + " other " + gnat;
//Window.alert(message);

return data;

}

Aaron Li

unread,
Dec 2, 2013, 5:15:42 AM12/2/13
to google-we...@googlegroups.com, goo...@jpfisher.net
Hello there,

I have the exactly same question. Did you find out the solution?

Thanks

Aaron

Sean Loughran

unread,
Dec 2, 2013, 7:29:28 AM12/2/13
to Google Web Toolkit, goo...@jpfisher.net
Unfortunately this was a long time ago and I don't work with that project anymore. I'm not sure I ever got it to work right. I kind of gave up on GWT Visualizations, it didn't seem to be getting the support it needed.


--
You received this message because you are subscribed to a topic in the Google Groups "Google Web Toolkit" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-web-toolkit/dGHBck7fMGk/unsubscribe.
To unsubscribe from this group and all its topics, send an email to google-web-tool...@googlegroups.com.
To post to this group, send email to google-we...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-web-toolkit.
For more options, visit https://groups.google.com/groups/opt_out.

Reply all
Reply to author
Forward
0 new messages