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] WF8 - JSCHART - How to Add NON-Graphed Data to Tooltip.

Read-Only Read-Only Topic
Go
Search
Notify
Tools
[Solved] WF8 - JSCHART - How to Add NON-Graphed Data to Tooltip.
 Login/Join
 
Master
posted
The following code creates a scatterplot:
APP PREPENDPATH IBISAMP
DEFINE FILE GGSALES
 MYCOUNT/I5 = DECODE SEQ_NO(1 11
                            2 12
			 3 13);
 STBIRD/A15  = DECODE SEQ_NO(1 'Eagle'
                             2 'Osprey'
			 3 'Hawk');
END
GRAPH FILE GGSALES
SUM    SEQ_NO
BY     ST
ACROSS MYCOUNT
IF SEQ_NO LE 3
ON GRAPH PCHOLD FORMAT JSCHART
ON GRAPH SET VZERO OFF
ON GRAPH SET HTMLENCODE ON
ON GRAPH SET GRAPHDEFAULT OFF
ON GRAPH SET GRMERGE ADVANCED
ON GRAPH SET GRMULTIGRAPH 0
ON GRAPH SET GRLEGEND 1
ON GRAPH SET GRXAXIS 1
ON GRAPH SET LOOKGRAPH SCATTERS
ON GRAPH SET AUTOFIT ON
ON GRAPH SET STYLE *
*GRAPH_JS
 series: [
          {series: 'reset', tooltip: function(d, s, g) {return ' State: '
	  + this.getSeries(s).label
           + ' Seq No: ' + d[1]
           + ' Mycount: ' + d[0];},
	  marker: {shape:'circle', size: 24}},
         ]
*END
ENDSTYLE
END  

The tooltip for the markers looks something like this:
State: NY Seq No: 3 Mycount: 13 

I'd like the tooltips to look something like this:
State: NY State Bird: Hawk Seq No: 3 Mycount: 13 

I am not sure how to add data from the STBIRD field, into the tooltip, without changing my graph.

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
Expert
posted Hide Post
Never done this before:
  
-SET &ECHO = ALL;
DEFINE FILE IBISAMP/GGSALES
 MYCOUNT/I5 = DECODE SEQ_NO(1 11
                            2 12
			 3 13);
 STBIRD/A15  = DECODE SEQ_NO(1 'Eagle'
                             2 'Osprey'
			 3 'Hawk');
 ST_BIRD/A50 = ST || (' ' | 'State Bird: ' | STBIRD);
END
GRAPH FILE IBISAMP/GGSALES
SUM    SEQ_NO
BY     ST_BIRD
ACROSS MYCOUNT
IF SEQ_NO LE 3
ON GRAPH PCHOLD FORMAT JSCHART
ON GRAPH SET VZERO OFF
ON GRAPH SET HTMLENCODE ON
ON GRAPH SET GRAPHDEFAULT OFF
ON GRAPH SET GRMERGE ADVANCED
ON GRAPH SET GRMULTIGRAPH 0
ON GRAPH SET GRLEGEND 1
ON GRAPH SET GRXAXIS 1
ON GRAPH SET LOOKGRAPH SCATTERS
ON GRAPH SET AUTOFIT ON
ON GRAPH SET STYLE *
*GRAPH_JS
 series: [
          {series: 'reset', tooltip: function(d, s, g) {return ' State: '
	  + this.getSeries(s).label
           + ' Seq No: ' + d[1]
           + ' Mycount: ' + d[0];},
	  marker: {shape:'circle', size: 24}},
         ]
*END
ENDSTYLE
END  
-EXIT


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
Thank you so much for your help, Tom.

To create an example, I had removed the data label settings.

Here is the same code with the data label settings:
APP PREPENDPATH IBISAMP
DEFINE FILE GGSALES
 MYCOUNT/I5 = DECODE SEQ_NO(1 11
                            2 12
			3 13);
 STBIRD/A15  = DECODE SEQ_NO(1 'Eagle'
                             2 'Osprey'
			 3 'Hawk');
