HTML5 charts-Customizing tooltip formatting

0

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. 

ruthran's picture
14
Joined: May 8 2012 - 9:19pm
Last seen: 1 month 1 week ago

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-ht...

Hope, this helps

Best regards,
Andrew

asimkin - 1 year 5 months ago

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. 

 

ruthran - 1 year 5 months ago

4 Answers:

1

Hello,

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

https://community.jaspersoft.com/wiki/chart-tips-and-tricks-project-impo...

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.

Friendly User's picture
Joined: Oct 8 2009 - 5:59am
Last seen: 1 day 3 hours ago
0

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 ? 

  

ruthran's picture
14
Joined: May 8 2012 - 9:19pm
Last seen: 1 month 1 week ago
1

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

Friendly User's picture
Joined: Oct 8 2009 - 5:59am
Last seen: 1 day 3 hours ago
0

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. 

ruthran's picture
14
Joined: May 8 2012 - 9:19pm
Last seen: 1 month 1 week ago
Feedback
randomness