Creating Multi-Axis Charts in iReport Tutorial

Have Sales Contact Me
Test Drive Jaspersoft Now

Charting data that have widely differing values can be difficult using a single data axis. By using two or more axes, the data can be more easily understood. iReport includes built-in support for multi-axis charts through the use of the JFreeChart package.

Product Versions

iReport Professional 3.5.0 was used to create this tutorial.nIt should work identically in later versions of iReport Professional and iReport Community Edition. The concepts apply to older versions of iReport, but the user interface differs.

User

Report Developer

Objectives

This guide will enable you to:

Pre-Requisites

Familiarity with iReport is helpful.

 

Creating a New Report

To create a new report, set these report properties:

  •  Dimensions 400 x 200 pixels
  • Title band takes up the entire 200 pixels. All other bands are zero pixels.
  • Report language: Groovy

A new empty report with sample SQL query to get started is available here.

Note: The SQL query in the sample report returns some hard-coded sample data; it does not refer to any tables in the database. This way it can be used with any valid SQL datasource. It has been tested with MySQL and PostgreSQL, but it should also work with most other database technologies.

Return to top

 

Creating a Simple Line Chart

Follow these steps to create a simple line chart.

Step Action
1 Drag the Chart tool into the report.
2
  1. Select the Line chart style
  2. Resize the chart to cover the full area
3 Right-click the chart and select Chart Data
4 Add 3 Series: Sales, Issues, and Bugs
5 The definition of each series should follow this model:
6

In preview mode the report now looks like this:

Note: Line charts do have limitations:

  • While the line chart looks reasonably good for the sales numbers, the issues are harder to read.
  • The bug count is too small to read at all.

The problem is that the number of bugs filed is roughly 1000 times smaller. This discrepancy in scale makes the chart less useful.

Return to top

 

Creating a Multi-Axis Chart

Follow these steps to create a multi-axis chart.

Step Action
1

To avoid having to re-type the series information, open the Chart Data dialog again and copy all three series

2
  1. Delete the Line chart
  2. Drag the Chart tool into the report again
  3. Select the Multi Axis chart type
3
  1. You are immediately prompted to choose a chart for the primary axis
  2. Choose Line chart

4 In the Report Inspector panel find the Multi Axis chart and set the Chart Data for the child Line Chart
5 On the Details tab paste in the series that were previously copied
6 If you run the report now it should look exactly as before
7

Remove the Issues and Bugs series

  •  Copy them first so you don't need to retype in the next step

8
  1. Right-click the Multi Axis chart and choose Add Axis chart
  2. Choose another Line chart
9
  1. Paste the Issues and Bugs series into this new line chart
  2.  Previewing the report now shows the sales axis on the left with the issues and bugs axis on the right.
    • The fact that new issues are increasing more quickly than new sales is now readily apparent.

Return to top

 

Combining a Bar Chart with a Line Chart

The use of two different axes makes it easier to see the trends. However, the lines have a tendency to overlap since both charts will rise to the same height. Combining a bar chart with a line chart is a good solution to this issue.

Step Action
1 Edit the chart data in the first line chart. Copy the Sales series
2 Delete the first line chart
3 Right-click the Multi Axis chart and add a new Bar chart
4 Edit the bar chart data and paste the series
5 The combined use of bar and line charts makes the data easier to understand quickly

Return to top

What's Next?

These sample charts may be improved in many ways:

  • The axes should be labeled more clearly
  • A chart title makes it easier for a viewer to understand it quickly

The report can now be deployed to JasperServer for use in a dashboard or to be scheduled for regular delivery.

Written By

This tutorial was written by Matthew Dahlman, Engineer, June 2009