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] ToolTip on a Map Chart
Go
New
Search
Notify
Tools
Reply
  
[SOLVED] ToolTip on a Map Chart
 Login/Join
 
Guru
posted
I have a graph that sums up sales by the 2-character state code, and outputs a US choropleth
map. If I don't do anything, the default tooltip when you hover shows the state code and the sales number. I want to alter the value to show as currency, and maybe add a line break. I've seen examples using the function callbacks, and I tried that. It works fine for the sales number, but I cannot get the state code to display. Does anyone know what syntax will display the actual value of your BY field in a tooltip? Group label does not do it. Thanks.

EDIT -> I changed the chart type to a bar chart, and the group label part of the function callback returns the correct value, but when you're using a map, it doesn't!

Time to open (another) case...

This message has been edited. Last edited by: Mike in DeLand,


Webfocus 8
Windows, Linux
 
Posts: 251 | Location: Palm Coast, FL | Registered: February 05, 2010Reply With QuoteReport This Post
Master
posted Hide Post
I'm running the same scenario as you, and seeing the same issue (tooltip function callback arguments do not seem to return 'State').

When I do a view source I see an array of state codes and populations:
...
chart.set({
// The following properties were generated by the Reporting Server:
data: [
    ['CA', 5555555.00],
    ['IL', 123456789.00],
    ['IN', 223333.00],
    ['MN', 112222.00],
    ['NE', 40000000.00],
    ['NY', 222222.00],
    ['SD', 80000000.00],
    ['WI', 60000000.00]
],
...  

However, I don't see anything returned in the callback function, that would support creating a pointer to the correct value in the array.

Here is an example, 'hard coding' a pointer to 'CA' [state = chart.data[0][0];]:

-* File map01.fex
-*
-* Create State Population test data.  
-*
APP FI STATEPOP DISK STATEPOP.MAS (LRECL 80
-RUN
-WRITE STATEPOP
-WRITE STATEPOP FILE=STATEPOP,SUFFIX=FOC
-WRITE STATEPOP SEGNAME=SEG1
-WRITE STATEPOP FIELD=STATE,,A20,A20,$
-WRITE STATEPOP FIELD=POPULATION,,I9,A9,$
-RUN
CREATE FILE STATEPOP
MODIFY FILE STATEPOP
FIXFORM STATE/A20 POPULATION/A9
DATA
IL                  123456789
WI                   60000000
MN                     112222
IN                     223333
CA                    5555555
NY                     222222
NE                   40000000
SD                   80000000
END
-RUN
-*
-* Create Map of state populations.  
-*
GRAPH FILE STATEPOP
SUM POPULATION
BY STATE
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 0
ON GRAPH SET GRXAXIS 1
ON GRAPH SET LOOKGRAPH CHOROPLETH
ON GRAPH SET AUTOFIT ON
ON GRAPH SET STYLE *
*GRAPH_SCRIPT
setPieDepth(0);
setPieTilt(0);
setDepthRadius(0);
setCurveFitEquationDisplay(false);
setPlace(true);
setPlace(true); setToolTipStyle("html5");
*END
INCLUDE=endeflt.sty,$
TYPE=REPORT, TITLETEXT='WebFOCUS Report', $
*GRAPH_SCRIPT
setReportParsingErrors(false);
setSelectionEnableMove(false);
setDisplay(getLegendArea(),true);
*GRAPH_JS
"mapProperties": {
 "engine": "leaflet",
 "leaflet": {
  "overlayLayers": [{
   "title": "United States of America",
   "dataLookup": "properties.state_abbr",
   "layerInfo": {
    "maxZoom": "-1",
    "minZoom": "-1",
    "type": "regions"
   },
   "type": "tdg",
   "url": function(){ return tdgchart.getScriptPath() + 'map/US.json'}
  }],
  "controls": [
   {"control": "L.Control.Layers"},
   {
    "control": "L.Control.Scale",
    "options": {
     "imperial": true,
     "metric": true
    }
   }
  ],
  "baselayers": [{
   "title": "OpenStreetMap",
   "layerInfo": {
    "maxZoom": 8,
    "minZoom": 0,
    "attribution": function(){ return "&|copy; <a target='_blank' href='http://www.InformationBuilders.com'>Information Builders</a> | " +
					"&|copy; <a target='_blank' href='http://www.openstreetmap.org/copyright'>OpenStreetMap</a> contributors";}
   },
   "url": function(){ return tdgchart.getScriptPath().replace(/\/tdg\/.*/,'') + '/maptiles/osm/{z}/{x}/{y}.png'}
  }]
 }
},
"heatmapProperties": {"dataColors": [
  "#D7191C",
  "#FDAE61",
  "#FFFFBF",
  "#A6D96A",
  "#1A9641"
 ]},
*END
-*
*GRAPH_JS
htmlToolTip: {enabled: true, snap:true}
*END
-*
*GRAPH_JS
series: [
{series: 'reset', tooltip: function(v, s, g) {
state = chart.data[0][0];
return '[b]State: [/b] ' + state +
       '<br>' +  
       '[b]Population: [/b]' + this.formatNumber(v,'#');}}
]
*END
ENDSTYLE
END  

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: 780 | Registered: April 23, 2003Reply With QuoteReport This Post
Guru
posted Hide Post
Yep - just change the chart type to VBAR and the tooltips will show up properly (without your hardcoding of course).
I opened a case and am waiting for IBI's response. I bet it's "fixed in the next release".


Webfocus 8
Windows, Linux
 
Posts: 251 | Location: Palm Coast, FL | Registered: February 05, 2010Reply With QuoteReport This Post
Platinum Member
posted Hide Post
quote:

state = chart.data[0][0];


This line showed [object Object] for me in the tooltip.

I spit out all properties to see what we had in there:

for (var prop in this.data[s][g]){ 	
   alert(prop);
}


I did a minor tool tip tweak to show see the 2 character state:

chart.data[s][g].name


webFOCUS 8203
WindowsServer 2012 R2,
Excel, PDF, HTML, ActiveReports
 
Posts: 124 | Location: Minnesota | Registered: August 26, 2013Reply With QuoteReport This Post
Guru
posted Hide Post
WORKS!!!

IBI owes you some money.

Thank a million!


Webfocus 8
Windows, Linux
 
Posts: 251 | Location: Palm Coast, FL | Registered: February 05, 2010Reply With QuoteReport This Post
Master
posted Hide Post
I changed from PCHOLD to HOLD, and open in a -HTMLFORM.

The -HTMLFORM contains a HTML5 doctype and a meta X-UA-Compatible tag.

Now the GROUP ID - g - is populating AOK with the state ids.

-* File map01.fex
-*
-* Create State Population test data.  
-*
APP FI STATEPOP DISK STATEPOP.MAS (LRECL 80
-RUN
-WRITE STATEPOP
-WRITE STATEPOP FILE=STATEPOP,SUFFIX=FOC
-WRITE STATEPOP SEGNAME=SEG1
-WRITE STATEPOP FIELD=STATE,,A20,A20,$
-WRITE STATEPOP FIELD=POPULATION,,I9,A9,$
-RUN
CREATE FILE STATEPOP
MODIFY FILE STATEPOP
FIXFORM STATE/A20 POPULATION/A9
DATA
IL                  123456789
WI                   60000000
MN                     112222
IN                     223333
CA                    5555555
NY                     222222
NE                   40000000
SD                   80000000
END
-RUN
-*
-* Create Map of state populations.  
-*
GRAPH FILE STATEPOP
SUM POPULATION
BY STATE
ON GRAPH HOLD AS TEST 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 0
ON GRAPH SET GRXAXIS 1
ON GRAPH SET LOOKGRAPH CHOROPLETH
ON GRAPH SET AUTOFIT ON
ON GRAPH SET STYLE *
*GRAPH_SCRIPT
setPieDepth(0);
setPieTilt(0);
setDepthRadius(0);
setCurveFitEquationDisplay(false);
setPlace(true);
setPlace(true); setToolTipStyle("html5");
*END
INCLUDE=endeflt.sty,$
TYPE=REPORT, TITLETEXT='WebFOCUS Report', $
*GRAPH_SCRIPT
setReportParsingErrors(false);
setSelectionEnableMove(false);
setDisplay(getLegendArea(),true);
*GRAPH_JS
"mapProperties": {
 "engine": "leaflet",
 "leaflet": {
  "overlayLayers": [{
   "title": "United States of America",
   "dataLookup": "properties.state_abbr",
   "layerInfo": {
    "maxZoom": "-1",
    "minZoom": "-1",
    "type": "regions"
   },
   "type": "tdg",
   "url": function(){ return tdgchart.getScriptPath() + 'map/US.json'}
  }],
  "controls": [
   {"control": "L.Control.Layers"},
   {
    "control": "L.Control.Scale",
    "options": {
     "imperial": true,
     "metric": true
    }
   }
  ],
  "baselayers": [{
   "title": "OpenStreetMap",
   "layerInfo": {
    "maxZoom": 8,
    "minZoom": 0,
    "attribution": function(){ return "&|copy; <a target='_blank' href='http://www.InformationBuilders.com'>Information Builders</a> | " +
					"&|copy; <a target='_blank' href='http://www.openstreetmap.org/copyright'>OpenStreetMap</a> contributors";}
   },
   "url": function(){ return tdgchart.getScriptPath().replace(/\/tdg\/.*/,'') + '/maptiles/osm/{z}/{x}/{y}.png'}
  }]
 }
},
"heatmapProperties": {"dataColors": [
  "#D7191C",
  "#FDAE61",
  "#FFFFBF",
  "#A6D96A",
  "#1A9641"
 ]},
*END
-*
*GRAPH_JS
htmlToolTip: {enabled: true, snap:true}
*END
-*
*GRAPH_JS
series: [
{series: 'reset', tooltip: function(v, s, g) {
return '<b>State: </b> ' + g + 
       '<br>' +  
       '<b>Population: </b>' + this.formatNumber(v,'#');}}
]
*END
ENDSTYLE
END 
-RUN
-HTMLFORM BEGIN
<!DOCTYPE html>
<html>
<head>
 <meta http-equiv="X-UA-Compatible" content="IE=11;" />
 <title>Population by State</title>
</head>
<body>
 !IBI.FIL.TEST;
</body>
</html>
-HTMLFORM END 
-EXIT   


Hopefully this helps you, Mike.

Thanks stur0063! The .name property might be a 8.1 thing, I am on 8.0, but your post got me thinking... :-)




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: 780 | Registered: April 23, 2003Reply With QuoteReport This Post
Guru
posted Hide Post
I tried your exact thing and mine doesn't display the states - it's doing the same thing it did before. I'll stick with your original solution though! Thanks again.


Webfocus 8
Windows, Linux
 
Posts: 251 | Location: Palm Coast, FL | Registered: February 05, 2010Reply With QuoteReport This Post
Master
posted Hide Post
Little off subject, but thought you might want to know if you didn't already...

When you mouse over the states/charts you get the bright yellow.. To change that to be less dramatic, open file

\\servername\Webfocus\ibi\WebFOCUS81\ibi_html\javaassist\intl\EN\ENIADefault_combine.sty


Search for
"color": "yellow",


Delete that line completely from the style sheet.

Should look like:
"mouseOverIndicator": {
      "enabled": true,
      "marker":{"size": 0}
},


This will cascade across all your maps/charts.



- FOCUS Man, just FOCUS!
-----------------------------
Product: WebFOCUS
Version: 8.1.04
Server: Windows 2008 Server
 
Posts: 578 | Registered: October 01, 2014Reply With QuoteReport This Post
Guru
posted Hide Post
Yep, done did dat already (after I got my eyesight back)


Webfocus 8
Windows, Linux
 
Posts: 251 | Location: Palm Coast, FL | Registered: February 05, 2010Reply With QuoteReport This Post
Gold member
posted Hide Post
I am having a similar requirement and was able to show state and series with edited tooltip as below:

series:[
{series: 'reset', tooltip: function(v,s,g) {

state = chart.data[s][g].name;
    x = this.data[0][g].value;
    y = this.data[1][g].value;
	z = this.data[2][g].value;
    return 'State' + ': ' + state + '<br>' +
	this.getSeries(0).label + ': ' + x + '<br>' +
    this.getSeries(1).label + ': ' + y + '<br>' +
	this.getSeries(2).label + ': ' + z + '<br>'
    ;}, dataLabels:{visible:true}},
]


But when i zoom in maps these values are retrieved as undefined. Is there any way to get array values identified in zoom level.

Thanks,
Rajna


WebFOCUS 8.1.05
Windows
Excel, PDF, HTML
 
Posts: 65 | Location: Flowood , MS | Registered: May 11, 2011Reply With QuoteReport This Post
Gold member
posted Hide Post
On load for first time the custom tooltip works but in zoom level its showing undefined values.


ENGINE INT CACHE SET ON
-DEFAULTH &WF_STYLE_UNITS='PIXELS';
-DEFAULTH &WF_STYLE_HEIGHT='405.0';
-DEFAULTH &WF_STYLE_WIDTH='770.0';
-DEFAULTH &WF_TITLE='WebFOCUS Report';

GRAPH FILE STATEPOP
-* Created by Info Assist for Graph
SUM CNT_MBR AS 'Member Count'
    CNT_SUB AS 'Subscriber Count'
	CNT_DEP AS 'Dependant Count'
BY ST_CD AS 'State'
ON GRAPH PCHOLD FORMAT JSCHART
ON GRAPH SET VZERO OFF
ON GRAPH SET HTMLENCODE ON
ON GRAPH SET GRAPHDEFAULT OFF
ON GRAPH SET GRWIDTH 1
ON GRAPH SET UNITS &WF_STYLE_UNITS
ON GRAPH SET HAXIS &WF_STYLE_WIDTH
ON GRAPH SET VAXIS &WF_STYLE_HEIGHT
ON GRAPH SET GRMERGE ADVANCED
ON GRAPH SET GRMULTIGRAPH 0
ON GRAPH SET GRLEGEND 0
ON GRAPH SET GRXAXIS 1
ON GRAPH SET LOOKGRAPH CHOROPLETH
ON GRAPH SET AUTOFIT ON
ON GRAPH SET STYLE *
*GRAPH_SCRIPT
setPieDepth(0);
setPieTilt(0);
setDepthRadius(0);
setCurveFitEquationDisplay(false);
setPlace(true);
*END
INCLUDE=IBFS:/FILE/IBI_HTML_DIR/javaassist/intl/EN/ENIADefault_combine.sty,$
TYPE=REPORT, TITLETEXT=&WF_TITLE.QUOTEDSTRING, $
*GRAPH_SCRIPT
setPlace(true); setToolTipStyle("html5");
setReportParsingErrors(false);
setSelectionEnableMove(false);
setDisplay(getLegendArea(),true);
-*setGradientPinLeftColor0(getLegendArea(),new Color(126,245,255));
-*setGradientPinRightColor0(getLegendArea(),new Color(126,245,255));
-*setGradientPinLeftColor2(getLegendArea(),new Color(126,245,255));
-*setGradientPinRightColor2(getLegendArea(),new Color(126,245,255));
-*setFillType(getLegendArea(),2);
-*setGradientNumPins(getLegendArea(),2);
-*setGradientPinPosition0(getLegendArea(),0.0);
-*setGradientPinPosition1(getLegendArea(),1.0);
*GRAPH_JS
"mapProperties": {
    "leaflet": {
        "overlayLayers": [{
                "dataLookup": "properties.state_abbr",
                "layerInfo": {
                    "type": "regions"
                },
                "title": "US-all",
                "type": "tdg",
                "url": function(){ return tdgchart.getScriptPath().replace(/\/tdg\/.*/,'/web_resource/map/') +'US-all.json'}
            }],
        "baselayers": [{
                "layerInfo": {
                    "maxZoom": 8,
                    "attribution": function(){  return "&|copy; <a target='_blank' href='http://www.InformationBuilders.com'>Information Builders</a> | " +
					"&|copy; <a target='_blank' href='http://www.openstreetmap.org/copyright'>OpenStreetMap</a> contributors"; }
                },
                "title": "OpenStreetMap",
                "url": function(){  return tdgchart.getScriptPath().replace(/\/tdg\/.*/,'') + '/maptiles/osm/{z}/{x}/{y}.png' }
            }]
    }
},
"colorScale": {
-*    "colors": ["#D7191C","#FDAE61","#FFFFBF","#A6D96A","#1A9641"]
-*	 "colors": ["aquamarine","skyblue","lightblue","cadetblue","blue","darkblue"]
"colors": ["#3FE0D0","#B0DFE5","#95C8D8","#7EF9FF","#588BAE","#89CFF0","#81D8D0","#4682B4","#57A0D3","#4F97A3","#7285A5","#73C2FB","#008081","#4C516D","#6593F5","#008ECC","#0F52BA","#0080FF","#1034A6","#0E4D92","#000080","#003152","#1D2951","#111E6C"]
}
,
series: [
-*      {series: 'reset', tooltip: function(v, s, g) {return 'state: ' + chart.data[s][g].name +'<br/>Series: ' + s +'<br/>Group: ' + g;}},
{series: 'reset', tooltip: function(v,s,g) {

state = chart.data[s][g].name;
    x = this.data[0][g].value;
-*    x = this.formatNumber(x, '$###,###,###.');
    y = this.data[1][g].value;
	z = this.data[2][g].value;
-*    y = this.formatNumber(y, '$###,###,###.');
    return 'State' + ': ' + state + '<br>' +
	this.getSeries(0).label + ': ' + x + '<br>' +
    this.getSeries(1).label + ': ' + y + '<br>' +
	this.getSeries(2).label + ': ' + z + '<br>'
    ;}, dataLabels:{visible:true}},
]
*END
ENDSTYLE
END
-RUN



Thanks,
Rajna


WebFOCUS 8.1.05
Windows
Excel, PDF, HTML
 
Posts: 65 | Location: Flowood , MS | Registered: May 11, 2011Reply With QuoteReport This Post
Gold member
posted Hide Post
I have opened a fresh thread as this was Titled as Solved -- Please update if any response in here

http://forums.informationbuild...947010196#2947010196


WebFOCUS 8.1.05
Windows
Excel, PDF, HTML
 
Posts: 65 | Location: Flowood , MS | Registered: May 11, 2011Reply With QuoteReport This Post
  Powered by Social Strata  
 

Focal Point    Focal Point Forums  Hop To Forum Categories  WebFOCUS/FOCUS Forum on Focal Point     [SOLVED] ToolTip on a Map Chart

Copyright © 1996-2018 Information Builders, leaders in enterprise business intelligence.