Hello Everyone, I am trying to create a custom tooltip for a...

[LK .]

Hello Everyone,

I am trying to create a custom tooltip for a stacked bar chart. My intention is to create tooltip in such a way that no matter which stack of the bar you hover it should display the values of all the stacks. I have customized the tooltip to an extent. I have included my code which will generate the output as shown in the image below. From the output, If we hover on the ITALY stacked bar series 1(yellow) it will show only the series one value as ITALY n 4: 83% totalling 4,800 and if we hover on the series 2(blue) it will show only the series 2 calue as ITALY n 6: 80% totalling 25,400. What I am trying to do is regardless of the series that is hovered all the series values should be displayed together in a single tooltip like below. Please provide your inputs on this.

ITALY

4: 83% totalling 4,800

6: 80% totalling 25,400

Output Image:

 

Stacked_Bar_Tool_Tip.JPG1889929 33.2 KB

 

Code:

</>

ENGINE INT CACHE SET ON

SET PAGE-NUM=NOLEAD

-DEFAULTH &WF_HTMLENCODE=OFF;

SET HTMLENCODE=&WF_HTMLENCODE

SET ARGRAPHENGINE=JSCHART

-DEFAULTH &WF_EMPTYREPORT=ON;

SET EMPTYREPORT=&WF_EMPTYREPORT

SET EMBEDHEADING=ON

SET GRAPHDEFAULT=OFF

-DEFAULTH &WF_STYLE_UNITS=PIXELS;

-DEFAULTH &WF_STYLE_HEIGHT=405.0;

-DEFAULTH &WF_STYLE_WIDTH=770.0;

-DEFAULTH &WF_TITLE=WebFOCUS Report;

GRAPH FILE CAR

SUM

COMPUTE PRCNT/D11%=(DEALER_COST/RETAIL_COST)*100;

SALES/D6

COMPUTE TOOL_TIP_1/A20V=COUNTRY;

COMPUTE TOOL_TIP_2/I3=SEATS;

COMPUTE TOOL_TIP_3/A20=FTOA(PRCNT, (D11%),A20);

COMPUTE TOOL_TIP_4/A10=FTOA(SALES, (D6),A10);

-*WHERE CAR IN (BMW,ALFA ROMEO,JAGUAR);

-*WHERE SEATS GE 2;

-*WHERE SEATS LE 5;

BY SEATS

BY COUNTRY

ON GRAPH PCHOLD FORMAT JSCHART

ON GRAPH SET VZERO OFF

ON GRAPH SET UNITS &WF_STYLE_UNITS

ON GRAPH SET HAXIS &WF_STYLE_WIDTH

ON GRAPH SET VAXIS &WF_STYLE_HEIGHT

ON GRAPH SET LOOKGRAPH BAR

ON GRAPH SET AUTOFIT ON

ON GRAPH SET STYLE *

*GRAPH_SCRIPT

setPieDepth(0);

setPieTilt(0);

setDepthRadius(0);

setCurveFitEquationDisplay(false);

setPlace(true);SNIPP

*END

INCLUDE=IBFS:/FILE/IBI_HTML_DIR/ibi_themes/Warm.sty,$

TYPE=REPORT, TITLETEXT=&WF_TITLE.QUOTEDSTRING, $

TYPE=DATA, COLUMN=N1, BUCKET=color, $

TYPE=DATA, COLUMN=N2, BUCKET=x-axis, $

TYPE=DATA, COLUMN=N3, BUCKET=x-axis, $

TYPE=DATA, COLUMN=N4, BUCKET=y-axis, $

TYPE=DATA, COLUMN=TOOL_TIP_1, BUCKET=tooltip, $

TYPE=DATA, COLUMN=TOOL_TIP_2, BUCKET=tooltip, $

TYPE=DATA, COLUMN=TOOL_TIP_3, BUCKET=tooltip, $

TYPE=DATA, COLUMN=TOOL_TIP_4, BUCKET=tooltip, $

*GRAPH_SCRIPT

setReportParsingErrors(false);

setSelectionEnableMove(false);

setLegendPosition(1);

setTextFormatPreset(getY1Label(),28);

setDisplay(getO1Title(),false);

setDisplay(getY1Title(),false);

setFillColor(getSeries(2),new Color(255,128,0));

setTransparentBorderColor(getSeries(2), true);

setFillColor(getSeries(1),new Color(255,202,0));

setTransparentBorderColor(getSeries(1), true);

setTransparentBorderColor(getSeries(0), true);

*GRAPH_JS_FINAL

