click-dev mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From St├ęphane NICOLAS <>
Subject A new chart api for click
Date Tue, 07 Dec 2010 02:10:44 GMT
Hello all,

I am rather new to click. I tested the framework a month or two ago and
enjoyed it.
The click framework is nevertheless missing a robust chart components suite.

So I decided to give some time on this idea and built a new API to get chart
components inside click.
There are some good javascript (mostly jquery based) charting libraries
around for the web. The API I propose, makes them easily usable into click

The idea of this new API is simple :
- provide a core api that acts as an abstraction layer above charting
- povide 2 implementations of this abstract layer. For now it supports both
flot and jqplot. Those 2 javascript libraries are free and extensible.
- provide a set of examples, in the same way as click-jquery, and click
itself do.

The jqplot implementation of the api offers all those graphs : (all of them
being able to represent multiple data set per graph)
- lines
- bars
- blocks
- pies
- bezier curves
- mekko
- OHLC / HLC / Candlesticks
- bubbles, funnel, donut, meter gauge, etc.
it also offers rotated texts, multiple axis. For those who know jqplot, the
api has all functionalities, including plugins like cursor, higlighter,
point labels and so on.

The API is basically a wrapper around javascript library, giving the java
programmer a strong advantage when using those frameworks :
- no more struggle with those horrible strings to generate a working
javascript in your html pages. The API generates all the code for you. The
generated code can easily be inspected in debug mode.
- all imports of javascript and css are made for you too, so programmers
just don't care at all about that.
- strong typing for charting and drawing options versus loosely typed
javascript variables.
- basic ready-to-use chart components with powerfull defaults (colors,
legends, shadows, tooltips, etc.). All components, even ready-to-use ones
are highly customizable.
- You still have to learn a specific javascript API if defaults are not
enough but it is much more easy to use as it appears as a set of java
objects (with javadoc and completion).

The whole code is available on google code project hosting :

The demo is available at

There is a download of click-charts-enhanced-api-core, version 0.7 available
here :
it includes jqplot and plot, the core classes, everything need to add as a
jar in a click project.

Bob Schellink helped me quite a lot to set the project, made me discover
jqplot and provided tons of good advices.
Thank you bob for all your kind answers.

I write on this list to get some feedback of the project. The project has
been a lot of work, especially to cover all classes of jqplot.
I think the project opens the way to unify quite a lot of javascript
framework from a java web application point of view. I could be extended to
other javascript (or flash ?) libraries,
and could also be ported to other java frameworks like jsf, struts, tapestry
and for sure wickets.
As there would be another good effort before starting that, I would like to
know how people are interested on the project in its early stage.

I shall say I am very bad at packaging stuff, project management cycles, but
eager to learn.

Here after, I give an excerpt of java code to build a pie chart using this
api :

To get the last pie chart is your click app, here is the java code :

pieChart = new PieChart( "lineChart4" );
//to see generated code
pieChart.setDemoMode( true );

pieChart.setLabel("Pie Chart with Legend and sliceMargin");
//easy to use shortcuts
pieChart.setSliceMargin( 8 );
pieChart.setFill( false );
pieChart.setShadow( false );
pieChart.setLineWidth( 5 );
pieChart.setDiameter( 100d );

//power of inheritance, the pie chart still is highly
pieChart.getLegend().setLocation( Compass.WEST );
//ease of data input
pieChart.add( "frogs", 3 );
pieChart.add( "buzzards", 7 );
pieChart.add( "deer", 2.5 );
pieChart.add( "turkeys", 6 );
pieChart.add( "moles", 5 );
pieChart.add( "ground hogs", 4 );


View raw message