Simple HTML5 Charts

Before you add a chart, consider the best way to display your data. HTML5 Chart Types can help you with the determination.

Creating an HTML5 chart

Create a new report using the Sugar CRM data source. Start with the query:

select * from orders

Choose HTML5 Charts from the Components Pro section of the Palette, and drag it into your report.

Palette

Select the type of chart you want to add. “HTML5 Chart Types” can help you choose the most appropriate way to display your information.

For this example, choose Pie chart.

Chart Types

Your report now includes a sample chart. Jaspersoft Studio does not display live data and charts in the Design view. You must configure your data for use with the HTML5 chart type before clicking Preview to see the chart filled with your data.

Pie Chart Example

Right-click the chart, and choose Edit Chart Properties.

The HTML5 Charts Properties dialog appears with tabs for configuring chart properties, chart data, and optional hyperlinks.

HTML5 Charts Properties > Chart Data > Configuration

Choose the Chart Data tab and the Configuration sub-tab.

Highlight Level1, and click Modify.

Name the Expression Country. Open the Expression editor and change the default to the shipcountry field.

Click OK.

In the Values field, create a measure called Total Orders.

•

The Label Expression should be “Total Orders”.

•

The Calculation type is DistinctCount.

•

In the Value Expression field, add the orderid field.

•

The Value Class Name should be java.lang.Integer.

Click OK to close the Chart Properties dialog.

Save and click the Preview tab to see your chart. To preview your chart in a web browser, choose XHTML Preview from the Preview drop-down.

HTML5 charts require XHTML for web preview. The HTML preview option will be deprecated.

In an HTML preview, the chart is interactive. Hover your cursor over a slice of the pie to see the exact number of orders.

Editing HTML5 Charts

To add a title to the chart, in the Design tab, double-click the chart.

Click Title 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.

Filtered Pie Chart

To change chart type:

Before you change the chart used, ensure you have appropriate data for the type of chart.

From the Design tab, right-click your chart and choose Edit Chart Properties.

Click the Change Chart Type button.

The HTML5 Chart element creation window opens. This window provides some guidance about which dataset type is used by each chart.

Choose an appropriate type of chart. For this example, choose Bar, and click OK.

Jaspersoft Studio discards data that isn't right for the new chart type.

Click Close.

Save and preview your report. Because it was originally designed as a pie chart, there is no label for the Y-values.

Chart Type Changed to Bar Chart

To edit a bar chart:

Editing all charts works similarly, depending on the type of data presented.

From the Design tab, right-click and choose Edit Chart Properties.

On the Chart Data > Configuration tab, there are now places to define Series and more than a single measure.

Add a second measure, Average Freight:

•

Label Expression: “Average Freight”

•

Calculation: Average

•

Value Expression: $F{freight}

•

Value Class Name: java.lang.Integer

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, Total Orders and Average Freight, grouped by Country.

Bar Chart with Second Measure and Series

Creating Hyperlinks

With HTML5 charts (Highcharts) functionality added to JasperReports, using hyperlinks in charts is similar to using JFreeCharts (regular Charts) and Fusion charts (Charts Pro). You open the chart properties, select the Hyperlink tab, and add your link.

Because HTML5 charts are so different than other types of chart that Jaspersoft Studio supports,their chart items (such as bars or pie section) support hyperlinks in a very different manner than other types of chart. You must specify these link is a different manner than is done with other chart libraries.This section gives some basic steps for defining hyperlinks for HTML5 charts; for more detailed instructions, see Creating Hyperlinks in HTML5 Charts.

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.

10.

Double-click hyperlinkReference (SeriesItemHyperlink). The Add/modify property dialog opens with some information filled in. You customize this information to the values you need.

11.

Click the radio button for Use a bucket property value and type Country.url. Click OK.

12.

Save and preview your report. In the HTML preview, click the bar for any country to open the Ask.com page for that country.

To create hyperlinks that use expressions:

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. For example, 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 creates a couple of properties. Edit them by assigning the proper value (again, you need to eitheruse 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 also need to add them as measure properties.

For more information about setting hyperlinks, see Anchors, Bookmarks, and Hyperlinks.

Sign In

Creating an HTML5 chart

Editing HTML5 Charts

Creating Hyperlinks

User Feedback

Recommended Comments

Activity

Products

Explore