New Add-on: Connectivity graphs with Vaadin and Google App Engine (GAE)

Just posted a new add-on to demonstrate how to display a graph theory type connectivity graph in Vaadin and GAE. To do it just in Vaadin is relatively easier and was discussed in However, GAE doesn’t allow a lot of basic Java libraries to run, greatly limiting the options. Below is the text I posted with the VaadinGraphViz add-on (

There are a lot of good java graphing libraries out there - Jgraph, JGraphT and Jung among others. However, for various reasons, none will play nicely with Google App Engine because it disallows using a lot of java classes (e.g. java.awt.*) that these, or related libraries (like Batik for converting to SVG) require. I tried using the various Vaadin SVG add-ons but they didn’t work well with GAE either.

Note: By graphing I mean graph theory type connectivity graphs and not ordinary charting that can be accomplished through something like JFreeChart (which also doesn’t play well with GAE for similar reasons).

The only thing I could find to work (without enormous amounts of work) was an experimental Google Charts API GraphViz offering (see:

It took me a full week to figure out that 1) none of the existing libraries could be made to work with Vaadin and 2) to figure out how to make this specific Charts API work with Vaadin. This add-in shows 3 ways to display these GraphViz charts in Vaadin:

  1. Getting the Google Chart API provided PNG file As an ExternalResource in an Embedded object.
  2. Getting the Google Chart API provided PNG file in a VisualizationsForVaadin ImageChart.
  3. Getting the Google Chart API provided JSON string, converting to an HTML image map and displaying in a UsemapImage add-on object.

The third approach enables an action to be taken in response to a click on a graph node. However, I am not sure how much further this approach can be taken. I ultimately wanted drag-and-drop map arrangement capabilities which the full libraries that don’t work with GAE provide. It will be difficult, if possible at all, to get the image map approach to provide this.

A fourth approach I may implement is to convert the Google JSON to Open Flash Chart JSON using the ofcvaadin project ( but am not sure how well OFC can support graphs as opposed to charts.

Uploaded an update to the add-on containing an Open Flash Chart example. Turns out OFC, unfortunately, is entirely unsuited to displaying connectivity graphs of the sort displayed by GraphViz. The add-on code does show how to convert Google GraphViz Graph JSON to Open Flash Chart JSON, which could be useful for anyone wanting to use Open Flash Chart. Their documentation is good but shallow.

The demo UI of the add-on is also greatly improved.

The conclusion of this project is that there are currently no full-featured graphing alternatives available if you want to use both GAE and Vaadin. Some possibilities are:

  1. Google releases support for the GraphViz graph through their visualization API (other than as an Image Chart) and not just through their chart API. Possibly I am missing something and some gwt visualization guru can make clicking and drag/drop functionality work as is.
  2. UsemapImage could be enhanced to provide some additional functionality. For example, I wanted to change the color of the node when a user clicked on it. This wasn’t really supported and seemed too complicated for me to figure out, so I just popup a message with the recognized name of the node which is supported functionality. It probably isn’t hard for someone who actually knows what they’re doing when the V widget stuff gets involved.

This add-on was given a more appropriate name → GAE Graph Viz For Vaadin
and can now be accessed at: