HTML5 Charts in iReport

Before you add a chart to your report, consider the best way to display your data. The following table describes the available chart types:

HTML5 Chart Types
Icon	Description
Column charts - Compare values displayed as columns.
	Column. Multiple measures of a group are depicted as individual columns.
	Stacked Column. Multiple measures of a group are depicted as portions of a single column whose size reflects the aggregate value of the group.
	Stacked Percent Column. Multiple measures of a group are depicted as portions of a single column of fixed size.
Bar charts - Compare values displayed as bars
	Bar. Multiple measures of a group are depicted as individual bars.
	Stacked Bar. Multiple measures of a group are depicted as portions of a single bar whose size reflects the aggregate value of the group.
	Stacked Percent Bar. Multiple measures of a group are depicted as portions of a single bar of fixed size.
Line charts - Compare values displayed as points connected by lines.
	Line. Displays data points connected with straight lines.
	Spline. Displays data points connected with a fitted curve.
	Stacked Line. Displays series as a set of points connected by a line .Values are represented on the y-axis and categories are displayed on the x-axis. Lines do not overlap because they are cumulative at each point.
Area charts - Compare values displayed as shaded areas. Compared to line charts, area charts emphasize quantities rather than trends.
	Area. Displays data points connected with a straight line and a color below the line; groups are displayed as transparent overlays.
	Stacked Area. Displays data points connected with a straight line and a solid color below the line; groups are displayed as solid areas arranged vertically, one on top of another.
	Stacked Percent Area. Displays data points connected with a straight line and a solid color below the line; groups are displayed as portions of an area of fixed sized, and arranged vertically one on top of the another.
	Area Spline. Displays data points connected with a fitted curve and a color below the line; groups are displayed as transparent overlays.
	Stacked Area Spline. Displays series as a set of points connected by a smooth line with the area below the line filled in. Values are represented on the y-axis and categories are displayed on the x-axis. Areas do not overlap because they are cumulative at each point.
Pie charts - Compare values displayed as slices of a circular graph.
	Pie. Multiple measures of a group are displayed as sectors of a circle.

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.

1. Create a new report using the Sugar CRM data source.
2. Choose HTML5 Charts from the Report Elements palette, and drag it into your report.

   

3. Select the type of chart you wish to add. Table 2-1 can help you choose the most appropriate way to display your information.
4. 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.

   

5. Start with the query:

   select * from orders
   

6. 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.

   

7. In the Chart Properties dialog, choose the Chart Data tab and the Data Axes sub-tab.
8. Highlight Level1, and click Modify.
9. Name the axis Country. Open the Expression editor and change the default to the shipcountry field.
10. Apply the change, and click OK.
11. 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 the orderidfield. The Value Class Name should be java.lang.integer.

12. Close the Chart Properties dialog.

    
13. 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:

1. To add a title to the chart, in the Designer, right-click the chart and select Edit Chart Properties > Chart Configuration.
2. 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.
3. To see fewer countries in your pie chart, select Edit Chart Properties > Chart Data > Dataset.

4. 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.

5. 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.

1. From the Designer, right-click your chart and choose Chart Properties.
2. 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.

   

3. 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.

4. Click Close.

5. 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.

1. In the Designer, right-click and choose Edit Chart Properties.

2. In Chart Data > Data Axes, there are now places to define Series and more than a single measure.

   

3. Add a second measure, Average freight:

   Label Expresion:	“Average Freight”
   Calculation:	Average
   Expression:	$F{freight}

   Click Ok and Close.

4. Save and Preview the chart.

   

   In HTML, the chart is interactive.

5. 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.

6. 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.

1. Go to Chart Properties > Chart Data > Data Axes.
2. Double click Country.

3. Click the Properties tab. The Add/modify property dialog appears.

   

4. Create a property named url. Add the expression:

   “http://www.ask.com/web?q=” + F{shipcountry}
   

5. Click OK.
6. Double-click the measure Total Orders.
7. Click the Advanced Properties tab.

8. Click Add. The Add/modify property dialog appears.

   
9. Click the down arrow and choose Built-In Hyperlink Property. Close that window.
10. Click the Hyperlink button. That provides a shortcut to the two most important properties needed to create a hyperlink.
11. Double-click hyperlinkReference (SeriesItemHyperlink). The Add/modify property dialog opens with some information filled in. You customize this information to the values you need.
12. Click the radio button for Use a bucket property value and type Country.url. Click OK.

    

13. 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.

1. Identify the series you want to use for your link.
2. Create a bucket property for that series. i.e. If you are using a pie chart, the category bucket may have a property called myUrlwhich contains your url built with the category value.

   This can be done in Edit Chart Properties > Chart Data > Data Axes > Categories

3. Identify the measure to which you need to add a link.

   This can be done in Edit Chart Properties > Chart Data > Data Axes > Measures

4. 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 _reportand 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.
• _reportshould point to a report, i.e. /reports/samples/EmployeeAccounts

See Also

• iReport Ultimate Guide Version 5
• Advanced formatting with new HTML5 charts