HTML5 charts can be used to create interactive reports. They are also more attractive than the basic charts available in iReport. In this section, you will learn how to build a report containing a simple HTML5 chart and how to change and edit charts. Basic Concepts of HTML5 ChartsHTML5 Charts in iReport are designed to work similarly to Ad Hoc charts. Levels, for example, are the equivalent of what you would use the Ad Hoc Slider to see. Other explanations include: | [toc] |
Valuies: | Static properties. |
Expressions: | Dynamic properties. |
Categories: | Rows. In a pie chart, the categories are the slices. |
Measures: | The same as in Ad Hoc. In a pie chart, these are the size of the slice. |
Series Contributors: | In the UI these are defined at the measure level. In JRXML these are defined as Series. |
Before you add a chart to your report, consider the best way to display your data. The following table describes the available chart types:
For additional information, please see the documentation at: http://www.highcharts.com. The Highcharts API documentation shows you everything you can customize in HTML5 charts.
Working with HTML5 Charts in iReport
To create an HTML5 chart:
Before you add a chart, consider the best way to display your data. Table 2-1 can help you with the determination.
- Create a new report using the Sugar CRM data source.
- Choose HTML5 Charts from the Report Elements palette, and drag it into your report.
- Select the type of chart you wish to add. Table 2-1 can help you choose the most appropriate way to display your information.
- For this example, choose Pie chart.
Your report will now include a sample chart. Following is an example of the generic image that shows roughly where the chart will be displayed. iReport does not display live data and charts in the Designer.
Start with the query:
select * from orders
- Right-click the chart, and choose Edit Chart Properties.
The Chart Properties dialog appears with tabs for configuring the chart, its dataset, and optional hyperlinks.
- In the Chart Properties dialog, choose the Chart Data tab and the Data Axes sub-tab.
- Highlight Level1, and click Modify.
- Name the axis Country. Open the Expression editor and change the default to the shipcountry field.
- Apply the change, and click OK.
- Create a measure called Total Orders. The Label Expression should be
“Total Orders”
. The Calculation type is Distinct Count. In the Value Expression field, add theorderid
field. The Value Class Name should bejava.lang.integer
. Close the Chart Properties dialog.
- Save and click Preview to see your chart. To preview your chart in a web browser, choose XHTML Preview from the Preview drop-down.
Highcharts require XHTML for web preview. The HTML preview option will be deprecated.
In an HTML preview, the chart is interactive. Mousing over a slice of the pie shows the exact number of orders.
To edit a chart:
- To add a title to the chart, in the Designer, right-click the chart and select Edit Chart Properties > Chart Configuration.
- Click Title and subtitle and in the Title box type Orders by Country. Here you can also customize alignment, color, and font if you want.
- To see fewer countries in your pie chart, select Edit Chart Properties > Chart Data > Dataset.
You can filter your data set. To do so, add a Filter expression such as:
$F{shipcountry}.startsWith("A") || $F{shipcountry}.startsWith ("U") || $F{shipcountry}.startsWith ("I") || $F{shipcountry}.startsWith ("S")
Close the Dialog.
Save and click Preview again to view the edited chart.
To change chart type:
Before you change the chart used, ensure you have appropriate data for the type of chart.
- From the Designer, right-click your chart and choose Chart Properties.
- Click the Change Chart Type button.
The Chart types window opens. This window will give you very slight guidance as to what dataset type is used by each chart. Figure 2-2 provides more information.
- Choose an appropriate type of chart. For this example, choose Bar, and click OK.
iReport will discard data if not right for the new chart type.
Note that on the Chart Configuration tab, there is now a Bar property instead of a Pie property.
- Click Close.
Save and preview your report. Because it was originally designed as a pie chart, there is no label for the Y-values.
To edit a bar chart:
Editing all charts works similarly, depending on the type of data presented.
- In the Designer, right-click and choose Edit Chart Properties.
In Chart Data > Data Axes, there are now places to define Series and more than a single measure.
Add a second measure, Average freight:
Label Expresion: “Average Freight”
Calculation: Average
Expression: $F{freight}
Click Ok and Close.
Save and Preview the chart.
In HTML, the chart is interactive.
Create a Series:
Name: Year
Expression: new java.text.SimpleDateFormat(“yyyy”).format( $F{orderdate} )
Value Class Name: java.lang.Comparable
Order: Ascending
Click Ok and Close.
- Save and Preview your report. You see two measures per year, grouped by Country.
To create hyperlinks:
With new HTML5 charts (Highcharts) functionality added to JasperReports, including a hyperlink in a chart is different to JFreeCharts (regular Charts) and Fusion charts (Charts Pro).
Note: Hyperlink on a whole chart is not yet supported.
- Go to Chart Properties > Chart Data > Data Axes.
- Double click Country.
Click the Properties tab. The Add/modify property dialog appears.
Create a property named
url
. Add the expression:“http://www.ask.com/web?q=” + F{shipcountry}
- Click OK.
- Double-click the measure Total Orders.
- Click the Advanced Properties tab.
Click Add. The Add/modify property dialog appears.
- Click the down arrow and choose Built-In Hyperlink Property. Close that window.
- Click the Hyperlink button. That provides a shortcut to the two most important properties needed to create a hyperlink.
- Double-click hyperlinkReference (SeriesItemHyperlink). The Add/modify property dialog opens with some information filled in. You customize this information to the values you need.
- Click the radio button for Use a bucket property value and type Country.url. Click OK.
- Save and preview your report. In the HTML preview, if you click the bar for any country, you will be taken to the Ask.com page for that country.
For instructions not based on the examples in this article, use the following procedure:
Note: Bucket-level properties are the only place where you can create expressions to be used with your link. If you are not using an expression, you must either use static values or reference a bucket level property.
- Identify the series you want to use for your link.
- Create a bucket property for that series. i.e. If you are using a pie chart, the category bucket may have a property called
myUrl
which contains your url built with the category value.This can be done in Edit Chart Properties > Chart Data > Data Axes > Categories
- Identify the measure to which you need to add a link.
This can be done in Edit Chart Properties > Chart Data > Data Axes > Measures
- In the advanced properties of your measure click Hyperlink.
This will create for you a couple of properties. Edit them by assigning the proper value (again, here you'll have to either use static values or reference a bucket level property).
To add a ReportExecution hyperlink:
If you want a ReportExecution hyperlink, you need to rename one of the measure's advanced properties (see step 4 in the previous procedure) to _report
and enter the corresponding value, and if you need to pass parameter values you will also need to add them as measure properties.
- should be Built-in Hyperlink Property with constant value of ReportExecution
hyperlinkTarget
should be Built-in Hyperlink Property with constant value of Blank._report
should point to a report, i.e. /reports/samples/EmployeeAccounts
Recommended Comments
There are no comments to display.
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now