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

How to use mocks in controller tests

Even since I started to write tests for my Grails application I couldn't find many articles on using mocks. Everyone is talking about tests and TDD but if you search for it there isn't many articles.

Today I want to share with you a test with mocks for a simple and complete scenario. I have a simple application that can fetch Twitter tweets and present it to user. I use REST service and I use GET to fetch tweets by id like this: http://api.twitter.com/1/statuses/show/236024636775735296.json. You can copy and paste it into your browser to see a result.

My application uses Grails 2.1 with spock-0.6 for tests. I have TwitterReaderService that fetches tweets by id, then I parse a response into my Tweet class.


class TwitterReaderService {
Tweet readTweet(String id) throws TwitterError {
try {
String jsonBody = callTwitter(id)
Tweet parsedTweet = parseBody(jsonBody)
return parsedTweet
} catch (Throwable t) {
throw new TwitterError(t)
}
}

private String callTwitter(String id) {
// TODO: implementation
}

private Tweet parseBody(String jsonBody) {
// TODO: implementation
}
}

class Tweet {
String id
String userId
String username
String text
Date createdAt
}

class TwitterError extends RuntimeException {}

TwitterController plays main part here. Users call show action along with id of a tweet. This action is my subject under test. I've implemented some basic functionality. It's easier to focus on it while writing tests.


class TwitterController {
def twitterReaderService

def index() {
}

def show() {
Tweet tweet = twitterReaderService.readTweet(params.id)
if (tweet == null) {
flash.message = 'Tweet not found'
redirect(action: 'index')
return
}

[tweet: tweet]
}
}

Let's start writing a test from scratch. Most important thing here is that I use mock for my TwitterReaderService. I do not construct new TwitterReaderService(), because in this test I test only TwitterController. I am not interested in injected service. I know how this service is supposed to work and I am not interested in internals. So before every test I inject a twitterReaderServiceMock into controller:


import grails.test.mixin.TestFor
import spock.lang.Specification

@TestFor(TwitterController)
class TwitterControllerSpec extends Specification {
TwitterReaderService twitterReaderServiceMock = Mock(TwitterReaderService)

def setup() {
controller.twitterReaderService = twitterReaderServiceMock
}
}

Now it's time to think what scenarios I need to test. This line from TwitterReaderService is the most important:


Tweet readTweet(String id) throws TwitterError

You must think of this method like a black box right now. You know nothing of internals from controller's point of view. You're only interested what can be returned for you:

  • a TwitterError can be thrown
  • null can be returned
  • Tweet instance can be returned

This list is your test blueprint. Now answer a simple question for each element: "What do I want my controller to do in this situation?" and you have plan test:

  • show action should redirect to index if TwitterError is thrown and inform about error
  • show action should redirect to index and inform if tweet is not found
  • show action should show found tweet

That was easy and straightforward! And now is the best part: we use twitterReaderServiceMock to mock each of these three scenarios!

In Spock there is a good documentation about interaction with mocks. You declare what methods are called, how many times, what parameters are given and what should be returned. Remember a black box? Mock is your black box with detailed instruction, e.g.: I expect you that if receive exactly one call to readTweet with parameter '1' then you should throw me a TwitterError. Rephrase this sentence out loud and look at this:


1 * twitterReaderServiceMock.readTweet('1') >> { throw new TwitterError() }

This is a valid interaction definition on mock! It's that easy! Here is a complete test that fails for now:


import grails.test.mixin.TestFor
import spock.lang.Specification

@TestFor(TwitterController)
class TwitterControllerSpec extends Specification {
TwitterReaderService twitterReaderServiceMock = Mock(TwitterReaderService)

def setup() {
controller.twitterReaderService = twitterReaderServiceMock
}

def "show should redirect to index if TwitterError is thrown"() {
given:
controller.params.id = '1'
when:
controller.show()
then:
1 * twitterReaderServiceMock.readTweet('1') >> { throw new TwitterError() }
0 * _._
flash.message == 'There was an error on fetching your tweet'
response.redirectUrl == '/twitter/index'
}
}

| Failure: show should redirect to index if TwitterError is thrown(pl.refaktor.twitter.TwitterControllerSpec)
| pl.refaktor.twitter.TwitterError
at pl.refaktor.twitter.TwitterControllerSpec.show should redirect to index if TwitterError is thrown_closure1(TwitterControllerSpec.groovy:29)

You may notice 0 * _._ notation. It says: I don't want any other mocks or any other methods called. Fail this test if something is called! It's a good practice to ensure that there are no more interactions than you want.

Ok, now I need to implement controller logic to handle TwitterError.


class TwitterController {

def twitterReaderService

def index() {
}

def show() {
Tweet tweet

try {
tweet = twitterReaderService.readTweet(params.id)
} catch (TwitterError e) {
log.error(e)
flash.message = 'There was an error on fetching your tweet'
redirect(action: 'index')
return
}

[tweet: tweet]
}
}

My tests passes! We have two scenarios left. Rule stays the same: TwitterReaderService returns something and we test against it. So this line is the heart of each test, change only returned values after >>:


1 * twitterReaderServiceMock.readTweet('1') >> { throw new TwitterError() }

Here is a complete test for three scenarios and controller that passes it.


import grails.test.mixin.TestFor
import spock.lang.Specification

@TestFor(TwitterController)
class TwitterControllerSpec extends Specification {

TwitterReaderService twitterReaderServiceMock = Mock(TwitterReaderService)

def setup() {
controller.twitterReaderService = twitterReaderServiceMock
}

def "show should redirect to index if TwitterError is thrown"() {
given:
controller.params.id = '1'
when:
controller.show()
then:
1 * twitterReaderServiceMock.readTweet('1') >> { throw new TwitterError() }
0 * _._
flash.message == 'There was an error on fetching your tweet'
response.redirectUrl == '/twitter/index'
}

def "show should inform about not found tweet"() {
given:
controller.params.id = '1'
when:
controller.show()
then:
1 * twitterReaderServiceMock.readTweet('1') >> null
0 * _._
flash.message == 'Tweet not found'
response.redirectUrl == '/twitter/index'
}


def "show should show found tweet"() {
given:
controller.params.id = '1'
when:
controller.show()
then:
1 * twitterReaderServiceMock.readTweet('1') >> new Tweet()
0 * _._
flash.message == null
response.status == 200
}
}

class TwitterController {

def twitterReaderService

def index() {
}

def show() {
Tweet tweet

try {
tweet = twitterReaderService.readTweet(params.id)
} catch (TwitterError e) {
log.error(e)
flash.message = 'There was an error on fetching your tweet'
redirect(action: 'index')
return
}

if (tweet == null) {
flash.message = 'Tweet not found'
redirect(action: 'index')
return
}

[tweet: tweet]
}
}

The most important thing here is that we've tested controller-service interaction without logic implementation in service! That's why mock technique is so useful. It decouples your dependencies and let you focus on exactly one subject under test. Happy testing!