HTML5 Charts - Getting started and general information

Introduction:

The purpose of this Wiki article is to be a central location for users who want to explore the HTML5/High Chart functionality in professional editions of JasperReports and want to start creating their own charts. This is aimed not only at new users but also at other users who would want to take a look at the samples or tip and tricks videos. This article contains links to videos, links to documentation materials and other articles, samples attachments and instructions that will help you get started.

Getting started video course:

There is a video guide series that explain the basic concepts and help you get started:

1. - Getting started part 1 - Basic concepts
2. - Getting started part 2 - Expanding on basic concepts
3. - Getting started part 3 - Advanced properties
4. - Getting started part 4 - Hyperlinks

This video series is a work in progress and will be updated with more videos in the future. This article will be updated respectively to include links to these new videos. There are also other videos created outside of the scope of this video series that demonstrate different tips and tricks for chart usage.

There are also videos about different tips and tricks you can do with charts that are available on the support channel:

• https://www.youtube.com/channel/UCCxK2NRbV9BDvjUlmo6C_Lg

The video library is going to get updated in future.

Some of the videos of particular interest:

• - using JavaScript Functions in HTML5 charts
• - running totals in HTML5 charts
• - using heatmaps
• - using series properties in measures
• - Multi-Axis charts
• - 3D Charts

   

The videos will continue to be released, some will be outside of getting started scope as they will cover more advanced topics.

Documentation:

There is basic documentation on HTML5 charts creation in JasperSoft Studio Guide that can be found on this page:

https://community.jaspersoft.com/documentation

Find and download the documentation for your version of the product. The section you're interested in is "HTML5 Charts in Commercial Editions":

https://community.jaspersoft.com/documentation/tibco-jaspersoft-studio-user-guide/v720/html5-charts-commercial-editions-0

Documentation features overview of HTML5 charts in JasperReports Library and step-by-step insturctions on how to create basic chart types and how to apply formatting and customization.

HighCharts API Reference:

HTML5 Charts are based on HighCharts technology - a standalone Javascript library with powerful capabilities. As of now, not all features of HighCharts are implemented in HTML5 Charts in JasperReports. HighCharts library version that is embedded in JasperReports Professional edition gets updated with new releases to include more chart types and latest changes in the API. Regardless of the version mismatch, the HighChart API reference is a very useful resource to learn more about the capabilities of the library and take a look at the samples:

https://api.highcharts.com/highcharts/

How to apply the information from the reference to JasperReports HTLM5 charts?

The properties for chart objects can be applied to the HTML5 charts in the following way. The property like this:

plotOptions: { series: { dataLabels: { enabled: true }}}

Translates into

plotOptions.series.dataLabels.enabled: true

You can take a look at the properties for different objects, see what their possible values are and also check out the JS Fiddle samples to see how changing the property values affects the chart output.

Samples:

There is a zip file with JasperSoft Studio project attached to the article. The project contains reports with HTML5 charts. The reports have been built by following instructions in the documentation so you can take a look at the final version and see how the things are implemented in case you have issues with the documentation. To import the attached zip as a project into your JasperSoft Studio do the following:

1. In Jaspersoft Studio go to Project Explorer view
2. Right click on white space > Import
3. Under General select Import Existing Projects Into Workspace
4. Switch to Archive File, point to the downloaded archive, make sure the Chart Samples project is selected
5. Press Next

All the reports in the sample project are based on Sample Data Adapter that is provided with Jaspersoft Studio.

There is another sample chart project that was developed a while again. Some of the samples may not be relevant at this point but they can provide insight about certain features and chart types. These samples are based not only on sample data but also on Foodmart and SugarCRM sample databases that are included with JasperReports Server.

https://community.jaspersoft.com/wiki/chart-tips-and-tricks-project-importing-workspace-and-using-samples

In addition to videos, there is also written material available in form of Wiki articles on the community website. The articles related to the topic are usually tagged with HTML5 Chart tag or HighCharts tag:

• https://community.jaspersoft.com/search/category/Wiki/tags/html5-charts-6554?query=
• https://community.jaspersoft.com/search/category/Wiki/tags/highcharts-2119?query=

Lot's of these articles contain general advice on how to deal with specific situations, guides and how-to's.

chartsamples.zip