GWT Charts

GWT does not contain pre installed repository for creation of charts. We can download its repository from maven repository. In gwt, charts are created through gwt chart tools also known as Google Visualization.

To setup the GWT Charts, we follow following steps:

Copy the gwt-charts.jar to the existing project or for new project.

Right click the jar file and choose build path option then add to build path option.

To use maven repository we change the XML file by adding following code:

<dependency>
    <groupId>com.googlecode.gwt-charts</groupId>
    <artifactId>gwt-charts</artifactId>
    <version>0.9.10</version>
</dependency>

List of GWT Charts:

Annotation
Area
Bar
Bubble
Calendar
Candlestick
Geo chart
Histogram
Map
Pie chart etc.

GWT Chart Example

In this code, we implement the Area chart where area is shown according to the coffee production order.

import com.google.gwt.dom.client.Style.Unit;
import com.google.gwt.user.client.ui.DockLayoutPanel;
import com.googlecode.gwt.charts.client.ChartLoader;
import com.googlecode.gwt.charts.client.ChartPackage;
import com.googlecode.gwt.charts.client.ColumnType;
import com.googlecode.gwt.charts.client.DataTable;
import com.googlecode.gwt.charts.client.corechart.AreaChart;
import com.googlecode.gwt.charts.client.corechart.AreaChartOptions;
import com.googlecode.gwt.charts.client.options.HAxis;
import com.googlecode.gwt.charts.client.options.VAxis;

public class AreaChartExample extends DockLayoutPanel {
	private AreaChart chart;
	
	public AreaChartExample() {
		super(Unit.PX);
		initialize();
	}

	private void initialize() {
		ChartLoader chartLoader = new ChartLoader(ChartPackage.CORECHART);
		chartLoader.loadApi(new Runnable() {

			@Override
			public void run() {
				// Create and attach the chart
				chart = new AreaChart();
				add(chart);
				draw();
			}
		});
	}

	private void draw() {
		String[] countries = new String[] 
		{ "Bolivia", "Ecuador", "Madagascar", "Papua Guinea", "Rwanda" };
		String[] months = new String[] 
		{ "2004/05", "2005/06", "2006/07", "2007/08", "2008/09" };
		int[][] values = new int[][] { 
		{ 165, 135, 157, 139, 136 }, { 938, 1120, 1167, 1110, 691 },
				{ 522, 599, 587, 615, 629 }, 
				{ 998, 1268, 807, 968, 1026 }, { 450, 288, 397, 215, 366 } };


		// Prepare the data
		DataTable dataTable = DataTable.create();
		dataTable.addColumn(ColumnType.STRING, "Year");
		for (int i = 0; i < countries.length; i++) {
			dataTable.addColumn(ColumnType.NUMBER, countries[i]);
		}
		dataTable.addRows(months.length);
		for (int i = 0; i < months.length; i++) {
			dataTable.setValue(i, 0, months[i]);
		}
		for (int col = 0; col < values.length; col++) {
			for (int row = 0; row < values[col].length; row++) {
				dataTable.setValue(row, col + 1, values[col][row]);
			}
		}

		// Set options
		AreaChartOptions options = AreaChartOptions.create();
		options.setTitle("Monthly Coffee Production by Country");
		options.setIsStacked(true);
		options.setHAxis(HAxis.create("Cups"));
		options.setVAxis(VAxis.create("Year"));

		// Draw the chart
		chart.draw(dataTable, options);

		}
}

Output:

GWT Charts Controls

GWT charts have control features which enables chart creation to be in different control regions.

Here are the few controls:

Category Filter
Chart Range Filter
Date Range Filter
Number Range Filter
String Filter

GWT Chart Example

Below code is of the Chart Range Filter:

import com.google.gwt.dom.client.Style.Unit;
import com.google.gwt.user.client.ui.DockLayoutPanel;
import com.googlecode.gwt.charts.client.ChartLoader;
import com.googlecode.gwt.charts.client.ChartPackage;
import com.googlecode.gwt.charts.client.ChartType;
import com.googlecode.gwt.charts.client.ChartWrapper;
import com.googlecode.gwt.charts.client.ColumnType;
import com.googlecode.gwt.charts.client.DataTable;
import com.googlecode.gwt.charts.client.controls.Dashboard;
import com.googlecode.gwt.charts.client.controls.filter.ChartRangeFilter;
import com.googlecode.gwt.charts.client.controls.filter.ChartRangeFilterOptions;
import com.googlecode.gwt.charts.client.controls.filter.ChartRangeFilterState;
import com.googlecode.gwt.charts.client.controls.filter.ChartRangeFilterStateRange;
import com.googlecode.gwt.charts.client.controls.filter.ChartRangeFilterUi;
import com.googlecode.gwt.charts.client.corechart.LineChartOptions;
import com.googlecode.gwt.charts.client.options.ChartArea;
import com.googlecode.gwt.charts.client.options.Legend;
import com.googlecode.gwt.charts.client.options.LegendPosition;
import com.googlecode.gwt.charts.showcase.client.util.DateUtils;

