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.
's User Reputation Graph page.
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.
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):