GChart 1.1 Released (A client-side 100% pure GWT chart Widget)

138 views
Skip to first unread message

John Gunther

unread,
Oct 24, 2007, 5:38:44 PM10/24/07
to Google Web Toolkit
GChart provides GWT charts without JSNI, browser add-ins, or round
trips to the server:

http://gchart.googlecode.com

Be sure to check out GChart's "Chart Gallery" which includes
traditional grouped bar, x-y scatter, and even semi-log charts, side-
by-side with the GChart code that created them.

What motivated me to write GChart?

My GWT application will ask the user for some data, do some
computations, and display the results in a series of charts--all on
the client.

On the one hand, using jFreeChart (a popular open-source choice among
GWTers, according to this forum) would have added server-related
complexities/overhead. For example, if my application ever became
popular, I'd have to worry about the server getting bogged down
serving up all those charts.

On the other hand, wrapping an existing Javascript chart library or
relying on a proprietary browser add-in would have meant that my
application would break whenever that third-party product + GWT did.
But avoiding this kind of complexity was why I chose GWT in the first
place.

Then it hit me: I can make very nice looking charts that are quite
adequate for my application by placing Labels, plus empty Images of
various styles and sizes, on an AbsolutePanel. A little boxy, yes, but
nice looking charts that clearly communicate the meaning of the data.

GChart needs (in increasing order of importance) feedback, actual
users, and code contributors. If you like GChart 1, please try it in
your own applications and contribute back any improvements to help
create GChart 2.

John C. Gunther

Ping

unread,
Oct 26, 2007, 9:23:06 AM10/26/07
to Google Web Toolkit
Hey, nice work! Maybe I'll have a look at your lib ;) Keep it up...
Maybe some Pie charts? eheheh
Have you thought of using <canvas> and SVG to implement the charts? I
can't think of another way to implement complex figures

John Gunther

unread,
Oct 26, 2007, 3:30:05 PM10/26/07
to Google Web Toolkit
Ping

If it can't be drawn with rectangles, you don't need it! Seriously,
you are absolutely right: I have no clear idea of how to do pie-chart-
curvy edges without using something like SVG or <canvas> which,
strictly speaking, would then no longer be a 100% pure GWT solution
anymore since SVG and canvas are not available on every browser GWT
supports (specifically, IE).

For some applications pie-charts are essential. For others, though, a
bar chart may be an acceptable substitute for a pie chart, since it
can usually be constructed so as to communicate the same data set
reasonably well.

The basic idea of GChart is to provide the best possible charts that
are still 100% GWT compatible. This approach means that you can simply
add gchart.jar to you classpath, add an appropriate "inherits" tag to
your application's .gwt.xml, and your app has the ability to create
charts that should automatically work on any GWT compatible browser
(because they only use GWT's standard widgets).

For some applications, that pure-GWT convenience is worth being a bit
boxy.

That said, if someone knows how to build a pie-chart (or even draw a
simple line at a 45 degree angle with reasonable efficiency) with only
standard-issue GWT components, please become a GChart code
contributor.

John

Fred Sauer

unread,
Oct 26, 2007, 4:19:34 PM10/26/07
to Google-We...@googlegroups.com
You could use Javascript triangles:
  http://www.uselesspickles.com/triangles/demo.html

While they don't buy you curves directly, you can probably get 'close enough' for basic charting needs.

Fred

John Gunther

unread,
Oct 26, 2007, 4:46:53 PM10/26/07
to Google Web Toolkit
Fred,

Thanks for the link/concept--very good idea/link...not sure if I can
turn it into a pie chart, but I bet there's somebody out there who
can.

John


On Oct 26, 4:19 pm, "Fred Sauer" <f...@allen-sauer.com> wrote:
> You could use Javascript triangles:
> http://www.uselesspickles.com/triangles/demo.html
>
> While they don't buy you curves directly, you can probably get 'close
> enough' for basic charting needs.
>
> Fred
>

> --
> Fred Sauer
> f...@allen-sauer.com

Ibmurai

unread,
Oct 27, 2007, 11:06:24 AM10/27/07
to Google Web Toolkit
I'll definetely use this in my major enterprise application with about
100 customers and 500-600 users :)
Just what I've been looking for!
Good job!

