iReport and JasperServer: Creating Chart Themes and Styles Tutorial

Introduction

Chart Themes and Styles can be used to control the styles of chart, text element and graphical element.  Themes and Styles can be created once and then later referenced by any other reports.  This allows a consistent look and feel in all reports.

Product Versions

This tutorial works with iReport 3.5 and later and JasperServer 3.5 and later.

User

Developer

Objectives

This guide will enable you to:

 

Creating and Using Chart Themes

Follow these steps to create and use Chart Themes.
 

Step Action
1 From the File Menu, select New… > Chart Theme

2

Specify the location to store the new file and the base theme name.

Note:  An extension .jrctx will be added to the base theme name by iReport.

 

3

Click Finish.

Result: Chart Theme Designer opens automatically.

 

4

From the Template Inspector window, click the section (Chart, Title, Subtitle, Legend, Plot, Domain Axis etc.) you want to configure and then go to the Properties window to set properties. 
 


The main view displays the real time preview of the new theme for each chart type. Click Area Chart to access the drop down menu.
You may choose other chart types to preview the chart theme.
 

5

Click the Export to Jar… icon on the toolbar to export the chart theme to a jar file.
 

Result: The new chart theme jar has been created and has been added to Classpath of iReport.
 

 

6

Add a chart to your report.  Go to the chart Properties window. The new chart theme should appear in the available theme drop down list.
 

Result:  The new chart theme is applied to the chart.

Note:  In iReport 3.6, after the chart theme is applied, the chart design view reflects the new chart theme.

 

 

7 If you are using iReport 3.5, the chart display image disappears, but the chart and chart theme still work as expected.
 

 

Return to top

 

Creating and Using Styles

Follow these steps to create and use styles.

Step Action
1 From the File Menu, select New… > Style.
2

Specify the location to store the new file and the base style name

Note:  An extension .jrtx will be added to the base style name by iReport.

 

3

Click Finish.

Result:  Style Designer automatically opens.

 

4

From the Template Inspector window, click New Style.  In the Properties window, click the Default Style checkbox and set other properties for the style.

 

5 Click the Save icon on the Toolbar to save the style.
 
6
  • Open your report
  • From Report Inspector, right click Styles and select Add > Style reference
  • Browse and locate the style you just created and click Open

Result: The new style is applied to your report.

Notes:  

  • If the Default Style checkbox is not checked, you must manually apply the style to your report element.  You can drag and drop the style on top of the report elements or set Styles on the Properties window of elements.

 

  • The element level property setting will override the style setting. If a foreground color is set in the style and you want to apply it to an element, make sure there is no element level setting for the foreground color. 
  • To reset a property to its default value, right click on the property from the Properties window and select Restore Default Value.

Return to top

 

Deploying Chart Themes and Styles

Follow these steps to deploy chart themes and styles on JasperServer.

Step Action
1

Follow the standard procedure of uploading a report to the server and create a report unit.

 

2
  • After uploading jrxml file, click Add Resource.

 

 

  • Select Upload from File system and then browse and locate the Chart theme jar file.

 

 

  • Click Next to go back to the Resources list.

 

3

Click Add Resource again to add style.

 

 

4

Click Next and set the report data source.  Save your report configuration.

 
Return to top

What's Next?

For further information on creating Chart Themes and Styles, see iReport Ultimate Guide.

Written By

This tutorial was written by Min Zhang, Oct 2009.