Display Data numbers in Indian Numeric system in HTML5 Charts

Issue:

[toc on_off::hide=1]

Customer has a requirement to display Data 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 Data labels. HTML5 Charts or HighCharts allow usage of JavaScript functions as property values. But before you can use functions, you need to enable them. This article is going throught steps for enabling this feature for TIBCO Jaspersoft^® Studio and TIBCO JasperReports^® Server: https://community.jaspersoft.com/wiki/using-functions-html5-charts-highcharts

You can format your Data labels using the plotOptions.bar.dataLabels.formatter  property. 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="plotOptions.bar.dataLabels.formatter">
    <hc:propertyExpression><![CDATA["function() {var label = this.y; x = label.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>

This is the result: http://prntscr.com/mpvzw2

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

indiannumericreport_1.jrxml