New JSF Chart Library (JSFlot)

[joachimhb]

Hello,

Interactive Charts for JSF that does not rely on Flash seems to be something of a rarity for some reason. This is a feature requested a number of times. Looking at the Flotr JavaScript library, I have made a JSF implementation of Flotr calle JSFlot. This library, still in early realease, is available at Google Code (http://code.google.com/p/jsflot/), and a live demo is available at http://jsflotdemo.haagen.name/index.jsf, and supports Line, Area, Bar and Pie charts. Candlesticks and clustered bar charts is on the very near roadmap as well.

JSFlot works very well with RichFaces, as the Live demo shows.

[ilya_shaikovsky]

looks pretty good.. but seems controls in tabpanels has almost no influence on chart currently..

[jbalunas]

Hi Joachimhb,

You are right there is certainly a gap in easy to use charting options for JSF.

This looks cool, I can't wait to look at it closer!! What are your plans for the project?

-Jay

[knrrjohle]

i found something else too...

http://www.rehberharitam.com/prime-showcase/ui/pieChart.jsf

looks good to me and they say they are 100% compatible to richfaces :)

[joachimhb]

Hi Joachimhb,

You are right there is certainly a gap in easy to use charting options for JSF.

This looks cool, I can't wait to look at it closer!! What are your plans for the project?

-Jay

The current plan for the project is to make it compatible with the most common JSF setups. Currently there have been limited testing with different libraries. I also plan on including a few more chart types, such as candlesticks and stacked bar charts.

Depending on the feedback support for double axis (two x and y axis'), a crosshair and a more intelligent time mode is also in early stages of being planned.

[joachimhb]

"knrrjohle" wrote:
i found something else too...

http://www.rehberharitam.com/prime-showcase/ui/pieChart.jsf

looks good to me and they say they are 100% compatible to richfaces :)

I have seen Prime Faces before, and it looks like very good alternative. ICE Faces also have charts. The difference between them however, is that Prime Faces Charts are Flash Based, ICE Faces use a library that builds a JPG/PNG image that the server supplied. JSFlot, however uses the JavaScript and the WebKit Canvas tag to draw the chart. Means that more processing is moved from the server and onto the client (which will be beneficial in many environments).

[jbalunas]

"joachimhb" wrote:

I have seen Prime Faces before, and it looks like very good alternative. ICE Faces also have charts. The difference between them however, is that Prime Faces Charts are Flash Based, ICE Faces use a library that builds a JPG/PNG image that the server supplied. JSFlot, however uses the JavaScript and the WebKit Canvas tag to draw the chart. Means that more processing is moved from the server and onto the client (which will be beneficial in many environments).

I think these are really good points, and I think the javascript approach is good. In large high volume sites server-side image/chart creation can be a bottleneck. Obviously there are still risks with client-side - like flooding the client with data for the charts, but if managed well I think this could be a very per-formant approach.

[nimo22]

for inspiration:
http://www.fusioncharts.com/free/Comparison.asp?gMenuItemId=6

however, it s flash-based.

[joachimhb]

I think these are really good points, and I think the javascript approach is good. In large high volume sites server-side image/chart creation can be a bottleneck. Obviously there are still risks with client-side - like flooding the client with data for the charts, but if managed well I think this could be a very per-formant approach.

There are definitely advantages and disadvantages for every technology. If the charts are kept with a sensible number of data points, the number of bytes transferred from the server to the client is also very small, which can be a big bonus for bandwidth costs. However, if there are a large amount of data points (say viewing 30 days of data with 15 second resolution), the number of bytes will actually exceed the number of bytes in a similar JPG or GIF transferred from the server (from JFreeChart for example).

For most uses though, users like have a sensible number of data points to be able to comprehend the graph anyways.

[joachimhb]

"nimo22" wrote:
for inspiration:
http://www.fusioncharts.com/free/Comparison.asp?gMenuItemId=6

however, it s flash-based.

Fusioncharts sure do have some nice features, some of which might be difficult to implement in a JavaScript library. I sure would like to be able to support such a wide range of options with JSFlot, but as I am working on JSFlot in my spare time after family and work, supporting such a large feature set might be impossible with just one developer.

Currently I am using Flotr directly (code.google.com/p/flotr), however I have toyed with the idea of extending the JS libraries in Flotr for JSFlot. Of course, these could be committed directly to the Flotr source code as well. Time will show though. Development of Flotr seems to be moving along nicely as well.

[joachimhb]

Version 0.1.5 is now available with support for Clustered Bar Charts, A Crosshair, a much more attractive look for the text, along with rotated text for the X and Y labels and titles.

[hwoarang]

"nimo22" wrote:
[...]however, it s flash-based.

Guys, to clarify me (I dont want to create any pointless discussion):

What's wrong with flash-based charts?
I'm evaluating Exadel Fiji and OpenFlashChart, but starting to test JSFlot, so I can move to JSFlot without problems.
So, from the technical pov, which advantage and disadvantage to use flash-based ?

Thank you.

Hwoarang

[joachimhb]

There are advantages and disadvantages to both approaches. Below is some points from the top of my head. There might be more, and you might disagree though...

Flash advantages:
* All browsers that have the flash plugin installed (assuming the right version is used) will render the chart the exact same way
* Flash charts may have a more appealing look and feel
Flash disadvantages:
* In my experience there is usually quite a lot of data that has to be moved between the server and the client (especially on the charts' first rendering)
* Your users need to install a compatible version of the Flash plugin
* Flash is proprietary to Adobe

JSFlot advantages:
* Supports the technology found in most modern browsers (uses standard JavaScript APIs), so no extra installation is not required
* For sensible charts (charts without heaps of data points) there is usually little data to transfer from the server to the client
* No graphics are transferred from the server to the client, which means that less data is sent along the network

JSFlot disadvantages:
* If the user does not have a modern enough browser, the whole browser needs to be upgraded (not only a plugin, like with the flash version)
* Some users have JavaScript disabled (I am, however assuming that these users dont have the Flash plugin installed either, though)
* While Exadel Fiji currently are more complete, JSFlot is in early development at the moment. JSFlot is 100% free however, which Fiji are most definately not. I haven't looked at OpenFlashCharts, but the name suggests Open Source, so it might be free as well though.

Also, I like the JavaScript way of doing this. Mainly because I have never really liked Flash that much.

I am working on including some Ajax events in JSFlot though, which will increase the feature set dramatically and bring it closer to libraries like Fiji.

"Hwoarang" wrote:

"nimo22" wrote:
[...]however, it s flash-based.

Guys, to clarify me (I dont want to create any pointless discussion):

What's wrong with flash-based charts?
I'm evaluating Exadel Fiji and OpenFlashChart, but starting to test JSFlot, so I can move to JSFlot without problems.
So, from the technical pov, which advantage and disadvantage to use flash-based ?

Thank you.

Hwoarang

[hwoarang]

Hi joachimhb!
Thank you for the explanation.
As I said, I'm testing JSFlot too and I'm very impressed and thinking to move to it. Congratulations!
Hwoarang

[nimo22]

hello,

joachimhb, your progress with JSFlot is amazing and I like it very much.

Coupling ajax-server-side-action-methods to the plots is easy - I guess hanging rich:a4j:support would be enough.

Besides, would be nice, to have some nice effects in your plots such as the flash-based plots.

And one of the missing points of common jsf-charts (such as jfreechart) is:
to hang tool-tips to data-points or ajax-actions coupling to data-points.

By the way, even thought, I use JSF and RichFaces (->Java-script), I know, Flex or the newbie "JAVA-FX" will be definitely the future for creating RIA's and have much more powerful potential than javascript.