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     [SHARING] Bubble Tool Tip

Read-Only Read-Only Topic
Go
Search
Notify
Tools
[SHARING] Bubble Tool Tip
 Login/Join
 
Platinum Member
posted
I searched FocalPoint for info on bubble tool tip formatting. I found some pretty decent stuff - but nothing that was working in 8105. I figured I would share how to style the tool tip using the X, Y and sizing parameter of a bubble graph. Hopefully this is helpful to someone.

Most of this is code that I found on FocalPoint - but I never saw how to grab x,y and size from the bubbles. Turns out - it's pretty easy.

GRAPH FILE CAR
SUM
     CAR.BODY.DEALER_COST
     CAR.BODY.RETAIL_COST
     CAR.BODY.SALES
BY COUNTRY
ON GRAPH PCHOLD FORMAT JSCHART
ON GRAPH SET LOOKGRAPH BUBBLE
ON GRAPH SET AUTOFIT ON
ON GRAPH SET STYLE *
*GRAPH_JS
title: {
	text: 'Bubble by Country',
	visible: true,
	//align: 'center',
	//font: 'bold 10pt Sans-Serif',
	//color: 'black',
},




series: [
		{series: 'reset', showDataValues:true,

		tooltip: function(d, s, g)
			{



				//Good Stuff
				var daBy = this.getSeries(s).label;	//From the by 

				//Find out what properites I can get my mitts on
				/*
				if(s==0 && g == 0){
					for (var prop in this.data[s][g])
					{
 				   		alert(prop);
					}
				}
				*/

				//Bubble has an x,y and size
				var xMetric = this.data[s][g].x;
				var yMetric = this.data[s][g].y;
				var sizeMetric = this.data[s][g].size;  //This is the same as the d paramater in this function


				//I want to toggle the color to red if sales < 50k
				var totalColor = '';
				var totalColorClose = '';
				if(sizeMetric < 50000)
				{
					totalColor = '<font color=\'red\'>[b]';
					totalColorClose = '[/b]</font>';
				}
				else
				{
					totalColor = '<font color=\'green\'>[b]';
					totalColorClose = '[/b]</font>';
				}


				//Build my tooltip

				var tabData = '<table style=\'border: 1px dotted blue\'>';				
				tabData += '<tr><td colspan=2>[b]' + daBy + '[/b]</td></tr><tr><td>[b]DEALER_COST[/b]</td><td>' + this.formatNumber(xMetric,'$#.##') + '</td></tr><tr><td>[b]RETAIL_COST [/b]</td><td>' + this.formatNumber(yMetric ,'$#.##') + '</td></tr><tr><td>[b]Sales[/b]</td><td>' + totalColor + this.formatNumber(sizeMetric,'$#.##') + totalColorClose + '</td></tr>';
				tabData += '</table>';
				return tabData;
			}
		}
]

*END

INCLUDE=IBFS:/FILE/IBI_HTML_DIR/javaassist/intl/EN/ENIADefault_combine.sty,$
ENDSTYLE
END



webFOCUS 8207.15
WindowsServer 2019
 
Posts: 120 | Location: Minnesota | Registered: August 26, 2013Report This Post
Master
posted Hide Post
Pretty slick, but you have

"[b]" and "[/b]"

in various places instead of

"<b>" and "</b>".

Also, the INCLUDE near the bottom is giving me an error for some reason, even though I use that same INCLUDE in other files I have that run okay.

Here's the adjusted code, with the INCLUDE commented out:

GRAPH FILE CAR
SUM
     CAR.BODY.DEALER_COST
     CAR.BODY.RETAIL_COST
     CAR.BODY.SALES
BY COUNTRY
ON GRAPH PCHOLD FORMAT JSCHART
ON GRAPH SET LOOKGRAPH BUBBLE
ON GRAPH SET AUTOFIT ON
ON GRAPH SET STYLE *
*GRAPH_JS
title: {
	text: 'Bubble by Country',
	visible: true,
	//align: 'center',
	//font: 'bold 10pt Sans-Serif',
	//color: 'black',
},