-*htmlToolTip: {enable: true, snap: true },

series: [

{series: reset, tooltip:{{tooltip1}}+""+{{tooltip2}}+": +"+ {{tooltip3}}+""+" totalling +"+ {{tooltip4}}+""},

],

xaxis: {

title: {

visible: false

}

},

pieProperties: {

holeSize: 0%

},

blaProperties: {

seriesLayout: percent

},

yaxis: {

title: {

visible: false

}

},

agnosticSettings: {

chartTypeFullName: Bar_Percent

}

*END

ENDSTYLE

END

-RUN

</>

[David Beagan]

Perhaps something like this could work for you:

SET PAGE=NOLEAD,HOLDLIST=PRINTONLY

TABLE FILE ggsales

SUM

COMPUTE dq/A1 = '"'; NOPRINT

COMPUTE pre/A5 = '<pre>'; NOPRINT

COMPUTE table/A7 = '<table>'; NOPRINT

COMPUTE etable/A8 = '</table>'; NOPRINT

COMPUTE tr/A5 = '<tr>'; NOPRINT

COMPUTE etr/A5 = '</tr>'; NOPRINT

COMPUTE td/A5 = '<td>'; NOPRINT

COMPUTE etd/A5 = '</td>'; NOPRINT

COMPUTE b/A3 = '<b>'; NOPRINT

COMPUTE rows/A999V = LAST rows || tr || td || PRODUCT || etd || td || FPRINT(UNITS,'P9C') || etd || td || FPRINT(DOLLARS,'P9M') || etd || etr; NOPRINT

BY PRODUCT NOPRINT

FOOTING

" tooltip: <dq <table <tr <td <b Product <etd <td <b Units <etd <td <b Dollars <etd <etr <rows <etable <dq "

ON TABLE HOLD AS tooltip FORMAT WP

END

-RUN

GRAPH FILE ggsales

SUM DOLLARS

UNITS

BY PRODUCT

ON GRAPH PCHOLD FORMAT JSCHART

ON GRAPH SET LOOKGRAPH BAR

ON GRAPH SET AUTOFIT ON

ON GRAPH SET STYLE *

TYPE=DATA, COLUMN=DOLLARS, BUCKET=y-axis, $

TYPE=DATA, COLUMN=UNITS , BUCKET=y-axis, $

TYPE=DATA, COLUMN=PRODUCT, BUCKET=x-axis, $

INCLUDE=IBFS:/FILE/IBI_HTML_DIR/ibi_themes/Warm.sty,$

*GRAPH_JS_FINAL

"blaProperties": {"seriesLayout": "stacked"},

"agnosticSettings": {"chartTypeFullName": "Bar_Stacked"},

"series": [{"series": "reset",

-MRNOEDIT -INCLUDE tooltip.wp

}]

*END

ENDSTYLE

END

 

 

image.png538826 40.8 KB

[LK .]

Hello David,

Thanks for your response, But, my requirement is, If I hover on the Capuccino then it should show both Dollar Sales and Unit Sales for Capuccino only not for all the product categories.

With Regards

LK

[David Beagan]

How about this:

GRAPH FILE ggsales

SUM DOLLARS

UNITS

BY PRODUCT

ON GRAPH PCHOLD FORMAT JSCHART

ON GRAPH SET LOOKGRAPH BAR

ON GRAPH SET STYLE *

type=data, column=n1, bucket=x-axis,$

type=data, column=n2, bucket=y-axis,$

type=data, column=n3, bucket=y-axis,$

*GRAPH_JS_FINAL

"blaProperties": {"seriesLayout": "stacked"},

"agnosticSettings": {"chartTypeFullName": "Bar_Stacked"},

"series": [

{ "series": 0, "color": "green",

"tooltip": function(value,series,group){

return this.getGroupLabel(group) + '<br> Dollars: ' + this.data[0][group][0] +'<br>Units: ' + this.data[1][group][0];

}

},

{ "series": 1, "color": "blue",

"tooltip": function(value,series,group){

return this.getGroupLabel(group) + '<br> Units: '+ this.data[1][group][0] +'<br>Dollars: ' + this.data[0][group][0];

}

}

],

"htmlToolTip": {"snap": true, "fill": "#ddddff", "border": {"color": "blue"}}

ENDSTYLE

END

[Douglas Lee 2]

David, How about doing this Hover on any PRODUCT in a CATEGORY and get the same display for a items (Dollar Sales, and Unit Sales) in that Category.

[David Beagan]

Hi Doug, what is the code you used to create it

[LK .]

David,

