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] How to customize Bar Chart Tooltips to Display Value & PCT(Like Pie Charts)
Page 1 2 

Read-Only Read-Only Topic
Go
Search
Notify
Tools
[SOLVED] How to customize Bar Chart Tooltips to Display Value & PCT(Like Pie Charts)
 Login/Join
 
Platinum Member
posted
Question: How can we customize Bar Chart Tooltips to display series Value and Pct? (Like Pie Charts)
I've scoured Focal Point and the most current WF8 Charting manuals and could find nothing on having an option for TOOLTIPS to add the percentage for the summed value for each bar as it does automatically for pie chart slices.
In WF8, we can now format and style tooltips and even add some text using HTML tooltips and/or JS Callback coding but no option to add (percentage) so that if your are summing SALES, you can display not only the SALES total for that bar but also see the Pct in parens just like how the Pie chart does it.

Has anyone been able to pull this off and if you have, can you provide an example using the CAR db?

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



In FOCUS since 1985 - WF 8.009/8.104 Win 8 Outputs: ALL of 'em! Adapters: Sql Server Teradata Oracle
 
Posts: 161 | Location: Dallas, TX | Registered: February 20, 2009Report This Post
Master
posted Hide Post
You mean like this?

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
SUM CAR.BODY.SALES
BY CAR.COMP.CAR
WHERE CAR.BODY.SALES GT 0;
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 *
INCLUDE=IBFS:/FILE/IBI_HTML_DIR/javaassist/intl/EN/ENIADefault_combine.sty,$
TYPE=REPORT, TITLETEXT=&WF_TITLE.QUOTEDSTRING, $
*GRAPH_SCRIPT
setReportParsingErrors(false);
setSelectionEnableMove(false);
*END
*GRAPH_JS
htmlToolTip: {
	enabled: true,
-*    snap: true,
    style: {
		border: 'solid black',
		background: '#99FFCC',
	},
},
series: [
		{
		 	series: 'reset',
			pattern: 6,
			tooltip: function(d, s, g)
			{
				var allTitles = 'Series,Car,Model';
				var totalColor = '';
				var totalColorClose = '';

				//get raw series label
				var str = this.getSeries(s).label;
				//create an array from the series label.
				var res = str.split(": ");
				var titles = allTitles.split(",");
				//get the total of all groups.

				//if data value is under 10000, then turn red.
				if(d<10000)
				{
					totalColor = '<font color=\'red\'><b>';
					totalColorClose = '</b></font>';
				}
				//if data value is above 30000, then turn blue.
				else if(d>30000)
				{
					totalColor = '<font color=\'blue\'><b>';
					totalColorClose = '</b></font>';
				}

				//build the look of the ToolTip
				var tabData = '<table style=\'border: 1px dotted blue\'>';

				for(var i = 0; i < res.length; i++)
					tabData += '<tr><td style=\'\'><b>' + titles[i] + ':</b></td><td style=\'\'>' + res[i] + '</td></tr>';

				tabData += '<tr><td style=\'\'><b>Total:</b></td><td style=\'\'>' + totalColor + '$' + this.formatNumber(d, '#,#') + totalColorClose + '</td></tr>';
				tabData += '<tr><td style=\'\'><b>Group:</b></td><td style=\'\'>' + this.groupLabels[g] + '</td></tr>';
				tabData += '</table>';
				return tabData;
			}
		},
]
*END
ENDSTYLE
END

-RUN



- FOCUS Man, just FOCUS!
-----------------------------
Product: WebFOCUS
Version: 8.1.04
Server: Windows 2008 Server
 
Posts: 578 | Registered: October 01, 2014Report This Post
Master
posted Hide Post
I don't think Percentage works with Bar Charts. I've attempted it, but with no success.



- FOCUS Man, just FOCUS!
-----------------------------
Product: WebFOCUS
Version: 8.1.04
Server: Windows 2008 Server
 
Posts: 578 | Registered: October 01, 2014Report This Post
Platinum Member
posted Hide Post
Nice custom formatting on the Tooltip, Gavin! Hopefully, someone else has solved this. Thanks.



In FOCUS since 1985 - WF 8.009/8.104 Win 8 Outputs: ALL of 'em! Adapters: Sql Server Teradata Oracle
 
