Richfaces chart component

[lukindo]

Hello all,

I’ve been working on a JSF chart plotting component. There is a blog which introduces the component https://blog-lukasmacko.rhcloud.com/2013/04/22/the-jsf-chart-plotting-component/.

Short summary of what has been done:

• a comparison of javascript chart plotting libraries
• a prototype component implemented using jqplot  source code  demo

https://chartdemo-lukasmacko.rhcloud.com/UseMyChart-1.0-SNAPSHOT/faces/quickstart/simple.xhtmlBefore I started the component development, I had made a research of existing javascript libraries

Criteria considered:

• open source solution
• web browsers support
• user interaction and event handling
• stage of development, community support, issue tracking

Libraries

• Bluff v0.3.5.2
  GPL or MIT license, plots on canvas,github repo
  +tiny minimum external dependencies, loading data from HTML table
  -event handling support
• D3
  BSD license, outputs SVG format,github
  +powerful visualization library not only for charts
  -low level -> complex
• Canvas Express
  LGPL 3.0 canvas
  +event handling support
  - no public version control
• Flotr2
  MIT licence,canvas,github
  +
  -
• Elycharts
  MIT licence, based on jQuery and raphale
  +
  -incomplete docs
• gRaphael
  SVG, based on raphael graphics library,github
  +
  -
• jqPlot
  GPL or MIT licence, it plots on canvas, based on jquery,bitbucket
  + modular design, great event support
  -
  

I would like to continue working on development of the component during Google Summer of Code and contribute code into richfaces sandbox so I wonder

• what is your opinion of the component’s API?
• what javascript chart-plotting solution do you prefer?

[rimolive]

The components are great! I'd like only a feature in these components: a zoom tool where you can specify in a drag-and-drop command a specific snippet of the graphic.

I heard good things about D3 library.

[lfryc]

Nice Lukas, you did great job with this analysis.

The component API seems great, I especially like the a4j:repeat iteration over data model.

The even hooks might need to be polished, but I think it will be releaved as people will start to use in real use cases.

[lfryc]

As we have discussed on the community meeting, the other really good options for integration are Flotr2 (mentioned ^) or FlotCharts.

Unfortunately D3 seems to be too low-level for our purposes.

We should really focus on simplicity (simple consistent API for most common chart types) over flexibility (lot of different chart types).

[rimolive]

Lukas, I saw some examples of using Flotr2. I liked it because it has exactly what I suggested: a zoom function for the graphs.

[lukindo]

Hi Ricardo, I definitely want to support zooming function in the component. However, I found some eventhandling issues in flotr2 library so I will more likely use FlotCharts library. It allows zooming as well - simple zooming and zooming with overview.

[paul.dijou]

I've spent some time evaluating some libraries this week-end. As said during team meeting, it's productivity over genericity, so bybye awesome D3. My main challengers were jqplot, flot and flotr2. For the record, flotr was inspired by flot but using Prototype instead of jQuery, and flotr2 is a fork of flotr without any dependency at all. Both jqplot and flot use jQuery but it's fine since RichFaces is already dependent on jQuery.

The 3 libraries have a lot of features, type of charts, and nice stuff. So we should be fine with the 3 of them but, for me, flot seems the best so far. It can do all I can think of (different types of charts, ajax updating, zooming, interactivity when mouse over or click, ...).

