How to create Pie Chart in GWT using gwt-visualization api? - gwt

Question

I'm trying to build a pie-chart. But i get two different kinds of charts with different jars, gwt-charts & gwt-visualization.
. charts image http://gwt-google-apis.googlecode.com/svn/wiki/SimpleVizQuery-1.png
This is generated using gwt-visualization.jar. But it only displays the detail when I click on it and not when i hover on it. And it has a few more flaws.
.
This is generated using gwt-charts.jar and this is what i want.
Problem is that I need to use gwt-visualization.jar, but I want the look and feel of gwt-charts.jar..
Is there any way for that?????
This is the code example:
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.core.client.JsArray;
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.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.events.SelectHandler;
import com.google.gwt.visualization.client.visualizations.PieChart;
import com.google.gwt.visualization.client.visualizations.PieChart.Options;
public class SimpleViz implements EntryPoint {
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.
PieChart pie = new PieChart(createTable(), createOptions());
panel.add(pie);
}
};
// Load the visualization api, passing the onLoadCallback to be called
// when loading is done.
VisualizationUtils.loadVisualizationApi(onLoadCallback, PieChart.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 AbstractDataTable createTable() {
DataTable data = DataTable.create();
data.addColumn(ColumnType.STRING, "Task");
data.addColumn(ColumnType.NUMBER, "Hours per Day");
data.addRows(2);
data.setValue(0, 0, "Work");
data.setValue(0, 1, 14);
data.setValue(1, 0, "Sleep");
data.setValue(1, 1, 10);
return data;
}
}

Answer 1

Both gwt-charts and gwt-visualization are simply GWT wrappers for the google chart javascript library.
gwt-visualization is the official library but it hasn't been updated for a long time.
gwt-chartsis a third party library and is more feature complete wrapper and has been updated to support the recent additions to the google chart javascript library.
But you can easily achieve the same thing with gwt-visualization using JSNI.
In the end it doesn't really matter which library you use. You should be able to achieve the same looks and behavior with both libraries.
One important thing is to load the CoreChart.PACKAGEinstead of the PieChart.PACKAGE and use the com.google.gwt.visualization.client.visualizations.corechart.PieChart instead of the com.google.gwt.visualization.client.visualizations.PieChart:
VisualizationUtils.loadVisualizationApi(onLoadCallback, CoreChart.PACKAGE);