END
GRAPH FILE GGSALES
SUM    SEQ_NO
BY     ST
ACROSS MYCOUNT
IF SEQ_NO LE 3
ON GRAPH PCHOLD FORMAT JSCHART
ON GRAPH SET VZERO OFF
ON GRAPH SET HTMLENCODE ON
ON GRAPH SET GRAPHDEFAULT OFF
ON GRAPH SET GRMERGE ADVANCED
ON GRAPH SET GRMULTIGRAPH 0
ON GRAPH SET GRLEGEND 1
ON GRAPH SET GRXAXIS 1
ON GRAPH SET LOOKGRAPH SCATTERS
ON GRAPH SET AUTOFIT ON
ON GRAPH SET STYLE *
-*
-* Create Data Labels and Tool Tips.  
-*
*GRAPH_JS
legend: {visible:false},
dataLabels: {
  visible: true,
  position: 'right',
  font: 'italic 10pt Sans-Serif',
  color: 'black',
  formatCallback: function(d, s){return this.getSeries(s).label;}
            },
series: [{series:'all', showDataValues:true},
         {series:'all', marker: {shape:'circle', size: 24}},
         {series: 'reset', tooltip: function(d, s, g) {return ' State: '
	  + this.getSeries(s).label
           + ' Seq No: ' + d[1]
           + ' Mycount: ' + d[0];}},
	    ]
*END
ENDSTYLE
END

With the data labels I see 'NY' next to the NY marker, in my example.

My users want to see the 'NY' on the graph, and then the 'State: NY State Bird: Hawk Seq No: 3 Mycount: 13' upon hover.

With the concatenation technique you taught me, which I tried, they see the 'expanded' value upon hover (awesome!) and on the graph itself (dang).

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
I did go ahead and create a concatenated field consisting of both of my data elements.

Then in the GRAPH_JS section I use the JavaScript substr method to pull the appropriate component of the string:

APP PREPENDPATH IBISAMP
DEFINE FILE GGSALES
 MYCOUNT/I5 = DECODE SEQ_NO(1 11
                            2 12
			    3 13);
 STBIRD/A15  = DECODE SEQ_NO(1 'Eagle'
                             2 'Osprey'
			     3 'Hawk');
 LEGEND/A50  = ST | '*' | STBIRD;
END
GRAPH FILE GGSALES
SUM    SEQ_NO
BY     LEGEND
ACROSS MYCOUNT
IF SEQ_NO LE 3
ON GRAPH PCHOLD FORMAT JSCHART
ON GRAPH SET VZERO OFF
ON GRAPH SET HTMLENCODE ON
ON GRAPH SET GRAPHDEFAULT OFF
ON GRAPH SET GRMERGE ADVANCED
ON GRAPH SET GRMULTIGRAPH 0
ON GRAPH SET GRLEGEND 1
ON GRAPH SET GRXAXIS 1
ON GRAPH SET LOOKGRAPH SCATTERS
ON GRAPH SET AUTOFIT ON
ON GRAPH SET STYLE *
-*
-* Create Data Labels and Tool Tips.  
-*
*GRAPH_JS
legend: {visible:false},
dataLabels: {
  visible: true,
  position: 'right',
  font: 'italic 10pt Sans-Serif',
  color: 'black',
  formatCallback: function(d, s){return this.getSeries(s).label.substr(0,2);}
            },
series: [{series:'all', showDataValues:true},
         {series:'all', marker: {shape:'circle', size: 24}},
         {series: 'reset', tooltip: function(d, s, g) {
		     return ' State: ' + this.getSeries(s).label.substr(0,2) + '<br>'
			      + ' Bird: ' + this.getSeries(s).label.substr(3,15) + '<br>'  
		              + ' Seq No: ' + d[1] + '<br>'
                              + ' Mycount: ' + d[0];}},
	    ]
*END
ENDSTYLE
END  
 
Posts: 822 | Registered: April 23, 2003Report This Post
Virtuoso
posted Hide Post
Depending on the complexity of the data, there are JS based methods:
series: [
          {series: 'reset', tooltip: function(d, s, g) {
            var birdArray = ['null','Eagle','Osprey','Hawk'];
            return ' State: ' + this.getSeries(s).label + ' State Bird: ' + birdArray[d[1]] + ' Seq No: ' + d[1] + ' Mycount: ' + d[0];
            },

or


series: [
          {series: 'reset', tooltip: function(d, s, g) {
            if (d[1]==1) {return ' State: ' + this.getSeries(s).label + ' State Bird: Eagle Seq No: ' + d[1] + ' Mycount: ' + d[0];} else
            if (d[1]==2) {return ' State: ' + this.getSeries(s).label + ' State Bird: Osprey Seq No: ' + d[1] + ' Mycount: ' + d[0];} else
            if (d[1]==3) {return ' State: ' + this.getSeries(s).label + ' State Bird: Hawk Seq No: ' + d[1] + ' Mycount: ' + d[0];}
            },



Alan.
WF 7.705/8.007
 
Posts: 1451 | Location: Portugal | Registered: February 07, 2007Report This Post
Master
posted Hide Post
@Alan - Excellent code share.

@Tom - Thanks again.
 
Posts: 822 | Registered: April 23, 2003Report This Post
Virtuoso
posted Hide Post
This is pulling the wrong label for me. I'm doing a vertical bar stack and want to pull the label of each data point that runs along the bottom, i.e., the values in LEGEND in the example below:

 
GRAPH FILE TOTAL_DAY
SUM CUMULATIVE_LICENSES_CORRECTED AS 'Licenses Corrected To-Date (Cumulative)'
BY LEGEND
ON GRAPH PCHOLD FORMAT JSCHART


I try to reach that field like this --

*GRAPH_JS
legend: {visible:false},
series: [
   {series: 0, color: 'blue', 
            tooltip: function(d, s, g) {
		     return ' Date: ' + this.getSeries(s).label.substr(0,10) + '<br>'
			      + ' Corrections Today: ' + this.getSeries(s).label.substr(11,25) + '<br>'  
		          + ' Corrections To Date: ' + this.getSeries(s).label.substr(26,35)}},

]
*END


. . . but instead I get substrings of "Licenses Corrected To-Date (Cumulative)" -- the name of the column running up the left side. Does anyone know how to get the value on the other axis instead? I've knocked this around quite a bit and can't get a hold of it.



 
Posts: 1012 | Location: At the Mast | Registered: May 17, 2007Report This Post
Virtuoso
posted Hide Post
So I managed to get this half-running. I piggyback the data values I need onto the x-axis title like this --

DEFINE FILE TOTAL_DAY ADD
LEGEND/A100 = EDIT(DATECVT(DATE_RECORDED, 'MDYY', 'A8MDYY'), '99/99/9999') | '@' | EDIT(CUMULATIVE_LICENSES_CORRECTED) | '@' | EDIT(LICENSES_CORRECTED_THIS_DAY);
END

And then cut it up for parts in the javascript function in the graph_js code.

Corrections_Today = this.getGroupLabel(g).substr(21,9);
Corrections_Today = this.formatNumber(Corrections_Today, '###,###,###.');

return ' Date: ' + this.getGroupLabel(g).substr(0,10)
+ ' Corrections Today: ' + Corrections_Today
+ ' Corrections To Date: ' + Corrections_To_Date}},

But at that point I have an ugly graph label, and I can't seem to change it. So if someone can tell me how to get the setGraphLabel to work, or how to get the two data elements into my tooltips text via another method, I'm all ears. I see all the functions, but a lot of them appear to be turned off, or so badly documented (getData in particular) that I can't decipher how to use them.



 
Posts: 1012 | Location: At the Mast | Registered: May 17, 2007Report 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     [Solved] WF8 - JSCHART - How to Add NON-Graphed Data to Tooltip.

Copyright © 1996-2020 Information Builders