My GWT Graphics project


I finally publish my Community Friday project: GWT Graphics. GWT Graphics is a vector graphics library for GWT. The idea of this project is to provide an easy to use vector graphics library, which handles cross-browser issues for you. Under the hood, two XML-based techniques are used: SVG and VML. VML is for IE, and SVG for other browsers.

I have created a
wiki page
for GWT Graphics. This page contains all necessary information: documentation, examples and demos. If you wanna know how to use the library in your project, see
GWT Graphics manual

Please note that GWT Graphics is a GWT library. This means that you cannot use it on the server-side with Vaadin. However, you can create your own Vaadin widget and use the library on the client-side. To test if I can use the library with Vaadin, I have created two chart components for Vaadin. Check out the
source codes
) :slight_smile:


Tried it out - and love it already. Excellent library! Even I was able to build nice charts with it in a couple of hours. Some screen shots below (context of these charts are pretty much irrelevant).

Kimi Räikkönen’s F1 results for this season:

This one took from zero-to-done (the chart itself wrapped inside Vaadin component) somewhat around 4 hours.

A sample chart for showing hour progress for a project:

This one took from zero-to-done (the chart itself wrapped inside Vaadin component) somewhat around 6 hours.

Thanks for a great library Henri, I felt extremely productive with it all the time.



Just to add - I saw a demo of the above chart. Ville did not mention it, but the chart is animated and shows context info when mouse hovers over it.

Those are splendid looking graphs, Ville!

Good stuff all around,



When I executed the following code in hosted mode (IE8) I get the error below. IE 8 also fails in web mode however FF works fine.

import com.vaadin.contrib.gwtgraphics.client.DrawingArea;

public class Test implements EntryPoint {
public void onModuleLoad() {
DrawingArea canvas = new DrawingArea(400, 400);

Unable to load module entry point class edu.iastate.its.thinkspace.test.client.test.Test (see associated exception for details) (TypeError): Object doesn’t support this property or method
number: -2146827850
description: Object doesn’t support this property or method
at com.vaadin.contrib.gwtgraphics.client.impl.util.SVGUtil.createElementNS(Native Method)

This library looks great, and the example Vaadin components are exactly the kind of thing that would help me out with what I’m trying to accomplish - specifically the pie chart one.

I’ve got the files from the subversion repository, but I don’t know where to start to build the project and haveing a look around the source code. Should there be a file under ‘WebContent\VAADIN\widgetsets’ or is that somthing I need to compile?

Any pointers would be appreciated.


If you are using Vaadin 6.2 and Eclipse with Vaadin plug-in, you can use these example charts in your application by copying this
to your project’s WebContent/WEB-INF/lib dir. After the jar is copied and the widgetset is compiled, you can use use these charts in your application. For example the following code creates a piechart:

PieChart pieChart = new PieChart();
pieChart.setColors(new String[] { "#ee7c08", "#00b4f0" });

IndexedContainer cont = new IndexedContainer();
cont.addContainerProperty("value", Double.class, null);
Object itemId = cont.addItem();
cont.getContainerProperty(itemId, "value").setValue(1.0);
itemId = cont.addItem();
cont.getContainerProperty(itemId, "value").setValue(3.0);


Hi Henri,

This is great, very easy to use. I am trying to figure out a way to move a composite shape. For example I have created an arrow which is made up of two paths, one for the connector line and the for the arrow head. How do I move it as a single unit as the mouse moves?

//Paths that make arrow.
Path path = new Path(50, 50);
path.lineRelativelyTo(100, 0);
Path arrowHead = new Path(145, 45);
arrowHead.lineRelativelyTo(5, 5);
arrowHead.lineRelativelyTo(-5, 5);




You can move a Path, which contains relative steps just by calling the setX and sertY methods of the path.


Hey, nice library!

I am doing a school project, and I need your library to draw some shapes on the screen. i am using GWT 1.7, and everything works great in the Hosted Browser, but when I compile and browse in Firefox, the shapes are all misaligned. I know the Hosted Browser uses the IE engine to render the pages, and when I press compile and browse i view the pages in IE. But still, as you said in the GWT Graphics Manual this kind of behavior is expected and corrected.

I think I downloaded the last available version, I don’t know what the problem is.

This is the code I am using:

Text textTag = new Text(x1, y1, strInfo);
Ellipse ellipse = new Ellipse(x1, y1, (textTag.getFontSize() / 3) * strInfo.length(), textTag.getFontSize());

The problem is that in IE it thinks the x and y are the center of the text and ellipse, but in firefox it thinks the x and y of the text are the bottom left corner.

I fixed this text positioning issue and released a new version of GWT Graphics. Download it from
and see
release notes

Thanks a lot! I really appreciate it.


Didn’t manage to get gwt-graphics two work together with the chart component, some error about missing widgets. Could be user error but tried with jar 0.9 & 0.9.3 of gwt-graphics.

Found & managed to get it to work, cool components like annotated timelines :slight_smile: It’s developed using gwt-visualisation, anyone recommendations against it compared to gwt-graphics ?


Not sure if this project supports gradient. I searched all over and couldn’t find! Let me know if it does, or else is there any idea of getting it in?


Currently, there is no gradient support.

Thats fine. But any ideas when shall we expect that to come? It would be better if we get to know what are the hindrances that prevent us from getting the gradient functionality in?



nice compotent indeed.

I am just curious - have you managed to make GWTGraphics working with
Vaadin 6.6 / GWT 2.3.0 in IE-VML
mode at all?

In my environment this seems to be broken as there is blank area rendered in slot where graphics is expected to be. Tested on IE9 native mode and IE9 compatibility mode with IE8. IE9 set to IE7 compatible mode works somewhat with sample application, but not with my demo app. Other browsers using SVG-path works as expected.

Saying that, I don’t remember experiencing this issue a while ago on pre-6.6 Vaadin with GWT 2.1.0 (IIRC) and IE8. Just trying to figure out whether it’s a global problem or something wrong with my environment.

Furthermore widget compilation drops warning like this:

Scanning for additional dependencies: jar:file:/C:/test/.external/Vaddin%20test%20widgets/gwt-graphics-0.9.7.jar!/org/vaadin/gwtgraphics/client/
      Computing all possible rebind results for 'org.vaadin.gwtgraphics.client.impl.SVGImpl'
         Rebinding org.vaadin.gwtgraphics.client.impl.SVGImpl
            Could not find an exact match rule. Using 'closest' rule <replace-with class='org.vaadin.gwtgraphics.client.impl.VMLImpl'/> based on fall back values. You may need to implement a specific binding in case the fall back behavior does not replace the missing binding

I have attempted to post this Q first on widget’s home forum, but the text never got published.



That discussion forum is moderated due to spam. Took a while but now your messages are accepted and I also answered to your question there.


Hi Henri,

thanks for prompt reply and hint. Now with modified .gwt.xml a SVG-rendering path seems to be working well in
IE9 native mode
. I did not do extensive testing in any mean, but my demo applications worked.

Still the other issue remains open. By chance, have you got any idea on why VML-rendering path fails to draw anything in
IE9 forced to IE8
compatibility? To be clear, I am not using gwt-graphics directly, instead I am experimenting with a ProcessingSVG add-on in a rather trivial use-case where rendering works in all major browsers except IE which is worrying.

Perhaps this question would be better raised to author of SVGProcessing.


No, I don’t have any idea but If you can reproduce the problem with a simple gwt application then you could create a ticket