Creating Hyperlinks in HTML5 Charts

1. Create an empty report by using the Sample DB data adapter and the query:


2. Add an HTML5 Bar chart to the title band.
3. Double click the chart to access the chart configuration, click on the tab Chart Data and select the sub-tab Configuration to setup the multi-dimensional dataset for the chart.
4. Modify the Level 1 category by renaming it Country and setting as Expression for this category the field Country ($F{Country})

Editing Categories in the Chart Data Configuration Window

5. Modify the default measure to count the number of orders:

Editing the Measure to Count Orders

At this point the chart is configured, run the report to test it, the result should be as follow.

Successful Test of the Example Report

Now, let's configure the hyperlink.

6. If still in preview, switch back to design mode, double click the chart and edit the measure # of orders.

Editing the Number of Orders a Second Time

7. Click on Advanced properties and then on Hyperlink.

Jaspersoft Studio creates the hyperlink's basic property configuration: hyperlinkType, hyperlinkTarget, and hyperlinkReference.

8. Double-click hyperlinkReference.

The property definition dialog, which defaults to a constant:

Editing the Property Definition for hyperlinkReference

9. Preview your chart using the interactive report viewer to see that the columns are actually clickable and point to

Previewing the Report

Property values can either come form a static value, a bucket property value (explained in Working with Bucket Properties and Hidden Measures) or from the value of a measure (which lets us create values for our hyperlink, like the URL,  combined with using hidden measures, to create an interesting user experience).