Display Axis label numbers in Indian Numeric system in HTML5 Charts

Issue:

[toc on_off::hide=1]

Customer has a requirement to display Axis label numbers in the Indian Number Format with Comma, upto 2 decimal places. Indian Number format (lakh, lakhs, crore, crores, koti, kotis) is something like that: 123456524578 -> 1,23,45,65,24,578

Resolution:

Such effect can be achieved by using formatter functions on labels. HTML5 Charts or HighCharts allow usage of JavaScript functions as property values. But before you can use functions, you need to enable them.

In TIBCO JasperSoft® Studio (Windows):

Go to Window -> Preferences -> Select JasperSoft Studio category -> Select Properties category -> First type in the filter field "functions.allowed" to check if you already have the property. If you don't see anything returned by the search, press Add Property name: com.jaspersoft.jasperreports.highcharts.function.properties.allowed Property value: true

In TIBCO JasperReports® Server:

Go to your application server and navigate to the JasperReports Server WAR file (expoloded/unexploded). Go to /WEB-INF/classes Edit jasperreports.properties file -> Append com.jaspersoft.jasperreports.highcharts.function.properties.allowed=true

Save the file and restart the application server.

You can format your chart Axis labels using the yAxis.labels.formatter and yAxis.labels.formatter properties. It requires a callback function that will be called every time a data label will be generated and the formatting will be applied. For example:

<hc:chartProperty name="yAxis.labels.formatter"> 
<hc:propertyExpression><![CDATA["function() {var label = this.axis.defaultLabelFormatter.call(this);x = this.value.toString();var lastThree = x.substring(x.length-3);var otherNumbers = x.substring(0,x.length-3);if(otherNumbers != ''){lastThree = ',' + lastThree;}var res = otherNumbers.replace(/\\B(?=(\\d{2})+(?!\\d))/g, \",\") + lastThree;return res;}"]]>
</hc:propertyExpression>
</hc:chartProperty> 

for xAxis:

<hc:chartProperty name="xAxis.labels.formatter"> 
<hc:propertyExpression><![CDATA["function() {var label = this.axis.defaultLabelFormatter.call(this);x = this.value.toString();var lastThree = x.substring(x.length-3);var otherNumbers = x.substring(0,x.length-3);if(otherNumbers != ''){lastThree = ',' + lastThree;}var res = otherNumbers.replace(/\\B(?=(\\d{2})+(?!\\d))/g, \",\") + lastThree;return res;}"]]> 
</hc:propertyExpression> 
</hc:chartProperty> 

In Studio, this property can be edited from UI, using Advanced Chart Properties: http://prntscr.com/mh8ze3

Also, attaching sample report to demostrate this behavior. It uses default Sample DB Dataadapter, so you should easily be able to execute it.

Related links: https://community.jaspersoft.com/wiki/using-functions-html5-charts-highcharts

indiannumericreport_2.jrxml