[Java EE] JSF visualization library VisualFaces

I am currently writing my master thesis on Big Data Visualization. To achive stunning visuals I decided to use d3.js which is a (nearly) perfect library to display data in an innovative and fancy way. To be able to use those diagrams easily with Java EE’s JSF 2 technology, I decided to write a tag library (which basically is a component collection) called VisualFaces to use the most impressive example diagrams with just one tag.

So instead of writing hundreds of lines of Javascript code you simply add a

<j:wordcloud width="600" height="600" input="Some, test, words" />

to your xhtml page and you’ll get a wonderfull wordcloud as it can be seen below (The words differ to the example above).WordCloud

To use the taglib simply put the visualfaces.jar in the WEB-INF directory of your Java EE webWordCloud project, add the namespace xmlns:j=”http://www.jofre.de/visualfaces” and then all included diagrams can be used in an instant. I’ve implemented so far:

I will be adding some more diagrams into the library soon. At the moment I am struggling with putting several diagrams on one site because some Javascript events like mouseoever and properties get overwritten.

The project can be downloaded from Github. To compile it, simply export it as JAR from Eclipse. Below you find a precompiled beta version.

31 thoughts on “[Java EE] JSF visualization library VisualFaces”

        1. I didn’t check compatibility yet, but I guess it will since the components are basically only output “compiled” JavaScript code.

  1. Hi Jonas, ich benötige für mein Projekt ein einfaches Line Chart. Wird das auch enthalten sein, wenn Du veröffentlichst? Kannst Du schon einen konkreten Termin nennen? Beste Grüße, Frank.

    1. Hi Frank,
      Line-Charts habe ich bisher nicht in der TagLib. Wenn du dich allerdings ein bisschen mit Java und JavaScript auskennst, kannst du das Diagramm selber bauen, den Quelltext werde ich mit auf Github hochladen. Ich denke, dass ich mich ziemlich bald drum kümmern werde. Viele Grüße, Jonas

  2. Hey I have the following questions, it would be great if you could provide clarification on these.
    1. Can i use Visualfaces for JSF 1.2 or does it work only with JSF 2.0?
    2. I am planning to implement a dashboard, how do i pass data from my datasource to the JSF component
    3. On my dashboard, I may have 2 graphs. If I click on on graph, I need re-render the second graph, is this possible?

    1. Hi Mahesh,
      I think it is not possible to use VisualFaces with JSF 1.2 since I use libs from JSF 2 to compile it. Passing data is pretty easy, I developed some predefined objects that you pass to the diagrams and that’s it. Events like onClick are not implemented, sorry.

  3. Hey, I have one more question. I see charts for big visualization in place. But the basic ones are you planning to introduce them anytime soon.
    I am looking for
    1. Line Chart
    2. Bar Chart
    3. Stacked Bar Chart
    4. Pie Chart
    5. A Gauge meter

    1. Hi Mahesh,
      thanks for your interest in VisualFaces. Since you are the second one asking for some basic charts I’ll implement them. But at the moment I have not so much time. Check my blog in the next weeks, you’ll see when I post them.

  4. Hi,
    Any updates on the following charts. If not all, will few of them be available shortly ( a week or so)?
    1. Line Chart
    2. Bar Chart
    3. Stacked Bar Chart
    4. Pie Chart
    5. A Gauge meter

  5. Hi Mahes, unfortunately not. But feel free to create a branch to the project on github and implement them yourself. It is not very difficult.

  6. Hi,

    I tried using the library in my JSF-2 project. No charts were generated when I used wordcloud example. The page was blank. No errors were displayed on the console.
    Also, when I try to put the namespace url in the browser, it gives me 404 page not found.
    Can you please help ?

    1. Hi Parth, the namespace url is only an identifier and no real URL. Have a look at your web debug console and search for any javascript errors. If you found one please tell me about it so I can have a look into it.

  7. Hello to run the project gave the following errors below

    Mar 08, 2014 3:36:41 PM com.sun.faces.application.resource.ResourceHandlerImpl logMissingResource
    Warning: JSF1064: Unable to find or provide the feature, wordcloud.xhtml, the library, visualfaces.
    Mar 08, 2014 3:36:41 PM com.sun.faces.application.resource.ResourceHandlerImpl logMissingResource
    Warning: JSF1064: Unable to find or provide the feature, wordcloud.xhtml, the library, visualfaces.
    Mar 08, 2014 3:36:41 PM de.jofre.visual.diagrams.WordCloud encodeBegin
    Info: Creating wordcloud from ‘test, test, test, test.’ Size: 600×600
    Mar 08, 2014 3:36:41 PM com.sun.faces.application.resource.ResourceHandlerImpl logMissingResource
    Warning: JSF1064: Unable to find or provide resource .. / js/d3.v3.min.js.
    Mar 08, 2014 3:36:41 PM com.sun.faces.application.resource.ResourceHandlerImpl logMissingResource
    Warning: JSF1064: Unable to find or provide resource .. / js/d3.js.layout.clouds.js.

  8. This is awesome! Congratulations, hope you continue to develop on it. The fact is that d3.js development is a major pain the ass(and I don’t consider myself a total noob on Javascript) although it’s obviously the best library, to really make datavis accessible for people that are not Mike Bostock and other PHDs we need components (and maybe a framework)

    I’ll follow the repository, hopefully I’ll be able to give a look on the code to see if I could contribute..

    1. Hi Breno, that would be great! I planned to spend some time on the library in the following weeks but to work on such a framework all alone is not as much fun as seeing other people contribute, too.

  9. Hi,
    I new to JSF 2.0 and D3.js, I just settting up a new project. Can I use Glassfish 4 and JSF 2.2 and uses your tag lib?
    i read on some forums that Primefaces having some issues as there seems to be some changes to the ViewState?

    Can advise, what should be the libraries i should be using?

    Thanks
    Zuffi

    1. Hi,

      I’m facing same problem as João Rafael .
      Below is my hiereachery:

      Ear
      -LIB > Primefaces-5.0 and VisualFaces.jar

      -Main
      > etc etc etc

      -web
      >WebContent
      >js
      –> d3.v3.min.js
      –> d3.js.layout.clouds,js
      >pages
      index.xhtml (this uses the wordcloud tag)

      Any advise where i go wrong?
      Thanks

      1. Hi,

        After i restarted the whole project, using EAR 6,0,
        jsf 2.0. Dynamic web module 2.5, and placing the lib into the
        web-inf/lib, i’m not getting the message.
        However, my wordcloud is not showing?

        If i’m using EAR 7.0, jsf 2.2, dynamic web module 3.1, even if i placed the VisualFacecs into the web-inf/lib, i will still get the warning it cant find resources.

        Thanks

        1. Hi, please make sure that the lib is in your build path and is as well exported during deploy. For me it works perfectly with a GlassFish.

  10. i have always the same problem
    /js/d3.js.layout.clouds.js.xhtml Not Found in ExternalContext as a Resource
    /js/d3.v3.min.js.xhtml Not Found in ExternalContext as a Resource

  11. Hello,
    VisualFaces Library filters the unwanted words; there’s a predefined list of (english) stop words that can applied.

    Best regards,

    1. Hi Sam,
      thanks for you interest in VisualFaces. Due to my limited time I cannot tell when which features will be implemented in VisualFaces. Feel free to fork the project on GitHub.

Leave a Reply

Your email address will not be published. Required fields are marked *