Is it possible to get the tooltip in the format I mentioned in my original post(I have included the code as well) i.e.

Country

Seats:Percentage totalling Sales

My current tooltip is in the required format as displayed in the below picture,I was able to get it for the individual series values. But, I am trying to get all of them in a single tooltip and any series I hover it should show all the values.

 

Stacked_Bar_Tool_Tip.JPG.png1882852 16.1 KB

 

Best Regards

LK

[David Beagan]

Try the code below. For missing bar series such as ITALY 5 SEATS, the this.data variable doesnt exist (I expected it to exist with perhaps a value of undefined ). The error that is caused by a nonexistent variable is handled with the try { ... } catch(error) { ... } JavaScript to ensure the error doesnt wipe out the tooltip.

GRAPH FILE CAR

SUM

COMPUTE PRCNT/D11% = DEALER_COST / RETAIL_COST * 100;

SALES/D6

COMPUTE Tooltip/A99V = FPRINT(SEATS,'I3') | ': ' | FTOA(PRCNT, '(D11%)','A20') | ' totalling ' | FTOA(SALES, '(D6)','A10');

BY SEATS

BY COUNTRY

ON GRAPH PCHOLD FORMAT JSCHART

ON GRAPH SET LOOKGRAPH BAR

ON GRAPH SET AUTOFIT ON

ON GRAPH SET VZERO OFF

ON GRAPH SET STYLE *

INCLUDE=IBFS:/FILE/IBI_HTML_DIR/ibi_themes/Warm.sty,$

TYPE=DATA, COLUMN=N1, BUCKET=color, $

TYPE=DATA, COLUMN=N2, BUCKET=x-axis, $

TYPE=DATA, COLUMN=N3, BUCKET=x-axis, $

TYPE=DATA, COLUMN=N4, BUCKET=y-axis, $

TYPE=DATA, COLUMN=N5, BUCKET=tooltip,$

*GRAPH_JS_FINAL

"blaProperties": { "seriesLayout": "percent"},

"agnosticSettings": { "chartTypeFullName": "Bar_Percent"},

"legend":{ "reverseOrder": true},

"series": [{"series": "reset",

"tooltip": function(value,series,group) {

var value = this.getGroupLabel(group);

try { value = value + '<br>' + this.data[2][group][1] } catch(error) {}

try { value = value + '<br>' + this.data[1][group][1] } catch(error) {}

try { value = value + '<br>' + this.data[0][group][1] } catch(error) {}

return value;

}

}]

*END

ENDSTYLE

END

 

 

image.png1293413 26.2 KB

[Douglas Lee 2]

david.beagan:

 

REF: what is the code you used to create it

 

 

Its a basic IA Chart with a mod in MSpaint to display the desired ToolTip Ill post that code if you still want it

[LK .]

Hello David,

When I hover on England, this is how it shows. Is there something that needs to be modified in the code

 

image.png1353784 14.5 KB

 

Best Regards

LK

[David Beagan]

Those zeros are in the data. Run this:

TABLE FILE CAR

SUM

COMPUTE PRCNT/D11% = DEALER_COST / RETAIL_COST * 100;

SALES/D6

COMPUTE Tooltip/A99V = FPRINT(SEATS,'I3') | ': ' | FTOA(PRCNT, '(D11%)','A20') | ' totalling ' | FTOA(SALES, '(D6)','A10');

BY SEATS

BY COUNTRY

END

 

And you will see the zeros:

[LK .]

Thank you very much David. I hope you have a great day.

Best Regards

LK

[David Beagan]

Hi Doug,

I built your chart in IA and added a "series": [{ ... "tooltip" ... }] to the *GRAPH_JS_FINAL section. Also added a tabular report at the end for verification.

ENGINE INT CACHE SET ON

SET PAGE-NUM=NOLEAD

-DEFAULTH &WF_HTMLENCODE=OFF;

SET HTMLENCODE=&WF_HTMLENCODE

 

SET ARGRAPHENGINE=JSCHART

-DEFAULTH &WF_EMPTYREPORT=ON;

SET EMPTYREPORT=&WF_EMPTYREPORT

 

SET EMBEDHEADING=ON

SET GRAPHDEFAULT=OFF

-DEFAULTH &WF_ARVERSION=2;

SET ARVERSION=&WF_ARVERSION

 

-DEFAULTH &WF_STYLE_UNITS='PIXELS';

-DEFAULTH &WF_STYLE_HEIGHT='405.0';

-DEFAULTH &WF_STYLE_WIDTH='770.0';

 

-DEFAULTH &WF_TITLE='WebFOCUS Report';

