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