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.

GWT Charts 1

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

GWT Charts 2

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 3

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:

GWT Charts 4

Next TopicGWT Database

GWT Charts

GWT Charts

List of GWT Charts:

GWT Chart Example

GWT Charts Controls

GWT Chart Example

Install Git on Mac

HTML 5 accept attribute

You may also like