GRAPH FILE ibisamp/ggsales

-* Created by Info Assist for Graph

SUM GGSALES.SALES01.UNITS

GGSALES.SALES01.DOLLARS

BY GGSALES.SALES01.PRODUCT

BY GGSALES.SALES01.CATEGORY

ON GRAPH PCHOLD FORMAT JSCHART

ON GRAPH SET VZERO 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 LOOKGRAPH BAR

-* 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/ibi_themes/Warm.sty,$

TYPE=REPORT, TITLETEXT=&WF_TITLE.QUOTEDSTRING, ORIENTATION=LANDSCAPE, $

TYPE=DATA, COLUMN=N1, BUCKET=color, $

TYPE=DATA, COLUMN=N2, BUCKET=x-axis, $

TYPE=DATA, COLUMN=N3, BUCKET=y-axis, $

TYPE=DATA, COLUMN=N4, BUCKET=y-axis, $

*GRAPH_SCRIPT

 

setReportParsingErrors(false);

setSelectionEnableMove(false);

*GRAPH_JS_FINAL

"pieProperties": {

"holeSize": "0%"

},

"blaProperties": {

"seriesLayout": "stacked"

},

"agnosticSettings": {

"chartTypeFullName": "Bar_Stacked"

},

"series": [{"series": "reset",

"tooltip": function(value,series,group) {

var value = this.getGroupLabel(group);

// + ' Series=' + series + ' group=' + group;

try { value = value + '<br> ' + this.getSeriesLabel(00) + ' = ' + this.data[00][group][0] } catch(e) {}

try { value = value + '<br> ' + this.getSeriesLabel(01) + ' = ' + this.data[01][group][0] } catch(e) {}

try { value = value + '<br> ' + this.getSeriesLabel(02) + ' = ' + this.data[02][group][0] } catch(e) {}

try { value = value + '<br> ' + this.getSeriesLabel(03) + ' = ' + this.data[03][group][0] } catch(e) {}

try { value = value + '<br> ' + this.getSeriesLabel(04) + ' = ' + this.data[04][group][0] } catch(e) {}

try { value = value + '<br> ' + this.getSeriesLabel(05) + ' = ' + this.data[05][group][0] } catch(e) {}

try { value = value + '<br> ' + this.getSeriesLabel(06) + ' = ' + this.data[06][group][0] } catch(e) {}

try { value = value + '<br> ' + this.getSeriesLabel(07) + ' = ' + this.data[07][group][0] } catch(e) {}

try { value = value + '<br> ' + this.getSeriesLabel(08) + ' = ' + this.data[08][group][0] } catch(e) {}

try { value = value + '<br> ' + this.getSeriesLabel(09) + ' = ' + this.data[09][group][0] } catch(e) {}

try { value = value + '<br> ' + this.getSeriesLabel(10) + ' = ' + this.data[10][group][0] } catch(e) {}

try { value = value + '<br> ' + this.getSeriesLabel(11) + ' = ' + this.data[11][group][0] } catch(e) {}

try { value = value + '<br> ' + this.getSeriesLabel(12) + ' = ' + this.data[12][group][0] } catch(e) {}

try { value = value + '<br> ' + this.getSeriesLabel(13) + ' = ' + this.data[13][group][0] } catch(e) {}

try { value = value + '<br> ' + this.getSeriesLabel(14) + ' = ' + this.data[14][group][0] } catch(e) {}

try { value = value + '<br> ' + this.getSeriesLabel(15) + ' = ' + this.data[15][group][0] } catch(e) {}

try { value = value + '<br> ' + this.getSeriesLabel(16) + ' = ' + this.data[16][group][0] } catch(e) {}

try { value = value + '<br> ' + this.getSeriesLabel(17) + ' = ' + this.data[17][group][0] } catch(e) {}

try { value = value + '<br> ' + this.getSeriesLabel(18) + ' = ' + this.data[18][group][0] } catch(e) {}

try { value = value + '<br> ' + this.getSeriesLabel(19) + ' = ' + this.data[19][group][0] } catch(e) {}

try { value = value + '<br> ' + this.getSeriesLabel(20) + ' = ' + this.data[20][group][0] } catch(e) {}

return value;

}

}]

 

*END

ENDSTYLE

END

 

TABLE FILE ibisamp/ggsales

SUM UNITS

DOLLARS

BY PRODUCT

ACROSS CATEGORY

END

 

The tooltip is not so great on the formatting, but it does capture all the CATEGORY information on the tooltip for each PRODUCT.

 

image.png955920 62 KB