Posts: 161 | Location: Dallas, TX | Registered: February 20, 2009Report This Post
Master
posted Hide Post
I think I have a solution, but still working on it. It's based on putting the total into a hold file as well as all fields needed, then building a define that has all the columns needed for the tooltip.



- FOCUS Man, just FOCUS!
-----------------------------
Product: WebFOCUS
Version: 8.1.04
Server: Windows 2008 Server
 
Posts: 578 | Registered: October 01, 2014Report This Post
Expert
posted Hide Post
C'mon Mr. Smith!!! You are a creative guy!!! Smiler
  
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';
TABLE FILE IBISAMP/CAR
SUM
    CAR.BODY.SALES
WHERE CAR.BODY.SALES GT 0;
 ON TABLE SAVE
END
-RUN
-READ SAVE &SALES.I6.
-*-TYPE &SALES
-*-EXIT
GRAPH FILE IBISAMP/CAR
SUM CAR.BODY.SALES
BY CAR.COMP.CAR
WHERE CAR.BODY.SALES GT 0;
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 *
-*INCLUDE=IBFS:/FILE/IBI_HTML_DIR/javaassist/intl/EN/ENIADefault_combine.sty,$
TYPE=REPORT, TITLETEXT=&WF_TITLE.QUOTEDSTRING, $
*GRAPH_SCRIPT
setReportParsingErrors(false);
setSelectionEnableMove(false);
*END
*GRAPH_JS
htmlToolTip: {
	enabled: true,
-*    snap: true,
    style: {
		border: 'solid black',
		background: '#99FFCC',
	},
},
series: [
		{
		 	series: 'reset',
			pattern: 6,
			tooltip: function(d, s, g)
			{
				var allTitles = 'Series,Car,Model';
				var totalColor = '';
				var totalColorClose = '';

				//get raw series label
				var str = this.getSeries(s).label;
				//create an array from the series label.
				var res = str.split(": ");
				var titles = allTitles.split(",");
				//get the total of all groups.
                //    var sum = pv.sum(this.data[g], function(el){return el;});
				//if data value is under 10000, then turn red.
				if(d<10000)
				{
					totalColor = '<font color=\'red\'>[b]';
					totalColorClose = '[/b]</font>';
				}
				//if data value is above 30000, then turn blue.
				else if(d>30000)
				{
					totalColor = '<font color=\'blue\'>[b]';
					totalColorClose = '[/b]</font>';
				}

				//build the look of the ToolTip
				var tabData = '<table style=\'border: 1px dotted blue\'>';

				for(var i = 0; i < res.length; i++)
					tabData += '<tr><td style=\'\'>[b]' + titles[i] + ':[/b]</td><td style=\'\'>' + res[i] + '</td></tr>';

				tabData += '<tr><td style=\'\'>[b]Total:[/b]</td><td style=\'\'>' + totalColor + '$' + this.formatNumber(d, '#,#') + totalColorClose + '</td></tr>';
				tabData += '<tr><td style=\'\'>[b]Group:[/b]</td><td style=\'\'>' + this.groupLabels[g] + '</td></tr>';
                tabData += '<tr><td style=\'\'>[b]Percentage:[/b]</td><td style=\'\'>' + this.formatNumber(d / &SALES,'###.##%') + ' in ' + this.groupLabels[g] + '</td></tr>';
				tabData += '</table>';
				return tabData;
			}
		},
]
*END
ENDSTYLE
END
-RUN
-EXIT


Sample

Above is the link to a sample that I plagiarized...


Tom Flynn
WebFOCUS 8.1.05 - PROD/QA
DB2 - AS400 - Mainframe
 
Posts: 1972 | Location: Centennial, CO | Registered: January 31, 2006Report This Post
<nick z>
posted
Here is another way...

  
GRAPH FILE IBISAMP/CAR
SUM CAR.BODY.SALES
BY CAR.COMP.CAR
WHERE CAR.BODY.SALES GT 0;
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 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
setReportParsingErrors(false);
setSelectionEnableMove(false);
*END
*GRAPH_JS
series: [
{ "series": 'reset',
	"tooltip": function(d,s,g){
	    var valueArr = this.data[0],total=0;
		    for (var i=0 ;i<valueArr.length;i++){total+=valueArr[i].value;}
                           var sum= d / total * 100 ;
	return this.getSeries(s).label + " For " +this.getGroupLabel(g)+': '+ this.formatNumber(d, '$#,#')+ '<br>'+' Percent of Total ' +this.getSeries(s).label + ': '+sum.toFixed(2) + "%";
 	 }
  },
]

