Simple Charts in GWT with gchart

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.


9 Comments

  1. Nick,

    Great to see this tutorial, which is different from anything I’ve got at my site or have seen anywhere else. A very small, tutorial-sized, application that includes a GChart yet it still actually does something useful. With animation, no less. I’ve linked back to your post from the Client-side GChart site.

    Readers of your blog may have noticed that the y tick labels lack commas for the thousands, and the x tick labels run together a bit with the default GChart settings your example uses. This can easily be corrected via the Axis class’ setTickLabelFormat and setTickCount methods. And, if they need more crisply drawn lines, they should check out LINE_CANVAS.

    Just yesterday I released GChart 2.4 which would have made it possible to have HTML or even GWT-Widget-based pop-ups appear as you sweep your mouse across the chart. Not that a simple compound interest example needs that, but I had to get a plug in for the new version. Please check out the updated live demo and 2,4 release notes for details.

    John C. Gunther
    http://gchart.googlecode.com

  2. Nick,

    There is a GChart bug that your demo application exposed for the first time. Fortunately there is an easy workaround (two, actually)…and I even have an excuse….

    To see the bug, in IE7, click Calculate w your default settings (w 10 years). Then change the number of years to 0, and hit calculate again.

    Works fine in Chrome, FF2, FF3 BUT, IE7 you see both the new one point curve AND most of the old curve from the 10, shifted right a bit (bug also happens in the IE-based hosted mode browser).

    Workaround #1: replace the two lines of your code that read:

    chart.update();
    tPanel.selectTab(1);

    With the same two lines, in reverse order:

    tPanel.selectTab(1);
    chart.update();

    Workaround #2: At the end of your AmountChart constructor, add the line:

    setOptimizeForMemory(true);

    In this mode, GChart actually removes the unused elements, rather than just hiding them. Will run a bit slower in this mode, though, for certain kinds of repeated update scenarios where the number of elements representing the chart changes a lot between each update. Most update scenarios won’t see much of an impact, so this workaround is likely the best one.

    What appears to be the problem is that, if the GChart is on an invisible tab, the setVisible(false)
    calls that GChart makes internally to hide the unneeded elements are ignored by IE7, which probably assumes that, since the parent element is invisible anyway, why bother making any of its child elements invisible (this bad logic may give IE a performance boost, but it is not endorsed by the other browsers). So even though GChart is calling setVisible(false) on the elements, IE7 is ignoring those calls.

    When you flip the order of the lines, IE sees that the container is visible, and so it honors GChart’s requests to make the unused contained elements invisible. For the second workaround, because the setOptimizeForMemory(true) mode removes the elements entirely, rather than just hiding them via setVisible(false), the problem does not occur either.

    I’d like to fix this bug in GChart, if I can figure out a good way to workaround what I consider to be the root cause of the problem (an IE7 bug). Until then you either need to call update AFTER making the chart visible, or else switch into setOptimizeForMemory(false) mode.

    John

  3. Nick says:

    John, thanks for the comment. Nice job putting this API together, btw.
    I’ve tried the app in FF and Opera but didn’t have access to IE until just now and it seems you’re correct. Also looks like the iframe box size I have is messed up in IE and puts scroll bars in. If I have some time this weekend (and access to IE) I’ll make the changes you suggested and update the app and source download.

    No one can ever say they didn’t learn anything from my post,
    Nick

  4. Nick,

    I expect your tutorial will be very helpful to new GChart users (easily understood even though it actually does something useful) so I’ve linked back to it from the GChart site.

    Incidentally, version 2.4, which adds popups and click events, was just released yesterday. If you wanted to make the selected point get bigger or to make it possible for the hovertext to popup without the mouse having to be right on top of the point, v2.4 can do that for you.

    (Last 2 words of my previous comment should have read “setOptimizeForMemory(true) mode”).

    John

  5. Nick,

    I’ve released version 2.41. which fixes the bug revealed by your GChart demo.

    The GChart paint test now includes a stripped down version of your demo. I also submitted another version of your code that reproduces just the underlying bug–minus any GChart references–to the GWT issue tracker (issue 3336).

    If I had a dime for every demo that turned into a test case, I’d be starting my own charitable foundation by now.

    John

  6. Phani Kumar says:

    I can’t open the source file. I downloaded it. the file name is compoundinterest.7z. How should i open this code?

  7. Nick says:

    File format is in 7-Zip. You can get it here: http://www.7-zip.org/
    If you aren’t familiar, and still use winzip then you’re still living in the 90s.

  8. Costis says:

    Great example! Thanx!

  9. Mark says:

    Hi,I’m learning GChart recently.I have some problems,can you help me?
    I use Method setTickLabelFormat(“#”) to set Y-Axis’s ticks,but it also influences the point’s hovertextformat which display on the chart.
    Now I want to make the ticks on Y-Axis(also Y2-Axis) display as (int),and the point’s hovertext display as (double).
    That how should I do?
    Thank you!

Leave a Reply