John Gunther

unread,
Oct 27, 2007, 1:41:20 PM10/27/07
to Google Web Toolkit
Thank you, ibmurai, that's great to hear !

Fred, Ping,

Regarding the pie chart issue I want to point out that GChart can
already produce "square pie charts". I've added a square pie chart
example to GChart' "Chart Gallery":

http://gchart.googlecode.com/svn/trunk/doc/com/googlecode/gchart/client/package-summary.html#GChartExample06

Though most might call this a very fat stacked bar chart, the block
comments at the top of this example code explain why I think the term
"square pie chart" is appropriate.

John

On Oct 27, 11:06 am, Ibmurai <j...@dansupport.dk> wrote:
> I'll definetely use this in my major enterprise application with about
> 100 customers and 500-600 users :)
> Just what I've been looking for!
> Good job!
>
> On Oct 24, 5:38 pm, John Gunther <johncurtisgunt...@yahoo.com> wrote:
>

> >GChartprovides GWT charts without JSNI, browser add-ins, or round


> > trips to the server:
>
> >http://gchart.googlecode.com
>

> > Be sure to check outGChart's"Chart Gallery" which includes


> > traditional grouped bar, x-y scatter, and even semi-log charts, side-

> > by-side with theGChartcode that created them.


>
> > What motivated me to writeGChart?
>
> > My GWT application will ask the user for some data, do some
> > computations, and display the results in a series of charts--all on
> > the client.
>
> > On the one hand, using jFreeChart (a popular open-source choice among
> > GWTers, according to this forum) would have added server-related
> > complexities/overhead. For example, if my application ever became
> > popular, I'd have to worry about the server getting bogged down
> > serving up all those charts.
>
> > On the other hand, wrapping an existing Javascript chart library or
> > relying on a proprietary browser add-in would have meant that my
> > application would break whenever that third-party product + GWT did.
> > But avoiding this kind of complexity was why I chose GWT in the first
> > place.
>
> > Then it hit me: I can make very nice looking charts that are quite
> > adequate for my application by placing Labels, plus empty Images of
> > various styles and sizes, on an AbsolutePanel. A little boxy, yes, but
> > nice looking charts that clearly communicate the meaning of the data.
>

> >GChartneeds (in increasing order of importance) feedback, actual
> > users, and code contributors. If you likeGChart1, please try it in

Andrés Testi

unread,
Oct 27, 2007, 1:53:09 PM10/27/07
to Google Web Toolkit
Hi John. Nice work.
Take a look in the concepts developed by Walter Zorn. He can rendering
Pie Charts with Div based graphics: http://www.walterzorn.com/jsgraphics/jsgraphics_e.htm

On 27 oct, 14:41, John Gunther <johncurtisgunt...@yahoo.com> wrote:
> Thank you, ibmurai, that's great to hear !
>
> Fred, Ping,
>
> Regarding the pie chart issue I want to point out that GChart can
> already produce "square pie charts". I've added a square pie chart
> example to GChart' "Chart Gallery":
>

> http://gchart.googlecode.com/svn/trunk/doc/com/googlecode/gchart/clie...

John Gunther

unread,
Oct 28, 2007, 4:07:42 PM10/28/07
to Google Web Toolkit
Thanks Andres.

Excellent tip on Zorn's library. I've incorporated the idea along with
Fred's Javascript triangles suggestion into the IdeasForFutureVersions
page of the GChart wiki:

http://code.google.com/p/gchart/wiki/IdeasForFutureVersions

John

Tahir Akhtar

unread,
Oct 29, 2007, 6:04:42 AM10/29/07
to Google Web Toolkit
Someone have link to a live demo of GChart?

John Gunther

unread,
Oct 30, 2007, 11:39:18 PM10/30/07
to Google Web Toolkit
Sorry Tahir, to the best of my knowledge a live demo is still one of
many good ideas for GChart that is yet to be implemented.

OFFER: The first person that provides a URL to a page that contains a
real live GChart chart will get that URL added to the GChart home
page's link's section with the title "The Very First Real Live
GChart" (I'd like to offer a cash prize, but my wife would kill me).

