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

New HTTP Logger Grails plugin

I've wrote a new Grails plugin - httplogger. It logs:

  • request information (url, headers, cookies, method, body),
  • grails dispatch information (controller, action, parameters),
  • response information (elapsed time and body).

It is mostly useful for logging your REST traffic. Full HTTP web pages can be huge to log and generally waste your space. I suggest to map all of your REST controllers with the same path in UrlMappings, e.g. /rest/ and configure this plugin with this path.

Here is some simple output just to give you a taste of it.

17:16:00,331 INFO  filters.LogRawRequestInfoFilter  - 17:16:00,340 INFO  filters.LogRawRequestInfoFilter  - 17:16:00,342 INFO  filters.LogGrailsUrlsInfoFilter  - 17:16:00,731 INFO  filters.LogOutputResponseFilter  - >> #1 returned 200, took 405 ms.
17:16:00,745 INFO  filters.LogOutputResponseFilter  - >> #1 responded with '{count:0}'
17:18:55,799 INFO  filters.LogRawRequestInfoFilter  - 17:18:55,799 INFO  filters.LogRawRequestInfoFilter  - 17:18:55,800 INFO  filters.LogRawRequestInfoFilter  - 17:18:55,801 INFO  filters.LogOutputResponseFilter  - >> #2 returned 404, took 3 ms.
17:18:55,802 INFO  filters.LogOutputResponseFilter  - >> #2 responded with ''

Official plugin information can be found on Grails plugins website here: http://grails.org/plugins/httplogger or you can browse code on github: TouK/grails-httplogger.

DDevelopment & Design

JBoss Envers and Spring transaction managers

I've stumbled upon a bug with my configuration for JBoss Envers today, despite having integration tests all over the application. I have to admit, it casted a dark shadow of doubt about the value of all the tests for a moment. I've been practicing TDD since 2005, and frankly speaking, I should have been smarter than that.

My fault was simple. I've started using Envers the right way, with exploratory tests and a prototype. Then I've deleted the prototype and created some integration tests using in-memory H2 that looked more or less like this example:

@Test
public void savingAndUpdatingPersonShouldCreateTwoHistoricalVersions() {
    //given
    Person person = createAndSavePerson();
    String oldFirstName = person.getFirstName();
    String newFirstName = oldFirstName + "NEW";

    //when
    updatePersonWithNewName(person, newFirstName);

    //then
    verifyTwoHistoricalVersionsWereSaved(oldFirstName, newFirstName);
}

private Person createAndSavePerson() {
    Transaction transaction = session.beginTransaction();
    Person person = PersonFactory.createPerson();
    session.save(person);
    transaction.commit();
    return person;
}    

private void updatePersonWithNewName(Person person, String newName) {
    Transaction transaction = session.beginTransaction();
    person.setFirstName(newName);
    session.update(person);
    transaction.commit();
}

private void verifyTwoHistoricalVersionsWereSaved(String oldFirstName, String newFirstName) {
    List<Object[]> personRevisions = getPersonRevisions();
    assertEquals(2, personRevisions.size());
    assertEquals(oldFirstName, ((Person)personRevisions.get(0)[0]).getFirstName());
    assertEquals(newFirstName, ((Person)personRevisions.get(1)[0]).getFirstName());
}

private List<Object[]> getPersonRevisions() {
    Transaction transaction = session.beginTransaction();
    AuditReader auditReader = AuditReaderFactory.get(session);
    List<Object[]> personRevisions = auditReader.createQuery()
            .forRevisionsOfEntity(Person.class, false, true)
            .getResultList();
    transaction.commit();
    return personRevisions;
}

Because Envers inserts audit data when the transaction is commited (in a new temporary session), I thought I have to create and commit the transaction manually. And that is true to some point.

My fault was that I didn't have an end-to-end integration/acceptance test, that would call to entry point of the application (in this case a service which is called by GWT via RPC), because then I'd notice, that the Spring @Transactional annotation, and calling transaction.commit() are two, very different things.

Spring @Transactional annotation will use a transaction manager configured for the application. Envers on the other hand is used by subscribing a listener to hibernate's SessionFactory like this:

<bean id="sessionFactory" class="org.springframework.orm.hibernate3.annotation.AnnotationSessionFactoryBean" >        
...
 <property name="eventListeners">
     <map key-type="java.lang.String" value-type="org.hibernate.event.EventListeners">
         <entry key="post-insert" value-ref="auditEventListener"/>
         <entry key="post-update" value-ref="auditEventListener"/>
         <entry key="post-delete" value-ref="auditEventListener"/>
         <entry key="pre-collection-update" value-ref="auditEventListener"/>
         <entry key="pre-collection-remove" value-ref="auditEventListener"/>
         <entry key="post-collection-recreate" value-ref="auditEventListener"/>
     </map>
 </property>
</bean>

<bean id="auditEventListener" class="org.hibernate.envers.event.AuditEventListener" />

Envers creates and collects something called AuditWorkUnits whenever you update/delete/insert audited entities, but audit tables are not populated until something calls AuditProcess.beforeCompletion, which makes sense. If you are using org.hibernate.transaction.JDBCTransaction manually, this is called on commit() when notifying all subscribed javax.transaction.Synchronization objects (and enver's AuditProcess is one of them).

The problem was, that I used a wrong transaction manager.

<bean id="transactionManager" class="org.springframework.jdbc.datasource.DataSourceTransactionManager" >
    <property name="dataSource" ref="dataSource"/>
</bean>

This transaction manager doesn't know anything about hibernate and doesn't use org.hibernate.transaction.JDBCTransaction. While Synchronization is an interface from javax.transaction package, DataSourceTransactionManager doesn't use it (maybe because of simplicity, I didn't dig deep enough in org.springframework.jdbc.datasource), and thus Envers works fine except not pushing the data to the database.

Which is the whole point of using Envers.

Use right tools for the task, they say. The whole problem is solved by using a transaction manager that is well aware of hibernate underneath.

<bean id="transactionManager" class="org.springframework.orm.hibernate3.HibernateTransactionManager" >
    <property name="sessionFactory" ref="sessionFactory"/>
</bean>

Lesson learned: always make sure your acceptance tests are testing the right thing. If there is a doubt about the value of your tests, you just don't have enough of them,