How to create interactive web charts

Posted on June 27, 2013 by Paolo Predonzani

Charts are a common requirement in many web applications. If you have a CRUD on a table, sooner or later you'll be asked to develop some charting or reporting on it. In the creation of charts I believe two things are important: interactiviy and productivity.

In this video I use the example from a previous tutorial, where I created a CRUD on the m_product table using Portofino 4. The products (the records of the table) are already classified by product category. Here I want to develop a pie chart that shows the number of products in each category. Moreover I want each 'slice' of the chart to be clickable and to interactively control the filtering in the CRUD view.

The charting engine used by Portofino 4 is JfreeChart.

A few highlights from the video

In square brackets is the minute/second which I refer to:

[0:35] I set up an empty chart with the placeholder query "select 1, 1"

[1:32] I position the chart inside the CRUD page

[2:03] In SQuirreL, I create the first version of the query

[3:28] I decode the foreign key in more meaningful lables

[5:15] I make the chart interactive through a URL containing an OGNL expression