Tuesday, April 1st, 2008
Version 2.0 of GChart has been released:
The main idea behind GChart is simple: You can make very nice charts efficiently out of a reasonably small number of 1-cell Grids (for the aligned labels) and (empty) Images (for everything else), styled and positioned appropriately on an AbsolutePanel. Not surprisingly, bar charts don’t suffer at all under the limitations imposed by this strategy–but (as long as you don’t mind using dotted connecting lines or banded-filled pie slices) line and pie charts also do remarkably well.
With version 2.0 the library adds support for pie, line, and area charts, baseline-based bar charts, and more.
John Gunther wrote up some of the technical details:
Squaring the Pie Slice
Some of you may recall the original GChart 1.1 post/discussion:
Reading this, you may wonder how I ended up implementing pie slices
and arbitrary angled connecting lines. Did I use the “transparent
border triangle trick” and/or clever algorithms from walterzorn.com?
Though I tried to use these, I reverted to something a lot simpler:
dotted connecting lines and banded-filled pie slices. Two new Symbol
class properties, fillSpacing and fillThickness, let you control the
spacing of the dots/bands and their size/thickness.
Though this approach means you may sometimes have to choose between
visual chart quality and speed, these new properties make it easy for
you to control this tradeoff. Besides, I like to think that dotted
connecting lines and banded fill pie slices really don’t look all that
much worse than the solid fill variety. But then again, I could never
understand why no one ever used square pie charts…
In any case, the whole point of GChart is to layer the chart on top of
standard GWT Widgets, so, since those Widgets can only really draw
rectangles efficiently, I decided to make a virtue of necessity and
whole-heartedly embrace this dotted/banded look.
CSS Convenience Methods: A cure for “CSS anxiety disorder”?
For many months I suffered from “CSS anxiety disorder”: a condition
arising from one’s desire to use CSS to specify an attribute (and thus
conform to a GWT best practice) while simultaneously wanting the same
property in the Java API (so that it would not be unnaturally
segregated from closely related features).
To address this (possibly imaginary) problem, the GChart 2.0 Java API
includes “CSS convenience methods” that can (optionally) override
traditionally CSS-based attribute specifications for certain selected
To some, this may seem like a fine point, since you could easily do
the same thing via a GWT DOM class method call, but to me, once you
invoke a DOM method you are thinking of the GChart as an HTML element,
and for some usage scenarios, that just isn’t logical.
For example, for some applications, the background color of a GChart
is mainly about how the color-scheme of the chart blends in with the
surrounding page, and for these applications a CSS-based specification
makes good sense. Yet, for other applications, it is mainly all about
how well background color matches with, say, with the pie slice
shading pattern. That is, in some cases, background color is better
viewed as a feature of the GChart considered as a Java object
independent of its connection to any web page. So why can’t you just
call GChart.setBackgroundColor in such cases? With GChart, you can.
To assure that the two specification methods can exist harmoniously
together, GChart recognizes a special property value, GChart.USE_CSS,
which instructs GChart to stand aside and allow the traditional CSS
cascade to define the attribute. For all such “dual access” GChart
Java properties (which are simultaneously also CSS attributes),
USE_CSS is the default property value. This assures that you can use
CSS just as you would with a standard GWT Widget whenever it makes
more sense to control that attribute from the “GChart as HTML element”
Thanks to these CSS convenience methods, I have attained inner peace
through Java/CSS redundancy. I recommend the same treatment for anyone
else suffering from “CSS anxiety disorder”. See the GChart.USE_CSS
javadoc comment for more information.
Posted by Dion Almaer at 8:06 am