Focal Point
[SOLVED] How to customize Bar Chart Tooltips to Display Value & PCT(Like Pie Charts)

This topic can be found at:
https://forums.informationbuilders.com/eve/forums/a/tpc/f/7971057331/m/6367057876

October 07, 2015, 12:23 PM
DavSmith
[SOLVED] How to customize Bar Chart Tooltips to Display Value & PCT(Like Pie Charts)
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
October 07, 2015, 04:36 PM
GavinL
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
October 08, 2015, 08:16 AM
GavinL
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
October 08, 2015, 09:40 AM
DavSmith
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
October 08, 2015, 10:06 AM
GavinL
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
October 08, 2015, 10:48 AM
Tom Flynn
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
October 08, 2015, 11:48 AM
<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


October 08, 2015, 12:39 PM
Tom Flynn
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
October 08, 2015, 01:02 PM
GavinL
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
October 08, 2015, 03:43 PM
David Briars
@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
October 08, 2015, 04:03 PM
GavinL
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
October 08, 2015, 04:14 PM
David Briars
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
October 08, 2015, 04:25 PM
DavSmith
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
October 08, 2015, 05:09 PM
Tom Flynn
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
October 08, 2015, 05:36 PM
DavSmith
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
October 08, 2015, 05:38 PM
Tom Flynn
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
October 09, 2015, 09:56 AM
<nick z>
@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.
October 09, 2015, 11:35 AM
David Briars
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
October 09, 2015, 11:51 AM
Tom Flynn
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
October 09, 2015, 11:57 AM
GavinL
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
October 09, 2015, 02:22 PM
David Briars
@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
October 09, 2015, 05:09 PM
DavSmith
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
October 09, 2015, 05:12 PM
Tom Flynn
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
October 12, 2015, 12:10 PM
GavinL
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
October 12, 2015, 10:04 PM
David Briars
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,
October 22, 2015, 11:17 AM
DavSmith
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
October 23, 2015, 12:20 PM
David Briars
Thanks for the follow up, Dave.

Nice use of the isNaN JavaScript function, to handle the array values.
October 23, 2015, 12:29 PM
Tom Flynn
I knew he was creative! Good One


Tom Flynn
WebFOCUS 8.1.05 - PROD/QA
DB2 - AS400 - Mainframe
August 02, 2016, 02:01 PM
Mike in DeLand
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
August 29, 2018, 05:51 PM
nsk110483
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