LK . Posted July 10, 2021 Share Posted July 10, 2021 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 </> Link to comment Share on other sites More sharing options...
David Beagan Posted July 11, 2021 Share Posted July 11, 2021 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 Link to comment Share on other sites More sharing options...
LK . Posted July 12, 2021 Author Share Posted July 12, 2021 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 Link to comment Share on other sites More sharing options...
David Beagan Posted July 12, 2021 Share Posted July 12, 2021 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 Link to comment Share on other sites More sharing options...
Douglas Lee 2 Posted July 12, 2021 Share Posted July 12, 2021 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. Link to comment Share on other sites More sharing options...
David Beagan Posted July 12, 2021 Share Posted July 12, 2021 Hi Doug, what is the code you used to create it Link to comment Share on other sites More sharing options...
LK . Posted July 12, 2021 Author Share Posted July 12, 2021 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 Link to comment Share on other sites More sharing options...
David Beagan Posted July 13, 2021 Share Posted July 13, 2021 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 Link to comment Share on other sites More sharing options...
Douglas Lee 2 Posted July 13, 2021 Share Posted July 13, 2021 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 Link to comment Share on other sites More sharing options...
LK . Posted July 13, 2021 Author Share Posted July 13, 2021 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 Link to comment Share on other sites More sharing options...
David Beagan Posted July 14, 2021 Share Posted July 14, 2021 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: Link to comment Share on other sites More sharing options...
LK . Posted July 14, 2021 Author Share Posted July 14, 2021 Thank you very much David. I hope you have a great day. Best Regards LK Link to comment Share on other sites More sharing options...
David Beagan Posted July 14, 2021 Share Posted July 14, 2021 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 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now