series: [
		{series: 'reset', showDataValues:true,

		tooltip: function(d, s, g)
			{



				//Good Stuff
				var daBy = this.getSeries(s).label;	//From the by 

				//Find out what properites I can get my mitts on
				/*
				if(s==0 && g == 0){
					for (var prop in this.data[s][g])
					{
 				   		alert(prop);
					}
				}
				*/

				//Bubble has an x,y and size
				var xMetric = this.data[s][g].x;
				var yMetric = this.data[s][g].y;
				var sizeMetric = this.data[s][g].size;  //This is the same as the d paramater in this function


				//I want to toggle the color to red if sales < 50k
				var totalColor = '';
				var totalColorClose = '';
				if(sizeMetric < 50000)
				{
					totalColor = '<font color=\'red\'><b>';
					totalColorClose = '</b></font>';
				}
				else
				{
					totalColor = '<font color=\'green\'><b>';
					totalColorClose = '</b></font>';
				}


				//Build my tooltip

				var tabData = '<table style=\'border: 1px dotted blue\'>';				
				tabData += '<tr><td colspan=2><b>' + daBy + '</b></td></tr><tr><td><b>DEALER_COST</b></td><td>' + this.formatNumber(xMetric,'$#.##') + '</td></tr><tr><td><b>RETAIL_COST </b></td><td>' + this.formatNumber(yMetric ,'$#.##') + '</td></tr><tr><td><b>Sales</b></td><td>' + totalColor + this.formatNumber(sizeMetric,'$#.##') + totalColorClose + '</td></tr>';
				tabData += '</table>';
				return tabData;
			}
		}
]

*END

-* INCLUDE=IBFS:/FILE/IBI_HTML_DIR/javaassist/intl/EN/ENIADefault_combine.sty,$
ENDSTYLE
END

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


App Studio
WebFOCUS 8.1.05M
Windows, All Outputs
 
Posts: 594 | Location: Michigan | Registered: September 04, 2015Report This Post
Master
posted Hide Post
quote:
Pretty slick, but you have "" and "" in various places instead of "" and "".

Sorry, my first line should have been:

Pretty slick, but you have "[b]" and "[/b]" in various places instead of "<b>" and "</b>".

For some reason, there was a forum glitch while I posted and I don't have an edit button to fix my previous post.

UPDATE - It appears there is an insidious bug in this forum that converts HTML bold tags to bracketed ones.

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


App Studio
WebFOCUS 8.1.05M
Windows, All Outputs
 
Posts: 594 | Location: Michigan | Registered: September 04, 2015Report This Post
Expert
posted Hide Post
Nice.

Good One


Waz...

Prod:WebFOCUS 7.6.10/8.1.04Upgrade:WebFOCUS 8.2.07OS:LinuxOutputs:HTML, PDF, Excel, PPT
In Focus since 1984
Pity the lost knowledge of an old programmer!

 
Posts: 6347 | Location: 33°49'23.0"S, 151°11'41.0"E | Registered: October 31, 2006Report This Post
Virtuoso
posted Hide Post
I suggest to replace the generated markup with modern semantic HTML (meaning that you don't describe how it looks, but what it's purpose is, with purpose-based style definitions in a CSS file):
return '<div class="tooltip">' +
  '<div class="label">' + daBy + '</div>' +
  '<span class="field">' + 'DEALER_COST' + '</span><span>' + this.formatNumber(xMetric,'$#.##') + '</span>' +
'</div>';


With CSS:
div.tooltip { border: 1px dotted blue; }
div.tooltip .label,
div.tooltip .field { font-weight: bold; }


BTW, you're not using the variables totalColor & totalColorClose, but those too would be better suited for a class.

And finally, I'd put most of that function in a javascript include somewhere and just call that with the specifics for generating this particular tooltip here. Say, something like:
tooltip: function (d, s, g) { createTooltip(d, s, g, 'DEALER_COST'); }


WebFOCUS 8.1.03, Windows 7-64/2008-64, IBM DB2/400, Oracle 11g & RDB, MS SQL-Server 2005, SAP, PostgreSQL 11, Output: HTML, PDF, Excel 2010
: Member of User Group Benelux :
 
Posts: 1669 | Location: Enschede, Netherlands | Registered: August 12, 2010Report This Post
Platinum Member
posted Hide Post
For the record - all I wanted to share was:

				//Bubble has an x,y and size
				var xMetric = this.data[s][g].x;
				var yMetric = this.data[s][g].y;
				var sizeMetric = this.data[s][g].size;  //This is the same as the d paramater in this function


This was the "bit" that I couldn't find on FocalPoint.


webFOCUS 8207.15
WindowsServer 2019
 
Posts: 120 | Location: Minnesota | Registered: August 26, 2013Report This Post
Guru
posted Hide Post
And that "bit" is pure gold!

Thanks.


Webfocus 8
Windows, Linux
 
Posts: 258 | Location: Palm Coast, FL | Registered: February 05, 2010Report 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     [SHARING] Bubble Tool Tip

Copyright © 1996-2020 Information Builders