public class ChartRangeFilterExample extends DockLayoutPanel {
	private Dashboard dashboard;
	private ChartWrapper<LineChartOptions> lineChart;
	private ChartRangeFilter numberRangeFilter;

	public ChartRangeFilterExample() {
		super(Unit.PX);
		initialize();
	}

	private void initialize() {
		ChartLoader chartLoader = new ChartLoader(ChartPackage.CONTROLS);
		chartLoader.loadApi(new Runnable() {

			@Override
			public void run() {
				addNorth(getDashboardWidget(), 0);
				addSouth(getNumberRangeFilter(), 100);
				add(getLineChart());
				draw();
			}
		});
	}

	private Dashboard getDashboardWidget() {
		if (dashboard == null) {
			dashboard = new Dashboard();
		}
		return dashboard;
	}

	private ChartWrapper<LineChartOptions> getLineChart() {
		if (lineChart == null) {
			lineChart = new ChartWrapper<LineChartOptions>();
			lineChart.setChartType(ChartType.LINE);
		}
		return lineChart;
	}

	private ChartRangeFilter getNumberRangeFilter() {
		if (numberRangeFilter == null) {
			numberRangeFilter = new ChartRangeFilter();
		}
		return numberRangeFilter;
	}

	private void draw() {
		// Set control options
		ChartRangeFilterOptions chartRangeFilterOptions = ChartRangeFilterOptions.create();
		chartRangeFilterOptions.setFilterColumnIndex(0); // Filter by the date axis
		LineChartOptions controlChartOptions = LineChartOptions.create();
		controlChartOptions.setHeight(100);
		ChartArea chartArea = ChartArea.create();
		chartArea.setWidth("90%");
		chartArea.setHeight("90%");
		controlChartOptions.setChartArea(chartArea);
		ChartRangeFilterUi chartRangeFilterUi = ChartRangeFilterUi.create();
		chartRangeFilterUi.setChartType(ChartType.LINE);
		chartRangeFilterUi.setChartOptions(controlChartOptions);
		chartRangeFilterUi.setMinRangeSize(2 * 24 * 60 * 60 * 1000); // 2 days in milliseconds
		chartRangeFilterOptions.setUi(chartRangeFilterUi);
		ChartRangeFilterStateRange stateRange = ChartRangeFilterStateRange.create();
		stateRange.setStart(DateUtils.create(2012, 2, 9));
		stateRange.setEnd(DateUtils.create(2012, 3, 20));
		ChartRangeFilterState controlState = ChartRangeFilterState.create();
		controlState.setRange(stateRange);
		numberRangeFilter.setState(controlState);
		numberRangeFilter.setOptions(chartRangeFilterOptions);

		// Set chart options
		LineChartOptions lineChartOptions = LineChartOptions.create();
		lineChartOptions.setLineWidth(3);
		lineChartOptions.setLegend(Legend.create(LegendPosition.NONE));
		lineChartOptions.setChartArea(chartArea);
		lineChart.setOptions(lineChartOptions);

		// Generate random data
		DataTable dataTable = DataTable.create();
		dataTable.addColumn(ColumnType.DATE, "Date");
		dataTable.addColumn(ColumnType.NUMBER, "Stock value");
		dataTable.addRows(121);

		double open, close = 300;
		double low, high;
		for (int day = 1; day < 121; ++day) {
			double change = (Math.sin(day / 2.5 + Math.PI) + Math.sin(day / 3) - Math.cos(day * 0.7)) * 150;
			change = change >= 0 ? change + 10 : change - 10;
			open = close;
			close = Math.max(50, open + change);
			low = Math.min(open, close) - (Math.cos(day * 1.7) + 1) * 15;
			low = Math.max(0, low);
			high = Math.max(open, close) + (Math.cos(day * 1.3) + 1) * 15;
			dataTable.setValue(day, 0, DateUtils.create(2012, 1, day));
			dataTable.setValue(day, 1, Math.round(high));
		}

		// Draw the chart
		dashboard.bind(numberRangeFilter, lineChart);
		dashboard.draw(dataTable);
	}
}

Output: