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
May 16, 2020, 08:27 AM
Purushottam
Hi, Below is solution of your code. Use bold tag (b) just before and after the tooltip value.