Saturday, March 12, 2011

Implementing interaction between jQplot and java servlets

Today I'm going to share my experiences developing a way to let users plot graphs of certain interesting data.


Way back when, we originally were going with the Google chart API to accomplish this. It's simple and it looks good. However, we decided instead to take a jQuery approach (for learning and to avoid making a call to a second server) with jqPlot. jqPlot is a free graphing library which generates the graph on the client side and accepts data in a convenient format.

After playing around with it, we were able to develop a nice implementation:

Now aside from a few things that need to be worked out (such as fractional years), it looks good and was very simple to implement. Our approach to this using java servlets was:
  • Client sends an AJAX graph query to the GraphsController class with a parameter ("getgraph") set to true to signify a graph request
  • Servlet gets request, builds a GraphRequestBean and validates it. If validation fails the server sends back an error object using the JSON library for Java called google-gson
  • Servlet sends request to a GraphsManager, which generates the Graph by interacting with the data layer. 
  • Graph is sent as a JSON object and is read by the javascript, where a call to the plotting library is made. 
  • User gets nice looking graph
 We also added some error handling and the ability for users to regenerate the graph through a link. I'm pretty excited about this implementation (and jQuery in general...) because it worked very well. And also I have even more respect for unit tests because they saved a lot of time debugging, since I was constantly changing code around while developing.

2 comments:

  1. Chris, thanks for sharing. Can you provide any more detail, or even code for the interesting bits?

    I've just implemented a rough working setup just like this (without the user inputs) using Jackson for Java->JSON, but I found that I needed to do a lot of work to prepare the data so the JSON ended up just right for the client side (jqplot) to consume. And then, any interactions from the user require going back to the server. I'd rather do this translation and filtering on the client side where it makes sense (for performance).

    Thoughts on this?

    ReplyDelete
  2. Hi Randy,

    I agree that it's work to prepare the data for jqPlot. We decided to do this work on the server to keep the client ignorant of the data structure used to store the graph server-side. Of course we also have a small user base so we don't have the same issues.

    On the server-side we have an object called a GraphBean which stores the x/y data as two ArrayLists for each axis, and also ArrayLists of tick mark data for non-numerical axes.

    When we send the data to the client, we convert and send the important parts of the GraphBean (the data and the tick marks) as 2D object arrays: one for the x/y data and one for each tick array. So the JSON we send has the structure: [ "data":[ [x,y], [x,y] ], "xticks":[...], "yticks":[...]"].

    Caveat: The user has limited interaction with the graph other than zooming and highlighting (both handled by the jqPlot plugins) so I have limited experience handling client -> server interactions other than generating new graphs from the user's parameters.

    If there's anything specific you still wanted to see I'd be glad to share.

    ReplyDelete