Create a chart with GWT

On this page we show you how to create a basic GWT chart and add it to a HTML page. This guide assumes that you know the GWT fundamentals, i.e. how you create and run a GWT project.

HTML sources

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" language="javascript"
         src="application/application.nocache.js"></script>
</head>
<body>
    <h1>A simple line chart</h1>
    <div id="chart"></div>
</body>
</html>

The above code snippet is your starting point. Like every GWT application you have to add a specific JavaScript file to your HTML document which will then load the rest of the application. In the example below the javascript file is called "application.nocache.js"

    <script type="text/javascript" language="javascript"
        src="application/application.nocache.js"></script>

Also note the DIV-element with the id chart which will later on contain the chart.

    <div id="chart"></div>

This represents the minimum amount of code required from the HTML point of view, i.e. referencing the module entry point and creating a container for the chart.

Mandatory configuration

<?xml version="1.0" encoding="UTF-8"?>
<module rename-to='application'>
  <inherits name='com.google.gwt.user.User'/>
  <inherits name='com.arcadiacharts.ArcadiaCharts' />
   
  <entry-point class='com.example.linechart.client.Application'/>
 
  <source path='client'/>
</module>

The gwt module descriptor has to inherit the arcadiaCharts library as shown in the code snippet below.

  <inherits name='com.arcadiacharts.ArcadiaCharts' />

Chart creation

package com.example.linechart.client;
 
import com.arcadiacharts.charts.ChartException;
import com.arcadiacharts.charts.linechart.ACLineChartBuilder;
import com.google.gwt.core.client.EntryPoint;
 
public class Application implements EntryPoint {
 
  @Override
  public void onModuleLoad() {
    String  myData = "Month,Max Temperature, Min Temperature, Precipitation\n"+
            "Jan, 26.7, 18.7, 90.2\n"+
            "Feb, 26.9, 18.6, 56.1\n"+
            "Mar, 27.6, 19.6, 55.9\n"+
            "Apr, 28.2, 20.4, 39.1\n"+
            "May, 29.3, 21.3, 28\n"+
            "Jun, 30.3, 22.3, 12.7\n"+
            "Jul, 30.8, 23.1, 15\n"+
            "Aug, 31.5, 23.4, 11.2\n"+
            "Sep, 31.4, 23.1, 19.8\n"+
            "Oct, 30.5, 22.4, 57.9\n"+
            "Nov, 28.9, 21.3, 76.2\n"+
            "Dec, 27.3, 19.4, 96.5\n";
 
    try {
        new ACLineChartBuilder()
            .setTitle("Climate at Honolulu, Hawaii")
            .setData(myData)
            .build()
            .addToDom("chart");
    } catch (ChartException e) {
        e.printStackTrace();
    }
  }
}

Preliminaries

This is a standard GWT entry point class implementing the GWT "EntryPoint" interface which requires it to define the "onModuleLoad()" method.

The code belowe assigns a string with data in CSV-format to the variable “myData”. In this example we use one long string which is distributed over multiple lines for better legibility. The order of the data is equivalent to the one used by the Microsoft Excel ® export format.

The individual rows have to be separated by the newline-character “\n”.
The first row contains the title and the column titles. The following rows contain one data line each.

String  myData = "Month,Max Temperature, Min Temperature, Precipitation\n"+
        "Jan, 26.7, 18.7, 90.2\n"+
        "Feb, 26.9, 18.6, 56.1\n"+
        "Mar, 27.6, 19.6, 55.9\n"+
        "Apr, 28.2, 20.4, 39.1\n"+
        "May, 29.3, 21.3, 28\n"+
        "Jun, 30.3, 22.3, 12.7\n"+
        "Jul, 30.8, 23.1, 15\n"+
        "Aug, 31.5, 23.4, 11.2\n"+
        "Sep, 31.4, 23.1, 19.8\n"+
        "Oct, 30.5, 22.4, 57.9\n"+
        "Nov, 28.9, 21.3, 76.2\n"+
        "Dec, 27.3, 19.4, 96.5\n";

Chart creation

A new GWT chart is created by instantiating a "chart builder" object and setting the chart properties by calling the corresponding setter-methods. The chart builder allows full access to the API. In our example we set only a title and the dataset. Please note that you can chain method calls using the "fluent interface" style.

With the line

new ACLineChartBuilder()

a new builder object is created which is actually responsible for the creation of line charts.

.setTitle("Climate at Honolulu, Hawaii")

This sets the chart title. This line can be omitted if no title is required. Please note the usage of the Fluent Interface pattern which allows you to chain method calls, thereby improving legibility.

.setData(myData)

Adds the above defined DataSet to the chart.

.build()

Triggers the chart creation by calling the ".build()"-method.

The GWTchart was created but until now it has not been displayed in your website yet. You have to provide the ID of the DIV in which the chart is to be displayed:

.addToDom("chart");

ChartBuilder objects for other chart types

The creation of other chart types ( bar chart or pie chart ) works accordingly to the example above. The only difference is that a different builder has to be chosen. Every chart type has its own builder object.

ACBarChartBuilder for the creation of bar charts.
ACLineChartBuilder for the creation of line charts
ACPieChartBuilder for the creation of pie charts

Home | Features | Demos | Buy | Support | Company

© Arcadia Software GmbH | Heinestrasse 21 | 50931 Cologne | Germany

/