A Simple Chart for a GWT Application on GAE/J

dkberktas — Sat, 19 Dec 2009 02:41:17 +0000

I am trying charting solutions for a GWT project and gchart seems a nice one. After some digging I create a sample project which is hosted on Google App Engine (GAE) demo. Source code is at Google project

The chart will show the remaining number of months in the current year.

First download the jar from the project home page http://code.google.com/p/gchart/
Put it under war/WEB-INF/lib and add the gchart.jar to your classpath
Create a Web Application project called it GChart-samples (I assume you have Google Eclipse Plugin and follow the basic steps from here)
This step is for make-up, find GChart_samples.html under war/WEB-INF and clear the part between tags.
Open GChart_samples.gwt.xml and add the following line

Create a class in client folder called FirstChart and change it as the following

package com.dogan.kaya.client;

import com.googlecode.gchart.client.GChart;

public class FirstChart extends GChart
{
	public FirstChart()
	{
		setChartSize(350, 350);

		addCurve();

		int[] data = { 12, 11, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1 };
		for (int i = 0; i < data.length; i++)
		{
			getCurve().addPoint(i + 1, data[i]);
		}
		//curve customization
		getCurve().getSymbol().setHeight(10);
		getCurve().getSymbol().setWidth(10);
		getCurve().getSymbol().setBorderColor("black");
		getCurve().getSymbol().setBorderWidth(3);
		getCurve().getSymbol().setSymbolType(SymbolType.LINE);
		getCurve().getSymbol().setFillThickness(2);
		getCurve().getSymbol().setFillSpacing(0);
		//chart customization
		getXAxis().setAxisMin(1);
		getXAxis().setAxisMax(12);
		getXAxis().setTickCount(12);
		getXAxis().setHasGridlines(false);
		getXAxis().setTickLocation(TickLocation.CENTERED);
		getXAxis().setTickLabelFontSize(10);
		getYAxis().setAxisMin(0);
		getYAxis().setAxisMax(12);
		//to get inteter values on y axis, be careful
		//about the number of intervals it can be tricky
		getYAxis().setTickCount(13);
		getYAxis().setTicksPerLabel(2);
		getYAxis().setHasGridlines(false);
		getYAxis().setTickLabelFontSize(10);
		//
		update();
	}
}

Open GChart_samples class and change it like the following

package com.dogan.kaya.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RootPanel;

public class GChart_samples implements EntryPoint
{
	public void onModuleLoad()
	{
		RootPanel.get().add(new FirstChart());
	}
}

My output is sth like that

ps:

some nice links about gchart are as follows:

gchart homepage
A simple tutorial at http://whatwouldnickdo.com/wordpress/264/simple-charts-in-gwt-with-gchart/

Doga Berntas » gchart

A Simple Chart for a GWT Application on GAE/J