*END
ENDSTYLE
END

 
Report This Post
Expert
posted Hide Post
Hi Nick,
VERY GOOD! Much cleaner!

added this to get the values on top:
  
setDisplay(getDataTextStackedTotalOnTop(), true);
setDataTextPosition(1);
setDataTextDisplay(false);
setDisplay(getDataText(0), true);


Searched on GRAPH_JS in the Technical Library and lots of info; I am new to the GRAPH_JS syntax, so, thanks!

Tom


Tom Flynn
WebFOCUS 8.1.05 - PROD/QA
DB2 - AS400 - Mainframe
 
Posts: 1972 | Location: Centennial, CO | Registered: January 31, 2006Report This Post
Master
posted Hide Post
yea, I was just over thinking it.. I wasn't FOCUSed.. :P



- FOCUS Man, just FOCUS!
-----------------------------
Product: WebFOCUS
Version: 8.1.04
Server: Windows 2008 Server
 
Posts: 578 | Registered: October 01, 2014Report This Post
Master
posted Hide Post
@Nick - When I run the same fex as yours, the graph renders but the last line of the tooltip says:
'Percent of Total SALES: NaN%'.

As far as I can tell tracing back in the JavaScript this line, isn't yielding a valid array: valueArr = this.data[0]

This message has been edited. Last edited by: David Briars,




Pilot: WebFOCUS 8.2.06 Test: WebFOCUS 8.1.05M Prod: WebFOCUS 8.1.05M Server: Windows Server 2016/Tomcat Standalone Workstation: Windows 10/IE11+Edge Database: Oracle 12c, Netezza, & MS SQL Server 2019 Output: AHTML/XLSX/HTML/PDF/JSCHART Tools: WFDS, Repository Content, BI Portal Designer & ReportCaster
 
Posts: 822 | Registered: April 23, 2003Report This Post
Master
posted Hide Post
It's based on what your second column is. Is it a numeric field? In nick's example, SUM CAR.BODY.SALES is the second field.



- FOCUS Man, just FOCUS!
-----------------------------
Product: WebFOCUS
Version: 8.1.04
Server: Windows 2008 Server
 
Posts: 578 | Registered: October 01, 2014Report This Post
Master
posted Hide Post
Hi Gavin,

I am using the same exact code as Nick, so yes the second column is numeric, it is SALES which is an I6 in the MFD.

Dave




Pilot: WebFOCUS 8.2.06 Test: WebFOCUS 8.1.05M Prod: WebFOCUS 8.1.05M Server: Windows Server 2016/Tomcat Standalone Workstation: Windows 10/IE11+Edge Database: Oracle 12c, Netezza, & MS SQL Server 2019 Output: AHTML/XLSX/HTML/PDF/JSCHART Tools: WFDS, Repository Content, BI Portal Designer & ReportCaster
 
Posts: 822 | Registered: April 23, 2003Report This Post
Platinum Member
posted Hide Post
I'm getting same result as David Briars, NaN for the percentage in the ToolTip using Nick's code.

And Tom, who said I was smart? Smiler Nice code on figuring it out. Thanks for your input, pal.

David

This message has been edited. Last edited by: DavSmith,



In FOCUS since 1985 - WF 8.009/8.104 Win 8 Outputs: ALL of 'em! Adapters: Sql Server Teradata Oracle
 
Posts: 161 | Location: Dallas, TX | Registered: February 20, 2009Report This Post
Expert
posted Hide Post
If you are getting NaN, you need to be on a 8.1 version; didn't work for me in 8.0.07, use the &VARIABLE concept if not on a 8.1 version.

Additionally, need to change the
 [b] and [/b] to <b> and </b> 
  

the forum changes these...

Hey Dave, I KNOW you are smart, having a bit of fun!
Hope all is well at Brinker!
Tom

This message has been edited. Last edited by: Tom Flynn,


Tom Flynn
WebFOCUS 8.1.05 - PROD/QA
DB2 - AS400 - Mainframe
 
