Focal Point
[Solved] WF8 - JSCHART - How to Add NON-Graphed Data to Tooltip.

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

October 06, 2014, 03:56 PM
David Briars
[Solved] WF8 - JSCHART - How to Add NON-Graphed Data to Tooltip.
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
October 06, 2014, 04:20 PM
Tom Flynn
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
October 06, 2014, 05:17 PM
David Briars
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
October 06, 2014, 10:08 PM
David Briars
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  

October 07, 2014, 05:20 AM
Alan B
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
October 07, 2014, 09:40 AM
David Briars
@Alan - Excellent code share.

@Tom - Thanks again.
January 23, 2019, 12:25 PM
John_Edwards
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.



January 23, 2019, 03:57 PM
John_Edwards
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.