In the mean time, in addition to the chart gallery sample code, there
are an additional 9 test charts--these test charts do give the system
a fairly good workout/coverage. All of this sample/test code, along
with the very simple GWT application used to execute these charts can
be viewed here:

http://gchart.googlecode.com/svn/trunk/src/com/googlecode/gchartdemo/client/

It's pretty easy to install and run such demo code on your own, say,
from the Eclipse IDE, but I realize that's not nearly as helpful as a
live demo.

John

On Oct 29, 6:04 am, Tahir Akhtar <tahir.akh...@gmail.com> wrote:
> Someone have link to a live demo ofGChart?
>
> On Oct 29, 1:07 am, John Gunther <johncurtisgunt...@yahoo.com> wrote:
>
> > Thanks Andres.
>
> > Excellent tip on Zorn's library. I've incorporated the idea along with
> > Fred's Javascript triangles suggestion into the IdeasForFutureVersions
> > page of theGChartwiki:
>
> >http://code.google.com/p/gchart/wiki/IdeasForFutureVersions
>
> > John
>
> > On Oct 27, 1:53 pm, Andrés Testi <andres.a.te...@gmail.com> wrote:
>
> > > Hi John. Nice work.
> > > Take a look in the concepts developed by Walter Zorn. He can rendering
> > > Pie Charts with Div based graphics:http://www.walterzorn.com/jsgraphics/jsgraphics_e.htm
>
> > > On 27 oct, 14:41, John Gunther <johncurtisgunt...@yahoo.com> wrote:
>
> > > > Thank you, ibmurai, that's great to hear !
>
> > > > Fred, Ping,
>
> > > > Regarding the pie chart issue I want to point out thatGChartcan
> > > > already produce "square pie charts". I've added a square pie chart

> > > > example toGChart' "Chart Gallery":

Henrik Adolfsson

unread,
Oct 31, 2007, 10:56:58 AM10/31/07
to Google Web Toolkit
Alright! Great stuff!

In my project we use JFreeChart to generate graph images of a lot of
statistical data. But displaying a 'dead' image is not really GWT. To
change dates and categories to display in the chart, it's with the
usual buttons and textfields. I would like to have something much more
interactive, like the graph-package that doesn't work on IE: panning,
scrolling, zooming. Any plans to make it more interactive?

/Henrik

On 31 Okt, 04:39, John Gunther <johncurtisgunt...@yahoo.com> wrote:
> Sorry Tahir, to the best of my knowledge a live demo is still one of
> many good ideas for GChart that is yet to be implemented.
>
> OFFER: The first person that provides a URL to a page that contains a
> real live GChart chart will get that URL added to the GChart home
> page's link's section with the title "The Very First Real Live
> GChart" (I'd like to offer a cash prize, but my wife would kill me).
>
> In the mean time, in addition to the chart gallery sample code, there
> are an additional 9 test charts--these test charts do give the system
> a fairly good workout/coverage. All of this sample/test code, along
> with the very simple GWT application used to execute these charts can
> be viewed here:
>

> http://gchart.googlecode.com/svn/trunk/src/com/googlecode/gchartdemo/...

> > > > > > > John C. Gunther- Dölj citerad text -
>
> - Visa citerad text -

John Gunther

unread,
Oct 31, 2007, 11:39:56 PM10/31/07
to Google Web Toolkit
Henrik,

Thanks for the kudos.

As for your comments on interactivity, YES. But I don't have a clear
idea of exactly what such features should be, and how they should all
fit into the current system. I really like scroll and zoom though--I
have had excellent luck using scroll and zoom with large data sets in
Excel Charts in a former life.

Note that you can do a lot of interactive stuff now if other widgets
drive the interaction. You just need to remember
to call GChart.update() after making the changes to the chart.
Unfortunately, update() isn't as fast as it could be, as it
regenerates (almost) the entire chart each time (this was the simplest
implementation). Still, you can have a button and change the chart
data and then call update() and your chart will change, etc.

