JSF & Highcharts (Javascript Chart Library)

Posted on August 30, 2012

Since a while, I've been interested and looking out for technologies related to web-based visualization techniques/tools/frameworks/libraries...not the image rendering techniques, but the dynamic and interactive ones. Lately, I've been researching into Javascript Chart Libraries, as I was planning to work on some pet projects and also implement it in one of my work projects. After the resurrection of AJAX techniques and with all the Javascript frameworks that are available, we have a good number of options to generate dynamic and interactive charts/graphs. Among all the libraries, I found Highcharts to be the best and the most suitable charting library for my projects. Also, I took a special interest in Highcharts after seeing the way it's implemented on Stackoverflow.com's User Reputation Graph page.

To understand how it works, I worked on a sample project which displays JVM's Heap memory usage, in a chart generated by Highcharts Javascript framework. Below are the technical details of this demo project:

Technology Stack: Java, JSF, Facelets, Maven, Richfaces, Gson, Highcharts

This web application 'polls' the server every 5 seconds (This configuration can be changed) and asks for heap memory usage statistics, gets back the data in JSON format, which is then used by the Highcharts, to generate and display the chart. Google's Gson framework is used to convert Java objects into JSON format.

Below is the Sample Javascript code for Highcharts, for generating the chart:

Here are other jsFiddle links for this script:

1) jsFiddle Link
2) jsFiddle - Result

Below is the code for XHTML file, which is the home page for this application, where the chart is displayed:

Below is the code for Series.java class, which holds the 'series' data for Highcharts' chart data:

Below is the code for ChartController.java. This contains the server side running code, which is polled from the client side, to get JVM's heap memory usage statistics:

As you see in the above code, the heap memory usage is calculated and stored in Series objects, which is then deserialized into JSON format, for further use by Highcharts framework on the client side. Also, note that apart from 'Series' data, 'categories' data used on the X-Axis of chart, is also dynamically provided, by calculating time data (HH:MM:SS format) and converting it into JSON format.

All source code for this project is available in my Github Repository: richCharts Github Repo (Feel free to clone or fork it).

Below is a video, which shows the demo project in action (JVM's Heap Memory Usage):

Blog Categories
The views expressed on this blog are my personal views and do not reflect the views of my employer or campaigns I am supporting.

All sample code is provided for illustrative purposes only. These examples have not been thoroughly tested under all conditions. The writer therefore, cannot guarantee or imply reliability, serviceability, or function of these programs.

All programs contained herein are provided to you "AS IS" without any warranties of any kind. The implied warranties of non-infringement, merchantability and fitness for a particular purpose are expressly disclaimed.