Posts: 1972 | Location: Centennial, CO | Registered: January 31, 2006Report This Post
Platinum Member
posted Hide Post
Tom, us old Focus coders are all on the down low so it's all good!

No longer at Brinker...I've moved on to Chrome River. Doing and learning some very cool things in WF there.

And thanks for tip on 8.1 vs 8.0. Your code does work in our 8.0 prod environment.

Take care.

David



In FOCUS since 1985 - WF 8.009/8.104 Win 8 Outputs: ALL of 'em! Adapters: Sql Server Teradata Oracle
 
Posts: 161 | Location: Dallas, TX | Registered: February 20, 2009Report This Post
Expert
posted Hide Post
Yea, we are a dying breed.
Well, Brinker misses you, I'm sure. You may not miss them, though...
Glad you are still in the WebFOCUS World!

This message has been edited. Last edited by: Tom Flynn,


Tom Flynn
WebFOCUS 8.1.05 - PROD/QA
DB2 - AS400 - Mainframe
 
Posts: 1972 | Location: Centennial, CO | Registered: January 31, 2006Report This Post
<nick z>
posted
@David Briars,
Sorry about that.
I always assume the latest production release, which right now is WF8105.
I should remember to mention it when I post my code.

Here is a code that would work in WF800x release:

GRAPH FILE IBISAMP/CAR
SUM CAR.BODY.SALES
BY CAR.COMP.CAR
WHERE CAR.BODY.SALES GT 0;
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 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
setReportParsingErrors(false);
setSelectionEnableMove(false);
*END
*GRAPH_JS
series: [
{ "series": 'reset',
	"tooltip": function(d,s,g){
	    var valueArr = this.data[0],total=0;
		    for (var i=0 ;i<valueArr.length;i++){total+=valueArr[i];}
                           var sum= d / total * 100 ;
debugger;
	return this.getSeries(s).label + " For " +this.getGroupLabel(g)+': '+ this.formatNumber(d, '$#,#')+ '<br>'+' Percent of Total ' +this.getSeries(s).label + ': '+sum.toFixed(2)+ "%";
 	 }
  },
]

*END
ENDSTYLE
END





Basically the only change is to remove .value from valueArr[i].value

Everything else is the same.

Thanks.
Nick.
 
Report This Post
Master
posted Hide Post
Thank you Nick.

The updated sample works like a champ in my 8.0.07 environment.




Pilot: WebFOCUS 8.2.06 Test: WebFOCUS 8.1.05M Prod: WebFOCUS 8.1.05M Server: Windows Server 2016/Tomcat Standalone Workstation: Windows 10/IE11+Edge Database: Oracle 12c, Netezza, & MS SQL Server 2019 Output: AHTML/XLSX/HTML/PDF/JSCHART Tools: WFDS, Repository Content, BI Portal Designer & ReportCaster
 
Posts: 822 | Registered: April 23, 2003Report This Post
Expert
posted Hide Post
Yep, works great in 8.0, breaks in 8.1...
So, if you use this API, you'll have to remember to fix in it in all programs where utilized in 8.1.
Sad IBI, very sad!!! Get tired of basic things not being passed to the next version and having to fix.
My concept works in both versions...
Your choice...

This message has been edited. Last edited by: Tom Flynn,


Tom Flynn
WebFOCUS 8.1.05 - PROD/QA
DB2 - AS400 - Mainframe
 
Posts: 1972 | Location: Centennial, CO | Registered: January 31, 2006Report This Post
Master
posted Hide Post
What does this return in 8.0?

var sum = pv.sum(this.data[g], function(el){return el;});



- FOCUS Man, just FOCUS!
-----------------------------
Product: WebFOCUS
Version: 8.1.04
Server: Windows 2008 Server
 
Posts: 578 | Registered: October 01, 2014Report This Post
Master
posted Hide Post
@Gavin-
var sum = pv.sum(this.data[g], function(el){return el;});
alert(sum);  

Returns a message box with the value 208420 (the total SALES) in 8.0.07.

Does it work the same in 8.1.x?




Pilot: WebFOCUS 8.2.06 Test: WebFOCUS 8.1.05M Prod: WebFOCUS 8.1.05M Server: Windows Server 2016/Tomcat Standalone Workstation: Windows 10/IE11+Edge Database: Oracle 12c, Netezza, & MS SQL Server 2019 Output: AHTML/XLSX/HTML/PDF/JSCHART Tools: WFDS, Repository Content, BI Portal Designer & ReportCaster
 
