I’ve actually no experience using the flot library for jQuery. However, I took a quick look at the project and noticed that it uses the Canvas element too. If I link you to here in the source (http://code.google.com/p/flot/source/browse/trunk/jquery.flot.js#741) you can see where flot gets the Canvas element from.

If you imagine this “Canvas” object as an interface, rather than a specific implementation. The interface defines such methods as drawText, clearRect etc. The actual implementation of these methods is hidden to you, by the browser. To generate the graphic on the server, you’d simply need to change the implementation of the interface to draw to the Graphics2D object in Java. Because we know it’s an interface, we can simply implement the methods we need (so clearRect, drawText) in Java, and expose them to the context object. The only change that you’d have to make to the flot library is where the ‘ctx’ variable is initialized from (this is explained in the blog post, where I expose the ‘adapter’ global variable which has access to the Java canvas implementation). So rather than having

var ctx = canvas.getContext("2d");

as we do now, we’d replace that line with something like:

var ctx;
if(requiresServerRendering()) {
  ctx = adapter; // adapter is put on the global scope by Rhino
} else {
  ctx = canvas.getContext("2d");
}

When any calls are made on ctx, they’re “redirected” to the server, which draws to a Java graphics object. You’d then expose another method to the global scope such as getImage() which returns the generated image of the Chart.

However, provided you don’t have an external commitment to use the flot library, I’d suggest taking a look at Closure Charts here: http://code.google.com/p/closure-charts/

We handle a lot of browser-specific issues that may come up with using a Canvas-dependent solution such as flot (for example, Closure Charts will work in all modern browsers — mobile included — without any change required by the user). It may be worth your while taking a quick look at the source.

Steven

Excellent post. Is there any way that you can share this code with me. I’m facing a problema that could be solved with this kind of solution. I’m using jquery flot library for charts, and I’m having trouble to export the chart images. I would like to know if with this approach I would be able to plot in the server and generate chart images.

Appreciate your help,

Regards,

GV.