Focal Point Banner
Community Center Education Summit Technical Support User Groups
Let's Get Social!

Facebook Twitter LinkedIn YouTube
Focal Point    Focal Point Forums  Hop To Forum Categories  WebFOCUS/FOCUS Forum on Focal Point     [SOLVED] Tool Tip font customization
Go
New
Search
Notify
Tools
Reply
  
[SOLVED] Tool Tip font customization
 Login/Join
 
Gold 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: 78 | Registered: June 26, 2018Reply With QuoteReport 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}}'+""}
],


8202M, Window 7
 
Posts: 6 | Location: Webfocus 8202M | Registered: May 30, 2019Reply With QuoteReport This Post
Gold member
posted Hide Post
Thank you very much Purushottam. b tag worked for me.


Webfocus 8105/8202
Windows
All Outputs
 
Posts: 78 | Registered: June 26, 2018Reply With QuoteReport This Post
  Powered by Social Strata  
 

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

Copyright © 1996-2018 Information Builders, leaders in enterprise business intelligence.