Simple HTML5 Charts

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

Creating an HTML5 chart

Create a new report using the SugarCRM data source in the JasperReports Server repository. See Accessing JasperReports Server from Jaspersoft Studio.

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 a chart type based on the information you want to display. See“HTML5 Chart Types” for help.

For this example, we'll choose Pie chart.

Chart Types

Your report now includes a sample chart. The Design view doesn't display live data. After you configure your data for use with an HTML5 chart, you can click Preview to see the chart with your data.

Pie Chart Example

Right-click the chart, and choose Edit Chart Properties. The Chart Properties dialog includes tabs for configuring chart properties, chart data, and hyperlinks.

HTML5 Charts Properties > Chart Data > Configuration

Go to the Chart Data tab and click the Configuration tab.

Highlight Level1, and click Modify.

Name the Expression Country.

Click

10.

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.

11.

Click OK to close the Chart Properties dialog.

12.

Save, then 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.

Your HTML chart preview is interactive. Hover over a pie segment to see the exact number of orders.

Editing HTML5 Charts

Continue using the HTML5 pie chart from the previous example to complete the following tasks.

To edit the title of an HTML5 chart:

Right-click the chart and select Edit Chart properties.

Click the Chart Properties tab.

Click Title and enter Orders by Country in the text box. You can also customize alignment, color, and font.

To filter the data in the chart:

Click the Chart Data tab, then click its Dataset tab.

By the Filter expression text box, click

Filter your data set by adding a Filter expression such as:

$F{SHIPCOUNTRY}.startsWith("A") ||

$F{SHIPCOUNTRY}.startsWith ("U") ||

$F{SHIPCOUNTRY}.startsWith ("I") ||

$F{SHIPCOUNTRY}.startsWith ("S")

Click Finish.

Save and click Preview again to view the edited chart.

Filtered Pie Chart

To change chart type:

Before beginning this task, make sure your data is appropriate for the new chart type.

Right-click your chart and choose Edit Chart properties.

In the lower-left section of the dialog box, click the Change Chart Type button to open the HTML5 Chart type selection window. This window provides some guidance about which dataset type is used by each type of chart.

For this example, choose Bar and click OK.

Jaspersoft Studio discards data that's not right for the new chart type.

Click OK.

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

To add an additional measure to a bar chart:

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

On the Design tab, right-click your chart and choose Edit Chart properties.

Click the Chart Data tab, then click its Configuration tab. Because this is now a bar chart, there are sections to define Series Levels and additional measures.

In the Measures section, click Add. Enter the following information:

•

Name: 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. HTML charts are interactive.

To add a series to a bar chart:

On the Design tab, right-click your chart and choose Edit Chart properties.

Click the Chart Data tab, then click its Configuration tab.

In the Series Levels section, click Add. Enter the following information:

•

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 from other chart types supported by Jaspersoft Studio,their chart items (bars or pie section) support hyperlinks differently than other types of chart. This section gives some basic steps for defining hyperlinks for HTML5 charts. For more detailed instructions, see Creating Hyperlinks in HTML5 Charts.

Right-click your bar chart and select Edit Chart properties.

Click the Chart Data tab, then click its Configuration tab.

In the Categories Levels section, double-click Country.

Click the Bucket Properties tab, and click Add.

In the Property name text entry box, enter url.

Click

"http://www.ask.com/web?q=" + $F{SHIPCOUNTRY}

Click OK.

To add the hyperlink:

Back in the Chart Data tab, click its Configuration tab.

Double-click the measure Total Orders.

Click the Advanced Properties tab, then click the Hyperlink button. That provides a shortcut to the two most important properties needed to create a hyperlink.

Double-click hyperlinkReference (SeriesItemHyperlink). The Edit 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 enter Country.url.

Click OK.

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're 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 > Configuration.

In the Categories Levels section, click Add.

Click the Bucket Properties tab, and click Add.

Create the myUrl property, then click OK.

Next, Identify the measure to which you need to add a link.

This can be done in Edit Chart Properties > Chart Data > Configuration.

In the Measures section, click select the measure you want to link to, and click Modify.

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