Strictly speaking, the GChart itself has one interactive feature:
template-driven hovertext. Check the setHovertextTemplate method in
the GChart javadocs.

More ideas on making GChart more interactive are on the GChart wiki.

John

On Oct 31, 10:56 am, Henrik Adolfsson <hen.adolfs...@gmail.com> wrote:
> Alright! Great stuff!
>
> In my project we use JFreeChart to generate graph images of a lot of
> statistical data. But displaying a 'dead' image is not really GWT. To
> change dates and categories to display in the chart, it's with the
> usual buttons and textfields. I would like to have something much more
> interactive, like the graph-package that doesn't work on IE: panning,
> scrolling, zooming. Any plans to make it more interactive?
>
> /Henrik
>
> On 31 Okt, 04:39, John Gunther <johncurtisgunt...@yahoo.com> wrote:
>
> > Sorry Tahir, to the best of my knowledge a live demo is still one of

> > many good ideas forGChartthat is yet to be implemented.


>
> > OFFER: The first person that provides a URL to a page that contains a

> > real liveGChartchart will get that URL added to theGCharthome

John Gunther

unread,
Nov 3, 2007, 4:39:28 PM11/3/07
to Google Web Toolkit
Tahir,

You can now click on the bar chart displayed on GChart's "Project
Home" to open it up into a live demo:

http://gchart.googlecode.com

The live demo improves the GChart site a lot and I would not have
added it without your question. Thank-you!

John


On Oct 29, 6:04 am, Tahir Akhtar <tahir.akh...@gmail.com> wrote:

> Someone have link to a live demo ofGChart?
>
> On Oct 29, 1:07 am, John Gunther <johncurtisgunt...@yahoo.com> wrote:
>
> > Thanks Andres.
>
> > Excellent tip on Zorn's library. I've incorporated the idea along with
> > Fred's Javascript triangles suggestion into the IdeasForFutureVersions
> > page of theGChartwiki:
>
> >http://code.google.com/p/gchart/wiki/IdeasForFutureVersions
>
> > John
>
> > On Oct 27, 1:53 pm, Andrés Testi <andres.a.te...@gmail.com> wrote:
>
> > > Hi John. Nice work.
> > > Take a look in the concepts developed by Walter Zorn. He can rendering
> > > Pie Charts with Div based graphics:http://www.walterzorn.com/jsgraphics/jsgraphics_e.htm
>
> > > On 27 oct, 14:41, John Gunther <johncurtisgunt...@yahoo.com> wrote:
>
> > > > Thank you, ibmurai, that's great to hear !
>
> > > > Fred, Ping,
>
> > > > Regarding the pie chart issue I want to point out thatGChartcan
> > > > already produce "square pie charts". I've added a square pie chart

> > > > example toGChart' "Chart Gallery":

ross

unread,
Nov 3, 2007, 7:02:24 PM11/3/07
to Google Web Toolkit
this looks awesome John, thanks!

I was just thinking earlier today, 'how am i gonna do my client-side
charts' and then I read your post :) I did not want to take the
server-side JFreeChart approach and you've stepped up w/ a great and
simple solution

cheers
Ross

Ray Cromwell

unread,
Nov 5, 2007, 2:58:09 AM11/5/07
to Google Web Toolkit
FYI,
We'll be releasing (open-source) a GWT charting solution (old demo
at http://www.timepedia.org) this week that handles interactivity
(zooming, panning, etc) and a great deal more. It's designed to scale
to 30,000 datapoints (client-side only) or in the millions with server-
side RPC assistance. All look-and-feel parameters are controlled via
Cascading Style Sheets, there's a JS API for non-GWT apps, overlays
and markers supported, and microformat based zero-lines-of-code chart
configuration is supported.

-Ray


On Oct 31, 6:56 am, Henrik Adolfsson <hen.adolfs...@gmail.com> wrote:
> Alright! Great stuff!
>
> In my project we use JFreeChart to generate graph images of a lot of
> statistical data. But displaying a 'dead' image is not really GWT. To

> change dates and categories to display in thechart, it's with the


