Create Graph using JasperReports iReport Designer

Introduction

This tutorial will guide you through the process of creating a graph using JasperReports iReport Designer. You'll use the HR Expenses Claim App, which is bundled by default in the Enterprise Edition of Joget, as the example dataset. This process requires you to have iReport Designer installed on your machine to design and generate the report.

How does it work?

The process of creating a graph using JasperReports involves several key steps:

1. Begin by designing your report in iReport Designer. Connect to Joget's database to access the necessary data. You can use the provided SQL query to extract the data from the HR Expenses Claim App.
   

   select c_username, cast(replace(c_total, '$ ', '') as Decimal(0,2)) as total from app_fd_hr_expense_claim

   

2. After designing your report, switch to the XML tab in iReport Designer to copy the report's XML definition.
3. Paste this definition into the JasperReports UI element in Joget.
4. On the second tab of the JasperReports UI element, select Default Datasource to ensure the report pulls data from Joget's current database.
   

Expected outcome

Finally, run the report within Joget's UI to see the generated graph. This step allows you to verify that the report functions correctly and displays the graph as expected.

Download related materials

• Sample App
• JasperReport design file
• KB: Sample exported PDF file from the Expenses Claim App

Related documentation

• JasperReports Menu