Display No Data Message in HTML5 Chart if Subdataset Returns Empty Result

Use case

Customer created a report with HTML5 Chart based on a parameterized  subdataset.

In case the subdataset returns no records, an empty chart displayed which is not user-friendly and might lead to misunderstanding.

Customer would like to automatically add a message on top of the empty chart saying that there was no result from the query.

Resolution

A possible solution it to use Highcharts' load event to specify a custom Javascript function which will display a message over the chart:

https://api.highcharts.com/highcharts/chart.events.load

In order to utilize the event, you need to go to 'Edit Chart Properties' context menu, 'Chart Formatting' tab, click on 'Show Advanced Properties' button.

Locate chart > events > load property, modify it by checking 'Use Expression' option and specify expression value like:

"function(){if (typeof this.series[0].data[0] == 'undefined'){this.renderer.label('Chart Has No Data', 350, 120).attr({fill:'red',padding: 10,r: 5}).css({color: '#FFFFFF'}).add();}}"

Please refer to printscreen

The function uses Highcharts' renderer.label function to draw the message:

https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#label

Please note, the solution required property

com.jaspersoft.jasperreports.highcharts.function.properties.allowed

to be set to true as described in the article

Using functions in HTML5 Charts / HighCharts

Printscreen to compare default behavior (empty chart) and customized one:

Solution tested with TIBCO JasperReports^® Server v.7.1.0

Ref. Case 01649298