> usual buttons and textfields. I would like to have something much more
> interactive, like the graph-package that doesn't work on IE: panning,
> scrolling, zooming. Any plans to make it more interactive?
>
> /Henrik
>
> On 31 Okt, 04:39, John Gunther <johncurtisgunt...@yahoo.com> wrote:
>
> > Sorry Tahir, to the best of my knowledge a live demo is still one of
> > many good ideas for GChart that is yet to be implemented.
>
> > OFFER: The first person that provides a URL to a page that contains a

> > real live GChartchartwill get that URL added to the GChart home


> > page's link's section with the title "The Very First Real Live
> > GChart" (I'd like to offer a cash prize, but my wife would kill me).
>

> > In the mean time, in addition to thechartgallery sample code, there

> > > > > > Regarding the piechartissue I want to point out thatGChartcan


> > > > > > already produce "square pie charts". I've added a square piechart
> > > > > > example toGChart' "ChartGallery":
>
> > > > > >http://gchart.googlecode.com/svn/trunk/doc/com/googlecode/gchart/clie...
>

> > > > > > Though most might call this a very fat stacked barchart, the block


> > > > > > comments at the top of this example code explain why I think the term

> > > > > > "square piechart" is appropriate.


>
> > > > > > John
>
> > > > > > On Oct 27, 11:06 am, Ibmurai <j...@dansupport.dk> wrote:
>
> > > > > > > I'll definetely use this in my major enterprise application with about
> > > > > > > 100 customers and 500-600 users :)
> > > > > > > Just what I've been looking for!
> > > > > > > Good job!
>
> > > > > > > On Oct 24, 5:38 pm, John Gunther <johncurtisgunt...@yahoo.com> wrote:
>
> > > > > > > >GChartprovides GWT charts without JSNI, browser add-ins, or round
> > > > > > > > trips to the server:
>
> > > > > > > >http://gchart.googlecode.com
>

> > > > > > > > Be sure to check outGChart's"ChartGallery" which includes


> > > > > > > > traditional grouped bar, x-y scatter, and even semi-log charts, side-
> > > > > > > > by-side with theGChartcode that created them.
>
> > > > > > > > What motivated me to writeGChart?
>
> > > > > > > > My GWT application will ask the user for some data, do some
> > > > > > > > computations, and display the results in a series of charts--all on
> > > > > > > > the client.
>
> > > > > > > > On the one hand, using jFreeChart (a popular open-source choice among
> > > > > > > > GWTers, according to this forum) would have added server-related
> > > > > > > > complexities/overhead. For example, if my application ever became
> > > > > > > > popular, I'd have to worry about the server getting bogged down
> > > > > > > > serving up all those charts.
>

> > > > > > > > On the other hand, wrapping an existing Javascriptchartlibrary or

John Gunther

unread,
Nov 5, 2007, 3:31:05 PM11/5/07
to Google Web Toolkit
Roy,

Really appreciate hearing that you plan to use GChart--please let me
know if you hit any snags and I'll try to help. If you can share a
link to your application when it is done so others can see how you
used GChart, that would be great.

Ray,

Very impressive demo and product. Looking forward to your release.

For another demo whose feature-list far exceeds GChart's (they have
pie charts, and not just the square kind!) check out the test set/demo
for Dojo charting's next release:

http://archive.dojotoolkit.org/nightly/dojotoolkit/dojox/charting/tests/

While I admire and respect those who can pull this kind of thing off,
I still think the simplicity of GChart's approach--weighing in at
under 1000 lines of pure-GWT Java with no JSNI or browser plugins
required--will make it an attractive alternative for many client-side
GWT charting applications. Less is less, but it is also, more.

John


On Nov 5, 2:58 am, Ray Cromwell <cromwell...@gmail.com> wrote:
> FYI,
> We'll be releasing (open-source) a GWT charting solution (old demo

> athttp://www.timepedia.org) this week that handles interactivity

Tahir Akhtar

unread,
Nov 12, 2007, 10:47:38 AM11/12/07
to Google Web Toolkit
Thanks for live demo.
Loads real quick and draws even quicker. I tried the demo on firefox
on ubuntu and everything was as smooth as possible.
Your wife must be proud of you :)
Reply all
Reply to author
Forward
0 new messages