Posts: 822 | Registered: April 23, 2003Report This Post
Platinum Member
posted Hide Post
Confirmed the new Nick Z mod works in 8.009. Thanks to Tom for testing 8.1. Since we are moving to that soon, it's good to know it does not work there.

Can anyone hazard a guess as to what changed in 8.1 from 8.0 to makes it not work? At least Tom's code works in both versions.



In FOCUS since 1985 - WF 8.009/8.104 Win 8 Outputs: ALL of 'em! Adapters: Sql Server Teradata Oracle
 
Posts: 161 | Location: Dallas, TX | Registered: February 20, 2009Report This Post
Expert
posted Hide Post
quote:
Basically the only change is to remove .value from valueArr[i].value

Everything else is the same.


David,
Nick gave the above explanation in his new code for 8.0.
I would also assume IBI changed the JS module...
Tom


Tom Flynn
WebFOCUS 8.1.05 - PROD/QA
DB2 - AS400 - Mainframe
 
Posts: 1972 | Location: Centennial, CO | Registered: January 31, 2006Report This Post
Master
posted Hide Post
quote:
var sum = pv.sum(this.data[g], function(el){return el;});
alert(sum);

Returns a message box with the value 208420 (the total SALES) in 8.0.07.

Does it work the same in 8.1.x?


@David, no.. Which is why I had changed my example on my original page to work the other way.. I didn't realize that didn't work with 8.0. arrrggg..



- FOCUS Man, just FOCUS!
-----------------------------
Product: WebFOCUS
Version: 8.1.04
Server: Windows 2008 Server
 
Posts: 578 | Registered: October 01, 2014Report This Post
Master
posted Hide Post
Excellent thread everyone.

Here is an example posting the percentage of total within the risers, as well as, the tooltips:

-* File tooltipcalculation.fex
-*
-* Get Total Sales
-*
TABLE FILE CAR
SUM SALES AS 'Sales'
ON TABLE SAVE AS SVSALES
END
-RUN
-READ SVSALES &SALESTOTAL.A6.
-*
-* Create Graph
-*
GRAPH FILE IBISAMP/CAR
SUM   CAR.BODY.SALES 
BY    CAR.COMP.CAR
WHERE CAR.BODY.SALES GT 0;
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 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 *
  INCLUDE = warm, $
-* Graph Titles.  
*GRAPH_JS
  title: {text: 'International Car Sales', visible: true},
  subtitle: {text: 'Sales Across Car', visible: true},
  yaxis: {title: {visible: true, text:'Sales'}},
  xaxisOrdinal: {title: {visible: true, text:'Car'}}
*END
-* Tooltip and Datalabels.  
*GRAPH_JS
 series: [
  {"series": 'reset', showDataValues:true,
    "tooltip": function(d,s,g) {
                var sum= d / &SALESTOTAL * 100 ;
                ttmessage  = '[b]' + this.getSeries(s).label + " For " + this.getGroupLabel(g)+'[/b]: ';
                ttmessage += this.formatNumber(d, '$#,#')+ '<br>[b]' + ' Percent of Total ';
                ttmessage += this.getSeries(s).label + '[/b]: '+sum.toFixed(2)+ "%";
                return ttmessage;
               }
  },
 ],
 dataLabels: { visible: true,
               color:'white',
               font: 'Bold 12pt Sans-Serif',
               position: 'inside',
               displayMode: 'seriesLabel',
               formatCallback: function(d, s, g) {
                                var sum= d / &SALESTOTAL * 100 ;
                                dlmessage = sum.toFixed(2)+ "%";
                                return dlmessage;
                               }
 }
*END
ENDSTYLE
END
-EXIT

This message has been edited. Last edited by: David Briars,
 
Posts: 822 | Registered: April 23, 2003Report This Post
Platinum Member
posted Hide Post
Thanks to all for their input. Our final solution for adding the PCT to the Bar Chart tooltip:

