[Logo] SpagoWorld Forums
  [Search] Search   [Recent Topics] Recent Topics   [Hottest Topics] Hottest Topics   [Members]  Member Listing  
[Groups] Back to home page  [Moderation Log] Moderation Log   [Register] Register /  [Login] Login 
Highcharts Tooltip formatter property [SOLVED]  XML
Forum Index » Technical Help - SpagoBI Server - CHART & DASH
Author Message
martinlo.spw

Newby

Joined: 10/08/2010 16:43:22
Messages: 30
Offline

Hello,

Is there any way to use the tooltip formatter on Highcharts templates?. I would like to format a number with thousands and decimal separators and maybe some preffix or suffix like in the Worksheets Highcharts. I see that this is possible using the following Highcharts option: http://highcharts.com/ref/#tooltip--formatter . Also I noticed that there are some pre-defined functions on a javascript file in: SpagoBI\js\src\ext\sbi\engines\chart\HighchartsPanel.js . I could only find a reference to one of this functions in a template from the demo with label: HIGHCHART_BAR_CROSED , but the tooltip is commented out, and if I put the code in, then the chart won't load because of the tooltip option formatter='percentage' .

In the SpagoBI.log output I see that the Json template is the following:




With the formatter property set to: formatter: 'percentage' , which doesn't look correct, since I guess there should be a function in there. If I try putting a function in the formatter like formatter="function (){return this.series.name;}" , then I get the function in the Json template surrounded by ' ' , which doesn't look good neither, and the chart is not displayed.


Thanks in advance for any help.

Regards,

Martin.

This message was edited 3 times. Last update was at 11/10/2011 17:25:20

rapidoss.spw

Newby

Joined: 05/07/2011 14:07:08
Messages: 47
Offline

I have the same problem
rapidoss.spw

Newby

Joined: 05/07/2011 14:07:08
Messages: 47
Offline

Hi ,

u have to modify the file sbi-all-ext311-3.1.0.js in location :



and add this function :

