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. Moving forward, myibi is our community platform to learn, share, and collaborate. We have the same Focal Point forum categories in myibi, so you can continue to have all new conversations there. If you need access to myibi, contact us at myibi@ibi.com and provide your corporate email address, company, and name.


Connect to myibi
Focal Point    Focal Point Forums  Hop To Forum Categories  WebFOCUS/FOCUS Forum on Focal Point     [SOLVED] Tool Tip font customization

Read-Only Read-Only Topic
Go
Search
Notify
Tools
[SOLVED] Tool Tip font customization
 Login/Join
 
Platinum Member
posted
Hi Everyone,

I am trying to customize the font on the tooltip. I need to display the metric value in bold font in the tool tip like Revenue: $2350, keeping the metric title 'Revenue' in normal font. I have included my code below, Please provide your inputs on this.

Note: I have customized my tooltip to show both the Revenue and Gross Profit values to display when hovered on purpose.

 
ENGINE INT CACHE SET ON
SET PAGE-NUM=NOLEAD
-DEFAULTH &WF_HTMLENCODE=OFF;
SET HTMLENCODE=&WF_HTMLENCODE

SET ARGRAPHENGINE=JSCHART
-DEFAULTH &WF_EMPTYREPORT=ON;
SET EMPTYREPORT=&WF_EMPTYREPORT

SET EMBEDHEADING=ON
SET GRAPHDEFAULT=OFF
-DEFAULTH &WF_STYLE_UNITS='PIXELS';
-DEFAULTH &WF_STYLE_HEIGHT='405.0';
-DEFAULTH &WF_STYLE_WIDTH='770.0';
-DEFAULTH &WF_TITLE='WebFOCUS Report';
GRAPH FILE wf_retail_lite
SUM 
REVENUE_US
GROSS_PROFIT_US
COMPUTE REV_TOOL_TIP/D20.2M=REVENUE_US;
COMPUTE PROFIT_TOOL_TIP/D20.2M=GROSS_PROFIT_US;
BY TIME_DATE AS 'Transaction Date'
WHERE TIME_DATE GE '20171215';
WHERE TIME_DATE LE '20171231';
WHERE PRODUCT_CATEGORY EQ 'Computers';
ON GRAPH PCHOLD FORMAT JSCHART
ON GRAPH SET VZERO ON
ON GRAPH SET GRWIDTH 1
ON GRAPH SET UNITS &WF_STYLE_UNITS
ON GRAPH SET HAXIS &WF_STYLE_WIDTH
ON GRAPH SET VAXIS &WF_STYLE_HEIGHT
ON GRAPH SET LOOKGRAPH BAR
ON GRAPH SET AUTOFIT ON
ON GRAPH SET STYLE *
*GRAPH_SCRIPT

setPieDepth(0);
setPieTilt(0);
setDepthRadius(0);
setCurveFitEquationDisplay(false);
setPlace(true);

*END
INCLUDE=IBFS:/FILE/IBI_HTML_DIR/ibi_themes/Warm.sty,$
TYPE=REPORT,CHART-SERIES-LAYOUT=ABSOLUTE,TITLETEXT=&WF_TITLE.QUOTEDSTRING, $
TYPE=DATA, COLUMN=N1, BUCKET=x-axis, $
TYPE=DATA, COLUMN=N2, BUCKET=y-axis, $
TYPE=DATA, COLUMN=N3, BUCKET=y-axis, $
TYPE=DATA, COLUMN=REV_TOOL_TIP, BUCKET=tooltip, $
TYPE=DATA, COLUMN=PROFIT_TOOL_TIP, BUCKET=tooltip, $
TYPE=DATA, COLUMN=TIME_DATE, BUCKET=tooltip,$

*GRAPH_JS
blaProperties: {
   absoluteInset: 0.7
  }
*END
*GRAPH_SCRIPT

setReportParsingErrors(false);
setSelectionEnableMove(false);
setDisplay(getO1Title(),false);
setDisplay(getY1Title(),false);
setTextRotation(getO1Label(),0);
setDisplay(getY1MajorGrid(),true);
setFillColor(getSeries(0),new Color(0,191,147));
setTransparentBorderColor(getSeries(0), true);
setFillColor(getSeries(1),new Color(0,90,126));
setTransparentBorderColor(getSeries(1), true);
setTextRotation(getO1Label(),0);
setLegendPosition(1);
setTextFormatPreset(getY1Label(),6);
setAutoSkip(getO1Label(),2);
setPlaceSkip(getO1Label(),0);
setSkipBegin(getO1Label(),0);
setSkipCount(getO1Label(),6);
*GRAPH_JS_FINAL
series: [
{series: 'reset', "tooltip":"Your Revenue:"+ '{{tooltip1}}'+"<br>"+ "Your Gross Profit:"+ '{{tooltip2}}'+"<br>"+ "Transaction Date:"+ '{{tooltip3}}'}
],
"xaxis": {
    "title": {
        "visible": false
    }
},
"yaxis": {
    "title": {
        "visible": false
    }
}
*END
ENDSTYLE
END
-RUN
-HTMLFORM BEGIN
    <style>

			div#jschart_HOLD_0 div {
            border: 0 !important;
		}
    </style>
-HTMLFORM END


 

This message has been edited. Last edited by: FP Mod Chuck,


Webfocus 8105/8202
Windows
All Outputs
 
Posts: 106 | Registered: June 26, 2018Report This Post
Member
posted Hide Post
Hi,
Below is solution of your code.
Use bold tag (b) just before and after the tooltip value.

For example:-

series: [
{series: 'reset', "tooltip":"Your Revenue:" + " "+ '{{tooltip1}}'+ "" + "
"+ "Your Gross Profit:"+""+ '{{tooltip2}}'+"[/b]"+"
"+ "Transaction Date:"+ ""+'{{tooltip3}}'+""}
],


8207.06, Window 7
 
Posts: 7 | Location: Webfocus 8207.06 | Registered: May 30, 2019Report This Post
Platinum Member
posted Hide Post
Thank you very much Purushottam. b tag worked for me.


Webfocus 8105/8202
Windows
All Outputs
 
Posts: 106 | Registered: June 26, 2018Report 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] Tool Tip font customization

Copyright © 1996-2020 Information Builders