Creating charts in GWT was never so easy. (OFC GWT)

In Java world there are many libaries which allow to create charts (with the most popular is JFree Chart Library). None of this libraries are however simple, powerfull and gives pretty looking charts. This is why I investigated Open Flash Chart which is library for charting written in flash. Fortunately there is a port for GWT which allows to use OFC in RIA applications. So in the next few paragraphs I will show how to use OFC GWT (this is the name of GWT port) and why this library is so amazing. Enjoy.

Starting point is OFC GWT homepage. This is the place from where porting libary (with OFC inside) could be downloaded.  I prefer to use maven  instead of downloading, so here is part of my pom.xml configured for OFC GWT. Notice that the library version is 1.3.0 but in the nearest future there will be release of new 2.0.1 version (now available in beta).

..
<br />
<repositories><br />
<repository><br />
<id> OFCGWT repo</id><br />
<url>http://logicaldoc.sourceforge.net/maven</url><br />
</repository><br />
</repositories><br />


<br />
<dependency><br />
<groupid>ofcgwt</groupid><br />
<artifactid>ofcgwt</artifactid><br />
<version>1.3.0</version><br />
</dependency><br />

..

Now, after the OFC GWT library is downloaded, it’s time to make some code. In OFC GWT there are many sort of charts such as: bar (horizontal, vertical), pie, scater, radar etc. All them are represented in GWT by ChartWidget class (which extends Widget). This class is a wrapper, which can be placed on any GWT panel, container just like normal GWT widget. ChartWidget renders chart on screen by communicating with OFC library by JSON.
JSON data, which describes chart to draw, have to be created by ChartData class. This is the heart of the OFC GWT port, the most important class. This class objects are used to configure title, axies, data and chart type to render. Below is the code which shows how easy is to use both above classes.

..
<br />
FlowPanel panel = new FlowPanel();

ChartWidget chart = new ChartWidget();
ChartData chartData = new ChartData(title);
chartData.setBackgroundColour(“#ffffff”);//white background
chartData.addElements(createPieChart());
chart.setSize(“350”, “350”);
chart.setJsonData(chartData.toString());

panel.add(chart);

..

Only one thing left – function which create pie chart. In OFC You can chose from various charts. All of them are easy and simmilar in use. There is a good demo app with source code in the library, where You can find out how to configure each graph. Here is my code, which creates animated and transparent pie chart without labels on graph.

<br />
private PieChart createPieChart() {<br />
PieChart pieChart = new PieChart();<br />
pieChart.setAlpha(0.3f);    //set transparency<br />
pieChart.setNoLabels(true); // w do not want labels on screen<br />
pieChart.setAnimate(true);<br />
pieChart.setGradientFill(true);<br />
pieChart.setColours("#779C00", "#0000ff");<br />
pieChart.setTooltip("#label# - #val#");<br />
pieChart.addSlices(new PieChart.Slice(30, "TV's in Poland")); //this should be passed in parameter<br />
pieChart.addSlices(new PieChart.Slice(70, "Radios in Poland"));//this should be passed in parameter<br />
return pieChart;<br />
}<br />

And thats all. This is all You need to draw pretty looking graphs. No playing with css’es or colors, no complicated building of data sets and what is the most important, not even line of server side code!

Here is the running example of OFC GWT charts, where You can see and experiment with different types and effects.

One more thing. OFC GWT is not only library to draw charts. It also allows to handle user interaction. This is done by IOnClickListener’s. More about themcould be found in OFC GWT JavaDocs.

More graph examples:

You May Also Like

Inconsistent Dependency Injection to domains with Grails

I've encountered strange behavior with a domain class in my project: services that should be injected were null. I've became suspicious as why is that? Services are injected properly in other domain classes so why this one is different?

Constructors experiment

I've created an experiment. I've created empty LibraryService that should be injected and Book domain class like this:

class Book {
def libraryService

String author
String title
int pageCount

Book() {
println("Finished constructor Book()")
}

Book(String author) {
this()
this.@author = author
println("Finished constructor Book(String author)")
}

Book(String author, String title) {
super()
this.@author = author
this.@title = title
println("Finished constructor Book(String author, String title)")
}

Book(String author, String title, int pageCount) {
this.@author = author
this.@title = title
this.@pageCount = pageCount
println("Finished constructor Book(String author, String title, int pageCount)")
}

void logInjectedService() {
println(" Service libraryService is injected? -> $libraryService")
}
}
class LibraryService {
def serviceMethod() {
}
}

Book has 4 explicit constructors. I want to check which constructor is injecting dependecies. This is my method that constructs Book objects and I called it in controller:

class BookController {
def index() {
constructAndExamineBooks()
}

static constructAndExamineBooks() {
println("Started constructAndExamineBooks")
Book book1 = new Book().logInjectedService()
Book book2 = new Book("foo").logInjectedService()
Book book3 = new Book("foo", 'bar').logInjectedService()
Book book4 = new Book("foo", 'bar', 100).logInjectedService()
Book book5 = new Book(author: "foo", title: 'bar')
println("Finished constructor Book(Map params)")
book5.logInjectedService()
}
}

Analysis

Output looks like this:

Started constructAndExamineBooks
Finished constructor Book()
Service libraryService is injected? -> eu.spoonman.refaktor.LibraryService@2affcce2
Finished constructor Book()
Finished constructor Book(String author)
Service libraryService is injected? -> eu.spoonman.refaktor.LibraryService@2affcce2
Finished constructor Book(String author, String title)
Service libraryService is injected? -> null
Finished constructor Book(String author, String title, int pageCount)
Service libraryService is injected? -> null
Finished constructor Book()
Finished constructor Book(Map params)
Service libraryService is injected? -> eu.spoonman.refaktor.LibraryService@2affcce2

What do we see?

  1. Empty constructor injects dependencies.
  2. Constructor that invokes empty constructor explicitly injects dependencies.
  3. Constructor that invokes parent's constructor explicitly does not inject dependencies.
  4. Constructor without any explicit call declared does not call empty constructor thus it does not inject dependencies.
  5. Constructor provied by Grails with a map as a parameter invokes empty constructor and injects dependencies.

Conclusion

Always explicitily invoke empty constructor in your Grail domain classes to ensure Dependency Injection! I didn't know until today either!