[SOLVED] ToolTip on a Map Chart

May 20, 2016, 01:56 PM

Mike in DeLand

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,

May 22, 2016, 06:03 PM

David Briars

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,

May 23, 2016, 08:42 AM

Mike in DeLand

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".

May 23, 2016, 09:20 AM

stur0063

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

May 23, 2016, 09:40 AM

Mike in DeLand

WORKS!!!

IBI owes you some money.

Thank a million!

May 23, 2016, 10:00 AM

David Briars

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... :-)

May 23, 2016, 10:33 AM

Mike in DeLand

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.

May 23, 2016, 02:27 PM

GavinL

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.

May 23, 2016, 02:38 PM

Mike in DeLand

Yep, done did dat already (after I got my eyesight back)

January 02, 2019, 12:05 PM

Rajna Nannat

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

January 02, 2019, 12:07 PM

Rajna Nannat

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