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

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,

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,

Nice.

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'); }

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.

And that "bit" is pure gold!

Thanks.