I don't care much about the zoom feature, but since there is people looking for it, it's the best one having x-axis only zoom ( http://www.flotcharts.org/flot/examples/selection/index.html ), area zoom with overview ( http://www.flotcharts.org/flot/examples/zooming/index.html ) and scrolling zoom ( http://www.flotcharts.org/flot/examples/navigate/index.html ). Just awesome.

Flotr2 seems to have a bit more of chart types (like the "radar" one), but maybe a bit less general features and Lukas says there is some event issues (well, maybe there is also on flot, I didn't test it that much). jqplot is working just fine but seems to have less features compared to flot. I also like the plugin approach of flot for enhancing charts by adding plugins. The flot project seems pretty active since the last commit is only 7 days old, there is more than 2.000 stars on it on mor than 500 forks, quite good IMO.

I also take a look at the mailing-list of the 3 projects. All of them are not that intense, but both jqplot and flot are quite better than flotr2. Numbers:

- flot: 1655 subjects, last one from yersterday

- jqplot: 1745 subjects, last one from two days ago

- flotr2: 130 subjects, last one from nearly one week ago

So my opinion in one word: flot.

Regards.

[bleathem]

Awesome Paul, thata's a great analysis.  Thanks for sharing that with us - flot indeed souonds like a good choice.

I'm a little concerned with how we've excluded d3 from the shortlist though.  While our goal is to focus on productivity and simplicity, that focus is for the User API, ie. the facelet tag.  We are completely open whaat we use on the back-end, and in fact do not want to be overly limited in what we can provide by our choice of client library.

Flot sounds like is has the basics covered + allows for extensibility via a plugin approach.  So it indeed seems like a good choice.

• Flot Basics Charts
  • http://www.flotcharts.org/flot/examples/
• Flot plugins
  • http://www.flotcharts.org/plugins/

d3 also has basic charts covered, and is also extendable via a plugin mechanism

• d3 basic charts
  • https://github.com/mbostock/d3/wiki/Gallery#basic-charts
• d3 plugins
  • https://github.com/d3/d3-plugins

Given this re-think on the simplicity argument of the javascript library, does d3 offer any/enough advantages over the simpler flot?

[kborchers]

I am no charting library expert but flot and jqplot both look nice. I'll be honest and say I don't know a lot about nor do I use RichFaces but one concern I would have is the weight you are bringing in just to have a chart widget. Is this something users can exclude so that they don't have to pull down a charting lib if they don't need it?

Also, I am not sure of your browser support targets but D3 out of the box only supports IE9+ so if you support IE8 or lower you have to add more weight with some compatibility libraries.

Just my 2 cents.

[bleathem]

Thanks Kris,

Yes, the JSF resource serving service only includes a resource (js/css/image) in the page when a component that actually use the resource is present.

Browser compatability is definitly a consideration, and we want to make sure it's aligned with our targets for RichFaces 5.  If we adopt jQuery 2.0 for instance, then the d3 requirements aren't out of line.

[paul.dijou]

In my mind "productivity and simplicity" was also for the RichFaces developer, not only for the final user to be honnest. I totally agree that all JSF RF charts should have a simple API for final users so they can display charts as easily as possible. But that would be possible only if there are actually chart components.

Going with D3 would require a lot more work than going with Flot in my opinion. There is no official line or pie chart in D3 AFAIK, so you would have either to copy/paste a nice sample (which would still only be a sample) or do it yourself nearly from scratch. I do think that D3 allows you much much more features and possibilites, but before going with it, you need to be sure you will at least be able to create the basic charts (line, pie, rectangle, ...) with all the basic tooling (labels, tooltips, zooming, selection, events, ...). It's a bit like thinking about Backbone versus AngularJS, low-level library versus nearly framework :-)

So the question is: does the RichFaces guys (and Lukas Macko) are ready to spend such efforts in D3 or not? To be honnest, even if I think that charting is a big missing feature in RichFaces, I would rather spend some time on more important components rather than doing a D3 charting library so I can then bridge it to JSF.

[paul.dijou]

Here is a new project based on D3. Really early stage but also really good concepts: http://misoproject.com/d3-chart/ . It's more a foundation and coding concepts than charts but it can't be bad to take a look at it.

[lukindo]

I've tried to re-evalute javascript libraries jqPlot, flotchart and nvd3. I chose some features, listed below, and I tried to implement them using the mentioned libraries.

line chart - multiple series, x-axis date format, point symbols,zooming

bar chart - number, date and string x-axis format, multiple bars,zooming

pie chart,  mouseover and click event handling for each chart type

jqplot -  The library has easy to use event handling system. All mentioned use cases works ok except bar chart with a date format. A disadvantage of this library is the fact that it is already used by PF.

flotchart - All features can be done using by the flotcharts.

nvd3 - Library is based on D3. Considering design it is the best library among compared solutions, imho. However, there is no documentation only a few source code examples. Moreover, I was not able to make event handlers working. I looked into sources and forums, it seems that there should be a way how to handle it. 

I'll give it one more try. :-) If the nvd3 events will work, we may think about nvd3 also.

Otherwise, I think the best solution is to use flot(charts) as Paul suggested in the post above.

I've posted results of evaluation my blog also. The roadmap for GSoC project can be found there.

[lfryc]

Very nice, Lukas.

+1 to re-evaluation how event model works in NVD3

[nick.graves]

Hi all.

jQWidegts has a nice chart library.  http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxchart/index.htm?(web)

Nick