Remember the Proof of Concept from my last post? Well, the latest request to complete this PoC was to create a chart that plotted all the human tasks from the Accounts Payable process. The customer wanted a ‘clickable’ chart that enabled a business user to know at a glance the state of the invoices being processed, in other words, how many invoices are stopped in each stage, waiting for someone to click Next (or Reject, Return, Back)

The first solution I considered was Instant Charts, a tag library that produces charts by using the JFreeChart library. However, this would produce a static, hardly clickable image, and where’s the fun in that?

The second alternative was to improvise a graphic with some HTML + CSS magic, but this seemed a bit primitive for my taste.

Having just bought the Nike+iPod kit, I was inspired by the beautiful charts provided by Nike and decided this is what I wanted. Nike’s site uses Flash extensively, and even though I’ve worked with Flash a bit, I’m certainly not a fan. That’s when I remembered the open source alternative created by Adobe (which ironically now also owns Flash), Scalable Vector Graphics, or SVG. Since it’s built around XML, Javascript, DOM and CSS I thought that it would be easy to create a nice looking vector graphic with it. Turns out I was right :).

My first approach was to create some graphics with Illustrator and export them to SVG, this would help me produce results faster. It didn’t. If you’re planning on working with the generated XML, you might as well steer away from Illustrator and look for some SVG online reference. Illustrator does produce valid SVG, but it uses properties in the XML that are not easily interpreted. For example, text is not positioned with X, Y coordinates, instead you’ll find a transform matrix used to calculate the position, which isn’t really intuitive. After a bit of work based on several SVG reference sites, I achieved the desired effect for each bar, a rounded rectangle with a gradient an a cool reflection (sort of). I then created a JSP that would dynamically generate the SVG, creating a bar for each kind of task and the chart was ready. Almost.

The chart was looking good, but not as good as those from Nike. It was missing some interactivity. Hovering over Nike’s “Runs” chart displays a tooltip where you can see details of each run. That’s exactly what my chart needed. After a bit more research, I discovered that all interactivity in SVG could be programmed using Javascript. Elements in the XML are accessed using the DOM, so after some more work I had an interactive version. I had some issues getting it to work with Firefox’s SVG engine (some methods were not being recognized), but I managed to fix everything except for the filters, which are not supported by Firefox.

Here’s the final result:

This is where the chart is supposed to appear. Try the alternatives below if you’re reading this.

If you’re having trouble seeing the chart, you might need Adobe’s SVG plugin, which you can get here. If you’re not in the mood of installing the plugin, you might just watch a screenshot of the final version, here (minus the interactive part).

Feel free to look at the code if you need something similar (select Save Link As or Alt-click).

There’s an additional feature that complements the cool chart, a drill down capability. Clicking on the chart produces a list of all the tasks in a particular stage of the process. I used an AJAX request to retrieve this list and enhance the user experience. Clicking on a particular task displays the current information for a specific process instance, including a list of the activities that have been executed so far and all the data from the current task. This only works on the actual application, not on this demo.

P.S. The PoC runs on WebSphere Process Server, for those of you who were wondering.