getFormatterCode : function(formatter) {
if (formatter === undefined || formatter === null) {
return null
}
var result;
var formatterCode = "";
switch (formatter) {
case "name_percentage":
formatterCode = "function (){return '<b>'+ this.series.name +'</b><br/>'+ this.point.name +': '+ this.y +' %';}";
break;
case "name":
formatterCode = "function (){return '<b>'+ this.series.name +'</b><br/>'+ this.point.name ;}";
break;
case "percentage":
formatterCode = "function (){return '<b>'+ this.series.name +'</b><br/>'+ this.y +' %';}";
break;
case "x_y":
formatterCode = "function (){return 'The value for <b>'+ this.x +'</b> is <b>'+ this.y +'</b>';}";
break;
case "label_value_numeric_english":
formatterCode = "function (){return 'YOU Message';}";
break;
default:
formatterCode = "function (){return "
+ formatter.replace(/"/gi, "'") + ";}";
break
}
result = eval(formatterCode);
return result
}

Hope it's Help.
martinlo.spw

Newby

Joined: 10/08/2010 16:43:22
Messages: 30
Offline

Hi Rapidoss!,

I have just seen your post, I will take a look at your solution later and let you know how it goes. Thanks a lot!.

Best regards,

Martin.
hemgoyal.spw

SpagoBI friend

Joined: 07/09/2011 17:35:07
Messages: 89
Offline

Hi Martin,

I am facing the same problem.

Can you please help me..if it is solved.

Thanks
martinlo.spw

Newby

Joined: 10/08/2010 16:43:22
Messages: 30
Offline

rapidoss.spw wrote:Hi ,

u have to modify the file sbi-all-ext311-3.1.0.js in location :



and add this function :

getFormatterCode : function(formatter) {
if (formatter === undefined || formatter === null) {
return null
}
var result;
var formatterCode = "";
switch (formatter) {
case "name_percentage":
formatterCode = "function (){return '<b>'+ this.series.name +'</b><br/>'+ this.point.name +': '+ this.y +' %';}";
break;
case "name":
formatterCode = "function (){return '<b>'+ this.series.name +'</b><br/>'+ this.point.name ;}";
break;
case "percentage":
formatterCode = "function (){return '<b>'+ this.series.name +'</b><br/>'+ this.y +' %';}";
break;
case "x_y":
formatterCode = "function (){return 'The value for <b>'+ this.x +'</b> is <b>'+ this.y +'</b>';}";
break;
case "label_value_numeric_english":
formatterCode = "function (){return 'YOU Message';}";
break;
default:
formatterCode = "function (){return "
+ formatter.replace(/"/gi, "'") + ";}";
break
}
result = eval(formatterCode);
return result
}

Hope it's Help.



Hi Rapidoss,

I tried your code and it works!, first I thought that the code needed to be in the HighchartsPanel.js file, but you were right, the code modifications must be done in sbi-all-ext311-3.1.0.js. Anyway, I just added this :

case"currency_0_dec":formatterCode="function (){return '<b>'+ this.series.name +'</b><br/>'+ '$'+ Highcharts.numberFormat(this.y, 0);}";break;case"currency_2_dec":formatterCode="function (){return '<b>'+ this.series.name +'</b><br/>'+ '$'+ Highcharts.numberFormat(this.y, 2);}";break;

Right behind the "percentage" function.

I also did some modifications to the HighchartsPanel.js.. but at this moment I'm not sure if those were needed or not. I'm going to try reverting the changes to that file later.



Thanks for your help!.

Best regards,

Martin.

This message was edited 1 time. Last update was at 05/10/2011 23:49:51

martinlo.spw

Newby

Joined: 10/08/2010 16:43:22
Messages: 30
Offline

hemgoyal.spw wrote:Hi Martin,

I am facing the same problem.

Can you please help me..if it is solved.

Thanks


Hi,

Please check my last message.

You can add your own custom functions in the case section:

case "label_value_numeric_english":
formatterCode = "function (){return 'YOU Message';}";
break;

I added two functions, 1 for currency without decimals and other for currency with 2 decimals in the format $##,###,###.## . Following is the code:

case"currency_0_dec":formatterCode="function (){return '<b>'+ this.series.name +'</b><br/>'+ '$'+ Highcharts.numberFormat(this.y, 0);}";break;case"currency_2_dec":formatterCode="function (){return '<b>'+ this.series.name +'</b><br/>'+ '$'+ Highcharts.numberFormat(this.y, 2);}";break;



Regards,

Martin.

This message was edited 2 times. Last update was at 05/10/2011 23:51:38

hemgoyal.spw

SpagoBI friend

Joined: 07/09/2011 17:35:07
Messages: 89
Offline

Hi Martin,

Thanks for the reply.

Which browser(and version) did u use to test it ?

It is not working for me. I am using firefox 7.0.1

Thanks
martinlo.spw

Newby

Joined: 10/08/2010 16:43:22
Messages: 30
Offline

hemgoyal.spw wrote:Hi Martin,

Thanks for the reply.

Which browser(and version) did u use to test it ?

It is not working for me. I am using firefox 7.0.1

Thanks


Hi,

I'm opening the thread again, yesterday I got it running, and today it's not working again... it's very strange. I'm using firefox 7.0.1 and chrome .. yesterday I saw it working on Firefox. What I noticed is that the .JS files are being cached by the browser, so try to clean the browser cache, cookies, etc. Maybe that will help you.

Regards,

Martin.
martinlo.spw

Newby

Joined: 10/08/2010 16:43:22
Messages: 30
Offline

martinlo.spw wrote:
hemgoyal.spw wrote:Hi Martin,

Thanks for the reply.

Which browser(and version) did u use to test it ?

It is not working for me. I am using firefox 7.0.1

Thanks


Hi,

I'm opening the thread again, yesterday I got it running, and today it's not working again... it's very strange. I'm using firefox 7.0.1 and chrome .. yesterday I saw it working on Firefox. What I noticed is that the .JS files are being cached by the browser, so try to clean the browser cache, cookies, etc. Maybe that will help you.

Regards,

Martin.



I found the problem, the javascript anonymous function () is not being accepted by firefox, I'm not sure why it worked yesterday though...
martinlo.spw

Newby

Joined: 10/08/2010 16:43:22
Messages: 30
Offline

martinlo.spw wrote:
martinlo.spw wrote:
hemgoyal.spw wrote:Hi Martin,

Thanks for the reply.

Which browser(and version) did u use to test it ?

It is not working for me. I am using firefox 7.0.1

Thanks


Hi,

I'm opening the thread again, yesterday I got it running, and today it's not working again... it's very strange. I'm using firefox 7.0.1 and chrome .. yesterday I saw it working on Firefox. What I noticed is that the .JS files are being cached by the browser, so try to clean the browser cache, cookies, etc. Maybe that will help you.

Regards,

Martin.



I found the problem, the javascript anonymous function () is not being accepted by firefox, I'm not sure why it worked yesterday though...



Alright, I got it working again, I had to put all the javascript anonymous functions inside () , following is the code:

getFormatterCode:function(formatter){if(formatter===undefined||formatter===null){return null}var result;var formatterCode="";switch(formatter){case"name_percentage":formatterCode="(function (){return '<b>'+ this.series.name +'</b><br/>'+ this.point.name +': '+ this.y +' %';})";break;case"name":formatterCode="(function (){return '<b>'+ this.series.name +'</b><br/>'+ this.point.name ;})";break;case"percentage":formatterCode="(function (){return '<b>'+ this.series.name +'</b><br/>'+ this.y +' %';})";break;case"x_y":formatterCode="(function (){return 'The value for <b>'+ this.x +'</b> is <b>'+ this.y +'</b>';})";break;case"currency_0_dec":formatterCode="(function (){return '<b>'+ this.series.name +'</b><br/>'+ '$'+ Highcharts.numberFormat(this.y, 0);})";break;case"currency_2_dec":formatterCode="(function (){return '<b>'+ this.series.name +'</b><br/>'+ '$'+ Highcharts.numberFormat(this.y, 2);})";break;default:formatterCode="(function (){return "+formatter.replace(/"/gi,"'")+";})";break}result=eval(formatterCode);return result}


Just put the "function (){return .." into () : "(function (){return ... )" .
slava.spw

Newby

Joined: 13/12/2011 11:41:29
Messages: 15
Offline

Thanks, that helped me.

For version 3.4 of spagobi server, the JS is slightly different. To display the percentage value of data in a pie chart I changed the /SpagoBI-Server-3.4/webapps/SpagoBI/js/src/ext/sbi-all-ext311-3.4.0.js file, and added following code that will automatically calculate the percentage from dataset values:

on formatter definition

and little lower in code
 
Forum Index » Technical Help - SpagoBI Server - CHART & DASH
Go to:   
Powered by JForum 2.1.9 © JForum Team