Focal Point Banner
Community Center Education Summit Technical Support User Groups
Let's Get Social!

Facebook Twitter LinkedIn YouTube
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.
Go
New
Search
Notify
Tools
Reply
  
[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,




Test: WebFOCUS 8.1.05M Prod: WebFOCUS 8.1.05M Server: Windows Server 2012/Tomcat Standalone Workstation: Windows 7/IE 11 Database: Oracle 12c/Netezza Output: AHTML/XLSX/HTML/PDF/JSCHART Tools: WFDS, Repository Content, BI Portal Designer, & ReportCaster

 
Posts: 759 | Registered: April 23, 2003Reply With QuoteReport This Post
Virtuoso
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 7.7.05 - PROD/QA
DB2 - AS400 - Mainframe
 
Posts: 1942 | Location: Parker, CO | Registered: January 31, 2006Reply With QuoteReport 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,




Test: WebFOCUS 8.1.05M Prod: WebFOCUS 8.1.05M Server: Windows Server 2012/Tomcat Standalone Workstation: Windows 7/IE 11 Database: Oracle 12c/Netezza Output: AHTML/XLSX/HTML/PDF/JSCHART Tools: WFDS, Repository Content, BI Portal Designer, & ReportCaster

 
Posts: 759 | Registered: April 23, 2003Reply With QuoteReport 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: 759 | Registered: April 23, 2003Reply With QuoteReport 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, 2007Reply With QuoteReport This Post
Master
posted Hide Post
@Alan - Excellent code share.

@Tom - Thanks again.
 
Posts: 759 | Registered: April 23, 2003Reply With QuoteReport This Post
Master
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: 916 | Location: At the Mast | Registered: May 17, 2007Reply With QuoteReport This Post
Master
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: 916 | Location: At the Mast | Registered: May 17, 2007Reply With QuoteReport This Post
  Powered by Social Strata  
 

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-2018 Information Builders, leaders in enterprise business intelligence.