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,

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

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

Thanks.

This message has been edited. Last edited by: <Kathryn Henning>,

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

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?

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,

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

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

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.

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

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.