Focal Point Banner


As of December 1, 2020, Focal Point is retired and repurposed as a reference repository. We value the wealth of knowledge that's been shared here over the years. You'll continue to have access to this treasure trove of knowledge, for search purposes only.

Join the TIBCO Community
TIBCO Community is a collaborative space for users to share knowledge and support one another in making the best use of TIBCO products and services. There are several TIBCO WebFOCUS resources in the community.

  • From the Home page, select Predict: WebFOCUS to view articles, questions, and trending articles.
  • Select Products from the top navigation bar, scroll, and then select the TIBCO WebFOCUS product page to view product overview, articles, and discussions.
  • Request access to the private WebFOCUS User Group (login required) to network with fellow members.

Former myibi community members should have received an email on 8/3/22 to activate their user accounts to join the community. Check your Spam folder for the email. Please get in touch with us at community@tibco.com for further assistance. Reference the community FAQ to learn more about the community.


Focal Point    Focal Point Forums  Hop To Forum Categories  WebFOCUS/FOCUS Forum on Focal Point     [SOLVED] Custom Tool Tip (font size, font style etc) on a Bubble JSCHART

Read-Only Read-Only Topic
Go
Search
Notify
Tools
[SOLVED] Custom Tool Tip (font size, font style etc) on a Bubble JSCHART
 Login/Join
 
Member
posted
Hi,
I'm trying to figure out how I can change the layout (background, font and size) of the tooltip in a bubble chart. (format jschart)

If I use after *GRAPH_JS:
  
setToolTipMode (true); 
setUserToolTip ([SL] - Budget: [YV] - Membership: [XV] - Num. NDG: [ZV]); 

setToolTipFontName ('Times New Roman'); 
setToolTipFontSize (5); setToolTipFontStyle (2); 

the tolltip is not modified in size or in font.

if i use instead:
  
htmlToolTip: {enabled: true}, 
   series: [
    {series: 'reset', tooltip: 'auto'}, 
                       ], 


htmlToolTip: {enabled: true, 
    style: {background: '# f9f9f9'}, 
    autoTitleFont: 'bold 10pt Times New Roman', 
    autoContentFont: 'italic 8pt Verdana' 
}, 


the tolltip is changed in font , in size and background.

In the second case, the label of Z-Axis Title does not match "Num. NDG." See image below



How can I resolve this issue? I would like the label of z_Axis was the same label [ZV] used in setUserToolTip.

Thanks in advance

This message has been edited. Last edited by: dr.herojos,


WebFOCUS 8.2 Relase 8203 Build Gen 43
DataMigrator 8203M Gen Number 1337
Windows, All Outputs
 
Posts: 23 | Location: Bari - Italy | Registered: October 20, 2013Report This Post
<nick z>
posted
You can use the function callback to modify your tooltip. Your HTML can include 'style' attributes with CSS in it.

Here is an example that works in WF8008 using CAR file:
 
ENGINE INT CACHE SET ON


-DEFAULTH &WF_STYLE_UNITS='PIXELS';
-DEFAULTH &WF_STYLE_HEIGHT='405.0';
-DEFAULTH &WF_STYLE_WIDTH='770.0';

-DEFAULTH &WF_TITLE='WebFOCUS Report';
GRAPH FILE ibisamp/CAR
-* Created by Info Assist for Graph
SUM CAR.BODY.RETAIL_COST
CAR.BODY.DEALER_COST
CAR.BODY.SALES
BY CAR.ORIGIN.COUNTRY
ON GRAPH PCHOLD FORMAT JSCHART
ON GRAPH SET HTMLENCODE ON
ON GRAPH SET GRAPHDEFAULT OFF
ON GRAPH SET ARGRAPHENGIN JSCHART
ON GRAPH SET VZERO OFF
ON GRAPH SET UNITS &WF_STYLE_UNITS
ON GRAPH SET HAXIS &WF_STYLE_WIDTH
ON GRAPH SET VAXIS &WF_STYLE_HEIGHT
ON GRAPH SET GRMERGE ADVANCED
ON GRAPH SET GRMULTIGRAPH 0
ON GRAPH SET GRLEGEND 1
ON GRAPH SET GRXAXIS 0
ON GRAPH SET LOOKGRAPH BUBBLE
ON GRAPH SET AUTOFIT ON
ON GRAPH SET STYLE *
*GRAPH_SCRIPT

