DDevelopment & Design

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

  • byRafal P
  • January 18, 2011
  • 3 minute read

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:

— Previous article

JMS redelivery with ActiveMQ and Servicemix

Next article —

Hibernate hbm2ddl won't create schema before creating tables

You May Also Like
DDevelopment & Design

Sample for lift-ng: Micro-burn 1.0.0 released

During a last few evenings in my free time I've worked on mini-application called micro-burn. The idea of it appear from work with Agile Jira in our commercial project. This is a great tool for agile projects management. It has inline tasks edition, drag & drop board, reports and many more, but it also have a few drawbacks that turn down our team motivation.

Motivation

From time to time our sprints scope is changing. It is not a big deal because we are trying to be agile :-) but Jira's burndowchart in this situation draw a peek. Because in fact that chart shows scope changes not a real burndown. It means, that chart cannot break down an x-axis if we really do more than we were planned – it always stop on at most zero.

Also for better progress monitoring we've started to split our user stories to technical tasks and estimating them. Original burndowchart doesn't show points from technical tasks. I can find motivation of this – user story almost finished isn't finished at all until user can use it. But in the other hand, if we know which tasks is problematic we can do some teamwork to move it on.

So I realize that it is a good opportunity to try some new approaches and tools.

Tools

I've started with lift framework. In the World of Single Page Applications, this framework has more than simple interface for serving REST services. It comes with awesome Comet support. Comet is a replacement for WebSockets that run on all browsers. It supports long polling and transparent fallback to short polling if limit of client connections exceed. In backend you can handle pushes in CometActor. For further reading take a look at Roundtrip promises

But lift framework is also a kind of framework of frameworks. You can handle own abstraction of CometActors and push to client javascript that shorten up your way from server to client. So it was the trigger for author of lift-ng to make a lift with Angular integration that is build on top of lift. It provides AngularActors from which you can emit/broadcast events to scope of controller. NgModelBinders that synchronize your backend model with client scope in a few lines! I've used them to send project state (all sprints and thier details) to client and notify him about scrum board changes. My actor doing all of this hard work looks pretty small:

Lift-ng also provides factories for creating of Angular services. Services could respond with futures that are transformed to Angular promises in-fly. This is all what was need to serve sprint history:

And on the client side - use of service:


In my opinion this two frameworks gives a huge boost in developing of web applications. You have the power of strongly typing with Scala, you can design your domain on Actors and all of this with simplicity of node.js – lack of json trasforming boilerplate and dynamic application reload.

DDD + Event Sourcing

I've also tried a few fresh approaches to DDD. I've organize domain objects in actors. There are SprintActors with encapsulate sprint aggregate root. Task changes are stored as events which are computed as a difference between two boards states. When it should be provided a history of sprint, next board states are computed from initial state and sequence of events. So I realize that the best way to keep this kind of event sourcing approach tested is to make random tests. This is a test doing random changes at board, calculating events and checking if initial state + events is equals to previously created state:



First look

Screenshot of first version:


If you want to look at this closer, check the source code or download ready to run fatjar on github.During a last few evenings in my free time I've worked on mini-application called micro-burn. The idea of it appear from work with Agile Jira in our commercial project. This is a great tool for agile projects management. It has inline tasks edition, drag & drop board, reports and many more, but it also have a few drawbacks that turn down our team motivation.
DDevelopment & Design

Control your bandwidth using ntop

I was looking for tool which could help me check who is using my bandwidth. Here are requirements which I want from this kind of tool:local hosts bandwidth distribution - it is helpful when you are loosing your bandwidth and don't know who abuse it in ...