HTML5 charts-Customizing tooltip formatting

[ruthran]

Hi All,

     I am using HTML5 bar charts for one of the report. I have a question on tooltip formatting option we have for charts. I need to display amount values for each of the series (coutry in my case) in the graph and the amount should be formatted based on each currency. So, the decimal format will change for each value.

     Under Tooltip -> Formatting, I see an option called Value decimals which allow us to configure the decimal places. But, this is a constant value and I cannot get different decimal points for different series. I tried to use the expression in this field but it is not helping as the bar chart is present in summary band and always picks up last value. Is there any way to include custom formatting in "Point Format" option of formatting? I tried to include some HTML codes in it, but it is not working. Please do let me know if there are any other way to handle this issue. 

[asimkin]

Hi,

what you could try is to use series Bucket Properties to specify required tooltip.valueDecimals value for each series.

A similar solution to define series colors are described in the article:

https://community.jaspersoft.com/wiki/dynamically-updating-bar-colors-html5-bar-charts

Hope, this helps

Best regards,
Andrew

[ruthran]

Hi Andrew,

      Thank you for your reply.

       I forgot to mention about that. I am already using the series bucket property to get the required decimal points. But, we cannot use any bucket expression in the tooltip.ValueDecimals properties. We can either use a hard-coded number or some other custom expression. 

          I tried this option already but got no success. 

 

[Friendly User]

Hello,

you may be interested in chart samples I've created:

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

Some of these charts show how to use format function and how to use formatter callback functions for formatting and how to apply them individually to each measure.

[ruthran]

Hi,

   As you suggested, I tried using tooltip.Formatter function, but I don't see that formatting has been applied to the chart result. Below are the values I am using in different properties.

 tooltip.formatter  - "(function() {return  this.series.name + '<b>'+ Highcharts.numberFormat(this.point.y, this.point.exponent)+ '</b>' ; } )"

tooltip.pointFormat - <span style="color:{point.color}">●</span> {series.name}: <b> {point.y} </b><br/>

(point.exponent is a bucket property I defined for each series)

Could you please let me know what I am doing wrong here ? 

  

[Friendly User]

Have you enabled the javascript functions in highchart properties? Make sure that Window->Preferences->JasperSoft Studio->Properties com.jaspersoft.jasperreports.highcharts.function.properties.allowed is set to true

[ruthran]

That worked like a charm !!. I actually thought I had it enabled already and tried many solutions yesterday. But, after seeing your answer, when I verified once again, it was not there. Thank you for your help.