setPieDepth(0);
setPieTilt(0);
setDepthRadius(0); 
setCurveFitEquationDisplay(false); 
setPlace(true); 
setUseSeriesShapes(true);
setUseDefaultBubbleMarker(false);
setBubbleSizeMode(true);
setScaleMustIncludeZero(getX1Axis(), false);
setScaleMustIncludeZero(getY1Axis(), false);
setScaleMustIncludeZero(getY2Axis(), false);
setMarkerSizeDefault(60); 

*END
INCLUDE=IBFS:/FILE/IBI_HTML_DIR/javaassist/intl/EN/ENIADefault_combine.sty,$
TYPE=REPORT, TITLETEXT=&WF_TITLE.QUOTEDSTRING, $
*GRAPH_SCRIPT

setReportParsingErrors(false);
setSelectionEnableMove(false);
-*setToolTipMode (true); 
-*setUserToolTip ([SL] - Budget: [YV] - Membership: [XV] - Num. NDG: [ZV]); 

*END
*GRAPH_JS

  series: [
{
series: 'reset',
tooltip: function(value, seriesID) {
                return  '<SPAN STYLE="color: green; background-color:blue; font-size: 14pt">' + this.getSeries(seriesID).label +'<br />' + ' '+ 'RETAIL_COST:' + this.formatNumber(value[0],'$#.##') +'<br />' + '  DEALER_COST: ' + this.formatNumber(value[1],'$#.##')  +'<br />' + ' SIZE: ' + this.formatNumber(value[2],'#.##');
}

}
],

htmlToolTip: {enabled: true, 
    style: {background: 'red'}

}




*END 

ENDSTYLE
END

-RUN

 


This code does not contain any CSS styling, because when I added the styling it actually styled this page Smiler

But right after return, you can add your normal CSS styling.

Thanks.

This message has been edited. Last edited by: <Kathryn Henning>,
 
Report This Post
Member
posted Hide Post
Hi,
thanks for your reply.

If I use the function, all the labels are correct, but I can only change the background of the tooltip. (in your case red). I can not change the font style and size of font.


in your example if I add:
  
htmlToolTip: {enabled: true, 
     style: {background: 'red'}, 
     autoTitleFont: 'bold 10pt Times New Roman', 
     autoContentFont: 'italic 8pt Verdana' 
}, 


I can only change the background. How can I also change the style of the font and size?

Thanks in advance


WebFOCUS 8.2 Relase 8203 Build Gen 43
DataMigrator 8203M Gen Number 1337
Windows, All Outputs
 
Posts: 23 | Location: Bari - Italy | Registered: October 20, 2013Report This Post
<nick z>
posted
Can't show the styling.
It keeps styling this page.

Can you give me your e-mail?
Or is there a way to add css code here?
 
Report This Post
Member
posted Hide Post
Very Good. Works very well this solution.

 

  series: [
{
series: 'reset',
tooltip: function(value, seriesID) {
                return  '<SPAN STYLE="color: green; background-color:blue; font-size: 14pt">' + this.getSeries(seriesID).label +'<br />' + ' '+ 
'RETAIL_COST:' + this.formatNumber(value[0],'$#.##') +'<br />' + '
  DEALER_COST: ' + this.formatNumber(value[1],'$#.##')  +'<br />' + ' SIZE: ' + this.formatNumber(value[2],'#.##');
}

}
],

htmlToolTip: {enabled: true, 
    style: {background: 'red'}

}


p.s. if you want put script code on thin forum you can use this tag
   

[CODE] 
put your code here: '<SPAN STYLE="color: green; background-color:blue; font-size: 14pt">'   


[/CODE]

This message has been edited. Last edited by: dr.herojos,


WebFOCUS 8.2 Relase 8203 Build Gen 43
DataMigrator 8203M Gen Number 1337
Windows, All Outputs
 
Posts: 23 | Location: Bari - Italy | Registered: October 20, 2013Report This Post
Member
posted Hide Post
Hi,

Is it possible to do this in a Bar Chart?

I've tried to change to bar chart but the values in the tooltip are always "NaN".

As anybody experienced this?

Thanks,
Bruno


WebFOCUS 8.0.08
Windows, All Outputs
 
Posts: 20 | Registered: July 21, 2014Report This Post
<Kathryn Henning>
posted
Hi Bruno,

Per product support, a value of "NaN" in a tooltip should not be received. Please open a case on InfoResponse Online so that we can review this further.

Thanks and regards,

Kathryn
 
Report This Post
<nick z>
posted
Hi Bruno,
Before you open a case, please try the following:

 

ENGINE INT CACHE SET ON


