Can't create donut chart using gwt-google-apis - gwt

Question

I'm trying to create donut chart using gwt-google-apis. As I understand based on the reference it's a ordinary pie chart with 'pieHole' option (it's value should be between 0.0 and 1.0). Also there is a restriction that donut does not support 'is3D' option.
I followed to the gwt-google-apis reference and wrote following code:
public void onModuleLoad() {
Runnable onLoadCallback = new Runnable() {
public void run() {
Panel panel = RootPanel.get();
PieChart pie = new PieChart(createTable(), createOptions());
panel.add(pie);
}
};
VisualizationUtils.loadVisualizationApi(onLoadCallback,
PieChart.PACKAGE);
}
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;
}
private Options createOptions() {
Options options = Options.create();
options.setWidth(400);
options.setHeight(240);
options.setTitle("My Daily Activities");
options.setOption("pieHole", "0.4");
return options;
}
However, I've received ordinary pie chart without hole (I've run it only in dev mode). Any suggestions? Maybe I've missed something?

Answer 1

Looking at the API of latest stable version gwt-visualization-1.1.2, that functionality is not present. The only options specific to a piechart you can set are:
void set3D(boolean is3D)
void setPieResidueSliceLabel(java.lang.String label)
void setPieSliceText(java.lang.String text)
void setPieSliceTextStyle(TextStyle textStyle)
void setSliceVisibilityThreshold(double angle)
You could add an issue or write the functionality yourself adding JSNI methods to PieChart.PieOptions . Take a look at GWTProject if you are unfamiliar with this.

Answer 2

You can create donut chart using GWT-API
you have to write Wrapper for PieChartOptions like this
PieOpt.java
import com.google.gwt.core.client.JsArray;
import com.googlecode.gwt.charts.client.corechart.PieChartOptions;
import com.googlecode.gwt.charts.client.corechart.PieChartTooltip;
import com.googlecode.gwt.charts.client.options.BackgroundColor;
import com.googlecode.gwt.charts.client.options.ChartArea;
import com.googlecode.gwt.charts.client.options.Legend;
import com.googlecode.gwt.charts.client.options.PieSliceText;
import com.googlecode.gwt.charts.client.options.Slice;
import com.googlecode.gwt.charts.client.options.TextStyle;
public class PieOpt {
private PieChartOptions _this;
private PieOpt() {
_this = PieChartOptions.create();
}
public static PieOpt newInstance() {
return new PieOpt();
}
public PieChartOptions get() {
return _this;
}
public final void setBackgroundColor(BackgroundColor backgroundColor) {
_this.setBackgroundColor(backgroundColor);
}
public final void setBackgroundColor(String color) {
_this.setBackgroundColor(color);
}
public final void setChartArea(ChartArea chartArea) {
_this.setChartArea(chartArea);
}
public final void setColors(String... colors) {
_this.setColors(colors);
}
public final void setFontName(String name) {
_this.setFontName(name);
}
public final void setFontSize(double size) {
_this.setFontSize(size);
}
public final void setIs3D(boolean is3D) {
_this.setIs3D(is3D);
}
public final void setLegend(Legend legend) {
_this.setLegend(legend);
}
public final void setPieResidueSliceColor(String pieResidueSliceColor) {
_this.setPieResidueSliceColor(pieResidueSliceColor);
}
public final void setPieResidueSliceLabel(String pieResidueSliceLabel) {
_this.setPieResidueSliceLabel(pieResidueSliceLabel);
}
public final void setPieSliceBorderColor(String pieSliceBorderColor) {
_this.setPieSliceBorderColor(pieSliceBorderColor);
}
public final void setPieSliceText(PieSliceText pieSliceText) {
_this.setPieSliceText(pieSliceText);
}
public final void setPieSliceTextStyle(TextStyle pieSliceTextStyle) {
_this.setPieSliceTextStyle(pieSliceTextStyle);
}
public final void setReverseCategories(boolean reverseCategories) {
_this.setReverseCategories(reverseCategories);
}
public final void setSlices(JsArray<Slice> slices) {
_this.setSlices(slices);
}
public final void setSliceVisibilityThreshold(
double sliceVisibilityThreshold) {
_this.setSliceVisibilityThreshold(sliceVisibilityThreshold);
}
public final void setTitle(String title) {
_this.setTitle(title);
}
public final void setTitleTextStyle(TextStyle textStyle) {
_this.setTitleTextStyle(textStyle);
}
public final void setTooltip(PieChartTooltip tooltip) {
_this.setTooltip(tooltip);
}
public void setHole(double d) {
setHole(get(), d);
}
private final native void setHole(PieChartOptions chartOptions, double d) /*-{
chartOptions.pieHole = d;
}-*/;
}
And use it like this
ChartLoader chartLoader = new ChartLoader(ChartPackage.CORECHART);
chartLoader.loadApi(new Runnable() {
#Override
public void run() {
pieChart = new PieChart();
DataTable dataTable = DataTable.create();
dataTable.addColumn(ColumnType.STRING, "Name");
dataTable.addColumn(ColumnType.NUMBER, "Donuts eaten");
dataTable.addRows(4);
dataTable.setValue(0, 0, "Michael");
dataTable.setValue(1, 0, "Elisa");
dataTable.setValue(2, 0, "Robert");
dataTable.setValue(3, 0, "John");
dataTable.setValue(0, 1, 5);
dataTable.setValue(1, 1, 7);
dataTable.setValue(2, 1, 3);
dataTable.setValue(3, 1, 2);
PieOpt opt = PieOpt.newInstance();
opt.setHole(0.4);
pieChart.draw(dataTable, opt.get());
}
});
And you are Done.

Answer 3

Try this:
FacetChart chart=new FacetChart();
chart.setData(ChartData.getData());
chart.setFacets(new Facet("region", "Region"),new Facet("time", "Period"));
chart.setValueProperty("value");
chart.setTitle("Revenue");
chart.setChartType(ChartType.DOUGHNUT);

Answer 4

Here a working example:
private PieChart.PieOptions createPieOptions() {
PieChart.PieOptions options = PieChart.createPieOptions();
options.set("pieHole", "0.4");
return options;
}
private AbstractDataTable createPieTable() {
DataTable data = DataTable.create();
data.addColumn(ColumnType.STRING, LABEL);
data.addColumn(ColumnType.NUMBER, VALUE);
data.addRows(2);
data.setValue(0, 0, "example");
data.setValue(0, 1, "12");
data.setValue(1, 0, "example number two");
data.setValue(1, 1, "88");
}
return data;
}
PieChart tagsPie = new PieChart(createPieTable(), createPieOptions());