Tuesday, 22 April 2014

Drill down functionality example on HTML-5 charts in jasper iReport

Hi Guys,

Here is a work out on drill down functionality using HTML-5 charts in iReport/Jasper Studio.

Example :
iReport 5.5 jasper server 5.5 and foodmart database.
Report 1 : Pie Chart
 Report 2 : Table component 

On pie chart you'll be showing the top 10 total sales values city wise
On click on a slice(a particular city) you will be navigating to the drill down report which will display the customer details per that city.

In simple, On clicking on city slice, the report has to pass city value from main report to drill down report in next page.

Source Code of this example : Click Here : Just Import to the server and see the report preview and check out the functionality using iReport tool by opening jrxml files.

Core part of the example :
Right click on Pie chart -> Data Axes -> Advanced Properties -> Click on Add (Optional: By clicking on Hyperlink you will get 2 default parameters - Don't for this for the 1st time , once you get familiar with drill downs you can make use of it).

As shown in below figure you need to set the HyperlinkType and HyperlinkTarget with the drill down report URL using _report parameter. The other parameter is city  which will have to pass the value of city field when you click on the slice.


 Hyperlink Type:

Drill down report URL

Passing field value from city parameter 

Before writing this expression you need to Define City Bucket at Data Axes Categories section.
below picture gives an idea.

Out put :
See the preview, you will get the out put 1st two images in this post

Suggesting you to download and look at the JRXML's for better understanding of drill downs on HTML-5 Charts.

Reference :


  1. Hi,
    Thanks for the post.
    i would say this as drill through report.
    my understanding of drill down report is on click of any slice in pie chart the detail report should be shown in same page along with master in a frame (right or left or down) or as a pop up.

    please correct my understanding.

    let me know on how to achieve the above said scenario like i want to see the detail report as a pop up or in same page.

  2. Nice blog Very useful information is providing by ur blog. Great beginning html tutorials Very clear and helpful for beginners.