-* File tooltipcalculation.fex
-*
-* Get Total Sales
-*
TABLE FILE CAR
SUM SALES AS 'Sales'
ON TABLE SAVE AS SVSALES
END
-RUN
-READ SVSALES &SALESTOTAL.A6.
-*
-* Create Graph
-*
GRAPH FILE IBISAMP/CAR
SUM   CAR.BODY.SALES 
BY    CAR.COMP.CAR
WHERE CAR.BODY.SALES GT 0;
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 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 *
-*  INCLUDE = warm, $
-* Graph Titles.  
*GRAPH_JS
  title: {text: 'International Car Sales', visible: true},
  subtitle: {text: 'Sales Across Car', visible: true},
  yaxis: {title: {visible: true, text:'Sales'}},
  xaxisOrdinal: {title: {visible: true, text:'Car'}}
*END
-* Tooltip and Datalabels.  
*GRAPH_JS
series: [
    { "series": 'reset',
        "tooltip": function(d,s,g){
            var valueArr = this.data[0],total=0;
            for (var i=0 ;i<valueArr.length;i++){total+=isNaN(valueArr[i])?valueArr[i].value:valueArr[i];}
            var sum= d / total * 100 ;
            debugger;
            return this.getSeries(s).label + " for " + this.getGroupLabel(g)+': '+ this.formatNumber(d, '$#,#') + '<br>Percent of Total ' + this.getSeries(s).label + ': ' + sum.toFixed(2) + "%";
        }
    },
]
*END
ENDSTYLE
END



In FOCUS since 1985 - WF 8.009/8.104 Win 8 Outputs: ALL of 'em! Adapters: Sql Server Teradata Oracle
 
Posts: 161 | Location: Dallas, TX | Registered: February 20, 2009Report This Post
Master
posted Hide Post
Thanks for the follow up, Dave.

Nice use of the isNaN JavaScript function, to handle the array values.
 
Posts: 822 | Registered: April 23, 2003Report This Post
Expert
posted Hide Post
I knew he was creative! Good One


Tom Flynn
WebFOCUS 8.1.05 - PROD/QA
DB2 - AS400 - Mainframe
 
Posts: 1972 | Location: Centennial, CO | Registered: January 31, 2006Report This Post
Guru
posted Hide Post
quote:
Originally posted by nick z:
Here is another way...

  
GRAPH FILE IBISAMP/CAR
SUM CAR.BODY.SALES
BY CAR.COMP.CAR
WHERE CAR.BODY.SALES GT 0;
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 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
setReportParsingErrors(false);
setSelectionEnableMove(false);
*END
*GRAPH_JS
series: [
{ "series": 'reset',
	"tooltip": function(d,s,g){
	    var valueArr = this.data[0],total=0;
		    for (var i=0 ;i<valueArr.length;i++){total+=valueArr[i].value;}
                           var sum= d / total * 100 ;
	return this.getSeries(s).label + " For " +this.getGroupLabel(g)+': '+ this.formatNumber(d, '$#,#')+ '<br>'+' Percent of Total ' +this.getSeries(s).label + ': '+sum.toFixed(2) + "%";
 	 }
  },
]

*END
ENDSTYLE
END



Thank you! This saved my bacon today.


Webfocus 8
Windows, Linux
 
Posts: 258 | Location: Palm Coast, FL | Registered: February 05, 2010Report This Post
Gold member
posted Hide Post
quote:
Originally posted by David Briars:
Thanks for the follow up, Dave.

Nice use of the isNaN JavaScript function, to handle the array values.



isNaN function did not work for me. For some reason My values were passed as Text and the Tooltip displayed it as NAN%.
to get around it I had to convert it to number first.

 
var valueArr = this.data[1],total=0;
for (var i=0 ;i<valueArr.length;i++){
	var isnum = parseFloat(valueArr[i]);
	total+=isnum;
} 


In Focus since 2008
WebFOCUS 8.2.0.1
Windows 7 - IE,Chrome,Firefox
Excel, PDF, HTML, AHTML, XML
JavaScript, jQuery, D3.js, Highcharts
 
Posts: 79 | Location: New York | Registered: February 04, 2010Report This Post
  Powered by Social Strata Page 1 2  

Read-Only Read-Only Topic

Focal Point    Focal Point Forums  Hop To Forum Categories  WebFOCUS/FOCUS Forum on Focal Point     [SOLVED] How to customize Bar Chart Tooltips to Display Value & PCT(Like Pie Charts)

Copyright © 1996-2020 Information Builders