I’ve been tasked with adding some simple charts to a GWT project and after looking at several APIs I’ve settled with trying out gchart. A couple of reasons for this choice is:
- gchart is 100% GWT (meaning it’s not a javascript wrapper)
- It runs on the client-side. Some other charting APIs actually build the chart on the server-side as an image and return the link for the image. This can be an advantage for some situations, so you may need to think about if you want a client-side or server-side render.
- Open source under Apache License, Version 2.0
- Very simple to use.
I put together a very simple example, and it shows how quickly you can build a chart. The example is a compound interest financial calculator shown below (go ahead and try it out). It has a few fields to enter your initial amount, annual contributions, interest rate, number of compounds per year and the number of years. After clicking on the calculate button it will show your future amount and chart it.
In case the iframe doesn’t show up in your browser you can see and try the charting example here.
The simplicity of this charting API is the fact that the charts are GWT widgets. Here’s the code for my compounding interest chart:
public class AmountChart extends GChart {
public AmountChart() {
setChartSize(240, 200);
setPadding("4px");
getXAxis().setAxisLabel("Years");
getYAxis().setAxisLabel("$");
}
public void addPoint(double x, double y) {
GWT.log("point added ("+x+", "+y+")", null );
getCurve().addPoint(x, y);
}
}
Then all I did was add it to the DecoratedTabPanel, put in the event listeners, the formula (which I got from wiki) and done.
You can download the full source here, and the entire application is client side.
Updated 2008-01-28: I updated the iframe that the form is in to be more friendly with IE. Also made a change recommended by John Gunther to remedy a problem with IE. Compiled using gchart 2.4 and I updated the downloadable source.