-DEFAULTH &WF_STYLE_UNITS='PIXELS';
-DEFAULTH &WF_STYLE_HEIGHT='405.0';
-DEFAULTH &WF_STYLE_WIDTH='770.0';

-DEFAULTH &WF_TITLE='WebFOCUS Report';
GRAPH FILE CAR
-* Created by Info Assist for Graph
SUM CAR.BODY.RETAIL_COST
CAR.BODY.DEALER_COST
CAR.BODY.SALES
BY CAR.ORIGIN.COUNTRY
ON GRAPH PCHOLD FORMAT JSCHART
ON GRAPH SET HTMLENCODE ON
ON GRAPH SET GRAPHDEFAULT OFF
ON GRAPH SET ARGRAPHENGIN JSCHART
ON GRAPH SET VZERO OFF
ON GRAPH SET UNITS &WF_STYLE_UNITS
ON GRAPH SET HAXIS &WF_STYLE_WIDTH
ON GRAPH SET VAXIS &WF_STYLE_HEIGHT
ON GRAPH SET GRMERGE ADVANCED
ON GRAPH SET GRMULTIGRAPH 0
ON GRAPH SET GRLEGEND 0
ON GRAPH SET GRXAXIS 1
ON GRAPH SET LOOKGRAPH VBAR
ON GRAPH SET AUTOFIT ON
ON GRAPH SET STYLE *
*GRAPH_SCRIPT

setPieDepth(0);
setPieTilt(0);
setDepthRadius(0); 
setCurveFitEquationDisplay(false); 
setPlace(true); 
setUseSeriesShapes(true);
setUseDefaultBubbleMarker(false);
setBubbleSizeMode(true);
setScaleMustIncludeZero(getX1Axis(), false);
setScaleMustIncludeZero(getY1Axis(), false);
setScaleMustIncludeZero(getY2Axis(), false);
setMarkerSizeDefault(60); 

*END
INCLUDE=IBFS:/FILE/IBI_HTML_DIR/javaassist/intl/EN/ENIADefault_combine.sty,$
TYPE=REPORT, TITLETEXT=&WF_TITLE.QUOTEDSTRING, $
*GRAPH_SCRIPT

setReportParsingErrors(false);
setSelectionEnableMove(false);
-*setToolTipMode (true); 
-*setUserToolTip ([SL] - Budget: [YV] - Membership: [XV] - Num. NDG: [ZV]); 

*END
*GRAPH_JS

 series: [
    {'series': 'reset',   
                   tooltip: function(d,s,g){    
                        
                            return '<span style="color: green; background-color:blue; font-size: 14pt"> '  + this.groupLabels[g] + ' <br />' + this.getSeries(s).label + ' ' + this.formatNumber(d,'$#.##')+ '</span>'; }
     },
       ], 
 
htmlToolTip: {enabled: true, 
    style: {background: 'red'}

}




*END 

ENDSTYLE
END

-RUN



 



Thanks.
 
Report This Post
Member
posted Hide Post
Hi nickz,

Thank you for your reply.

What you sent only shows one value

the d value
  
this.formatNumber(d,'$#.##')


What I'm trying to show is values that are in the SUM
GRAPH FILE CAR
-* Created by Info Assist for Graph
SUM CAR.BODY.RETAIL_COST
CAR.BODY.DEALER_COST
CAR.BODY.SALES
BY CAR.ORIGIN.COUNTRY


That works in bubble and not on vbar.

Thanks,
Bruno


WebFOCUS 8.0.08
Windows, All Outputs
 
Posts: 20 | Registered: July 21, 2014Report This Post
<nick z>
posted
Hi Bruno,
Bubble and BAR are 2 very different Chart types.
You need all 3 values, x, y and size in order to make up a Bubble. So when you hover over a Bubble, all 3 values are available to you.
However, for a BAR chart, each measure is its own BAR. When you hover over 1 BAR, you will only get information about that BAR.
In my BAR example, when you hover over the first BAR for any of the countries, you will see the name of the COUNTRY for Example ENGLAND, the name of the series for example DEALER_COST and the data(d) value of that series for example 45,319.
Are you not getting this correctly?
Are you expecting to see all 3 measures(DEALER_COST, RETAIL_COST and SALES) when you hover over a BAR?

Thank you.
 
Report This Post
  Powered by Social Strata  

Read-Only Read-Only Topic

Focal Point    Focal Point Forums  Hop To Forum Categories  WebFOCUS/FOCUS Forum on Focal Point     [SOLVED] Custom Tool Tip (font size, font style etc) on a Bubble JSCHART

Copyright © 1996-2020 Information Builders