GWT Charts Example

Mohammad Meraj ZiaJune 3rd, 2015Last Updated: April 3rd, 2019

0 99 2 minutes read

In this example we will learn about GWT Charts. For GWT charts to work you need Java 1.7 or above.

Tools and technologies used in this example are Java 1.8, Eclipse Luna 4.4.2, Eclipse GWT Plugin 2.6.

1. GWT

GWT is a development toolkit for building and optimizing complex browser-based applications. Its goal is to enable productive development of high-performance web applications without the developer having to be an expert in browser quirks, XMLHttpRequest, and JavaScript. GWT is used by many products at Google, including AdWords, AdSense, Flights, Hotel Finder, Offers, Wallet, Blogger. It’s open source, completely free, and used by thousands of developers around the world.

2. gwt-chart jar

To run this example you need to download the gwt-chart jar and put it in the classpath. You can download the jar file from Maven Repository. Download the jar in your local drive then right click on the project, go to ‘Build Path’ then click ‘Configure Build Path’.

Click on the ‘Add External JARs…‘ then browse to the place where you downloaded the jar. Include this in your library list.

If you are creating a maven project you can define the below dependency.

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

3. Project setup

Inherit the module com.googlecode.gwt.charts.Charts in the your XML definition file.

<inherits name="com.googlecode.gwt.charts.Charts"/>

Below is the screenshot of project setup. Important files will be described later.

4. Entry point

Below is the GWTChartExample class which will be called when the application is loaded. This class will implement the com.google.gwt.core.client.EntryPoint and will override the onModuleLoad() method of it. Below is the class snippet.

GWTChartExample.java

package com.javacodegeeks.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.ui.RootLayoutPanel;
import com.google.gwt.user.client.ui.SimpleLayoutPanel;
import com.google.gwt.user.client.ui.Widget;
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.PieChart;

/**
* Entry point classes define <code>onModuleLoad()</code>.
*/
public class GWTChartExample implements EntryPoint {
private SimpleLayoutPanel layoutPanel;
private PieChart pieChart;

/**
* This is the entry point method.
*/
@Override
public void onModuleLoad() {
Window.enableScrolling(false);
Window.setMargin("0px");

RootLayoutPanel.get().add(getSimpleLayoutPanel());

// Create the API Loader
ChartLoader chartLoader = new ChartLoader(ChartPackage.CORECHART);
chartLoader.loadApi(new Runnable() {

@Override
public void run() {
getSimpleLayoutPanel().setWidget(getPieChart());
drawPieChart();
}
});
}

private SimpleLayoutPanel getSimpleLayoutPanel() {
return layoutPanel != null ? layoutPanel : new SimpleLayoutPanel();
}

private Widget getPieChart() {
return pieChart != null ? pieChart : new PieChart();
}

private void drawPieChart() {
// Prepare the data
DataTable dataTable = DataTable.create();
 dataTable.addColumn(ColumnType.STRING, "Subject");
 dataTable.addColumn(ColumnType.NUMBER, "Number of students");
 dataTable.addRows(4);
 dataTable.setValue(0, 0, "History");
 dataTable.setValue(1, 0, "Computers");
 dataTable.setValue(2, 0, "Management");
 dataTable.setValue(3, 0, "Politics");
 dataTable.setValue(0, 1, 20);
 dataTable.setValue(1, 1, 25);
 dataTable.setValue(2, 1, 30);
 dataTable.setValue(3, 1, 35);

// Draw the chart
pieChart.draw(dataTable);
}
}

Define the entry point in the GWT configuration file as below.

GWTChartExample.gwt.xml

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE module PUBLIC "-//Google Inc.//DTD Google Web Toolkit 2.6.0//EN"
"http://google-web-toolkit.googlecode.com/svn/tags/2.6.0/distro-source/core/src/gwt-module.dtd">
<module rename-to='gwtchartexample'>

<inherits name="com.googlecode.gwt.charts.Charts"/>
<inherits name='com.google.gwt.user.theme.clean.Clean'/>

<entry-point class='com.javacodegeeks.client.GWTChartExample'/>
</module>

5. GWT Compile

To compile the project right click on the project, go to Google then click GWT Compile.

You will see a GWT Compile window, click on Compile

In the Console you will see the GWT compie logs as below.

Compiling module com.javacodegeeks.GWTChartExample
Compiling 5 permutations
Compiling permutation 0...
Compiling permutation 1...
Compiling permutation 2...
Compiling permutation 3...
Compiling permutation 4...
Compile of permutations succeeded
Linking into E:\meraj\study\eclipse-workspace\GWTChartExample\war\gwtchartexample
Link succeeded
Compilation succeeded -- 17.418s

6. Run

To run the application right click on the project and choose ‘Run As’ => ‘Web Application (GWT Classic Dev Mode)’. You will see a link on the ‘Development Mode’ window as below.

Copy the link and paste it on the browser. Remove the part after ‘?’, including ‘?’. So the URL now becomes – http://127.0.0.1:8888/GWTChartExample.html. Click enter.