Focal Point Banner


As of December 1, 2020, Focal Point is retired and repurposed as a reference repository. We value the wealth of knowledge that's been shared here over the years. You'll continue to have access to this treasure trove of knowledge, for search purposes only.

Join the TIBCO Community
TIBCO Community is a collaborative space for users to share knowledge and support one another in making the best use of TIBCO products and services. There are several TIBCO WebFOCUS resources in the community.

  • From the Home page, select Predict: WebFOCUS to view articles, questions, and trending articles.
  • Select Products from the top navigation bar, scroll, and then select the TIBCO WebFOCUS product page to view product overview, articles, and discussions.
  • Request access to the private WebFOCUS User Group (login required) to network with fellow members.

Former myibi community members should have received an email on 8/3/22 to activate their user accounts to join the community. Check your Spam folder for the email. Please get in touch with us at community@tibco.com for further assistance. Reference the community FAQ to learn more about the community.


Focal Point    Focal Point Forums  Hop To Forum Categories  WebFOCUS/FOCUS Forum on Focal Point     [CLOSED]pieProperties suffix doesnt accept img tag

Read-Only Read-Only Topic
Go
Search
Notify
Tools
[CLOSED]pieProperties suffix doesnt accept img tag
 Login/Join
 
Gold member
posted
i need to display a image in the suffix of pieproperties. and it doesnt work for a img tag, whereas it does show other div and static characters.

in a pie chart, img tag is not accepted in the suffix of the pieproperties tag.

whereas it works if i use a div or a static text. same for prefix of pieproperties too.


the simplified sample code is below.

  DEFINE FILE CAR
COUNTRY_Def/A20V= IF CAR.ORIGIN.COUNTRY EQ 'ITALY' THEN 'CHILD/DEPENDANT' ELSE
IF CAR.ORIGIN.COUNTRY EQ 'ENGLAND' THEN 'SPOUSE/PARTNER' ELSE
IF CAR.ORIGIN.COUNTRY EQ 'W GERMANY' THEN 'EMPLOYEE/SELF';
END

ENGINE INT CACHE SET ON
SET PAGE-NUM=NOLEAD
SET HTMLENCODE=ON
SET ARGRAPHENGINE=JSCHART
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';
-DEFAULTH &MYTEXT1='XX';
-SET &MYTEXT2=HEXBYT(167,'A1');
-SET &MYTEXT3='&|#x25b2';
-SET &MYTEXT4=HEXBYT(165,'A1');
-SET &MYTEXT42='[IMG]http://bcdevsrv057:8080/ibi_apps/run.bip?BIP_REQUEST_TYPE=BIP_RUN&||BIP_folder=IBFS%253A%252FWFC%252FRepository%252FSNAP%252F~t71299%252Fimages&||BIP_item=downarrow.jpg[/IMG]';
-SET &MYTEXT41='[IMG]IBFS:/WFC/Repository/SNAP/t71299/images/downarrow.jpg[/IMG]';
-SET &MYTEXT43='<img src="https://image.shutterstock.com/image-photo/beautiful-water-drop-on-dandelion-600w-789676552.jpg" width="42" height="42">';
GRAPH FILE car
-* Created by Info Assist for Graph
SUM CNT.CAR.COMP.CAR AS ' '
BY CAR.ORIGIN.COUNTRY_Def
WHERE CAR.ORIGIN.COUNTRY IN ( 'ENGLAND' , 'ITALY' , 'W GERMANY' );
ON GRAPH PCHOLD FORMAT JSCHART
ON GRAPH SET VZERO OFF
ON GRAPH SET GRWIDTH 1
ON GRAPH SET AUTOFIT ON
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 PIE
ON GRAPH SET AUTOFIT ON
ON GRAPH SET STYLE *
*GRAPH_SCRIPT
setPieDepth(0);
setPieTilt(0);
setDepthRadius(0);
setPieFeelerTextDisplay(1);
setPlace(true);
setCurveFitEquationDisplay(false);
*END
INCLUDE=IBFS:/FILE/IBI_HTML_DIR/ibi_themes/Warm.sty,$
TYPE=REPORT, TITLETEXT=&WF_TITLE.QUOTEDSTRING, PAGESIZE=LEGAL, $
TYPE=DATA, COLUMN=N1, BUCKET=color, $
TYPE=DATA, COLUMN=N2, BUCKET=measure, $
*GRAPH_SCRIPT
setReportParsingErrors(false);
setSelectionEnableMove(false);
setFillColor(getSeries(2),new Color(87,182,150));
setFillColor(getSeries(0),new Color(0,148,215));
setFillColor(getSeries(1),new Color(0,82,115));
setDisplay(getLegendArea(),false);
setTextFormatPreset(getPieSliceLabel(),2);
setPieLabelDisplay(3);
setPieFeelerTextDisplay(2);
setDataTextDisplay(true);
setFontSizeAbsolute(getPieSliceLabel(),true);
setAutofit(getPieSliceLabel(),false);
setPlaceResize(getPieSliceLabel(),0);
setFontSizeAbsolute(getPieSliceLabelInside(),true);
setAutofit(getPieSliceLabelInside(),false);
setPlaceResize(getPieSliceLabelInside(),0);
setFontSizeInPoints(getPieSliceLabel(),18);
setFontSizeInPoints(getPieSliceLabelInside(),18);
setFontSizeInPoints(getPieRingLabel(),24);
setFillColor(getPieRingLabel(),new Color(0,47,85));
setFillColor(getPieSliceLabel(),new Color(0,83,115));
setFillColor(getPieSliceLabelInside(),new Color(0,83,115));
setPieSliceDetach(getSeries(*), 0);
setPieSliceDelete(0,false);
setPieSliceDelete(1,false);
setPieSliceDelete(2,false);
setPiesPerRow(4);
setDisplay(getPieRingLabel(),true);
setTextFormatPreset(getPieRingLabel(),6);
*GRAPH_JS_FINAL
"agnosticSettings": {
    "chartTypeFullName": "Pie_Ring"
},
"series":[{
    "series": "reset",
    "tooltip": "<div style='text-align:center'><span style='font-family:sans-serif;font-size:30px;font-weight:700'>{{series_percent}}</span><br>[b]{{series_label}}[/b]</div>"
}],

"dataLabels": {
              "visible": true,
},

"pieProperties": {
                             "holeSize": "80%",
                             "totalLabel": {
                                           "visible": "auto",
                                           "font": "15pt Sans-Serif",
                                           "color": "#002F54",
                            numberFormat: {

-*prefix: '<div align="center">$',
suffix: '<div><img src="https://image.shutterstock.com/image-photo/beautiful-water-drop-on-dandelion-600w-789676552.jpg" width="42" height="42"></div>', // added to the end of the label
}
}

              },

*END

ENDSTYLE

END

This message has been edited. Last edited by: vinodh,


WebFOCUS 8
Windows, All Outputs
 
Posts: 71 | Registered: January 23, 2018Report This Post
Expert
posted Hide Post
If you actually concentrate on the attribute that you are trying to change, you would understand that the numberFormat should (logically) only expect numeric formatting options (see documentation for examples).

If you read the document, you would also find that you can make a callback function the result of some attributes.

So, try the following -

    "numberFormat": 
        function(d) {return d + '<br /><div><img src="https://image.shutterstock.com/image-photo/beautiful-water-drop-on-dandelion-600w-789676552.jpg" width="42" height="42" /></div>';}


Of course, with this callback you will lose the formatting of the number as you are completely overwriting the label content.

T



In FOCUS
since 1986
WebFOCUS Server 8.2.01M, thru 8.2.07 on Windows Svr 2008 R2  
WebFOCUS App Studio 8.2.06 standalone on Windows 10 
 
Posts: 5694 | Location: United Kingdom | Registered: April 08, 2004Report This Post
Gold member
posted Hide Post
thank you. is this the documentation that you are referring to.
Read docs here: https://webfocusinfocenter.inf...ce/chart_intro18.htm

i applied your code and commented out the prefix and suffix. but still i dont see the image in the pie ring. i guess it is not working? or i am doing any wrong.?


WebFOCUS 8
Windows, All Outputs
 
Posts: 71 | Registered: January 23, 2018Report This Post
Guru
posted Hide Post
I could not get the onload or the ready to run when the page starts so I created a button. It appears at the bottom left.

My example uses jquery to replace the div tag with an image and does work when the button is pressed.

Maybe you could try a timer to kick off the javascript runit function.

DEFINE FILE CAR
COUNTRY_Def/A20V= IF CAR.ORIGIN.COUNTRY EQ 'ITALY' THEN 'CHILD/DEPENDANT' ELSE
IF CAR.ORIGIN.COUNTRY EQ 'ENGLAND' THEN 'SPOUSE/PARTNER' ELSE
IF CAR.ORIGIN.COUNTRY EQ 'W GERMANY' THEN 'EMPLOYEE/SELF';
END

ENGINE INT CACHE SET ON
SET PAGE-NUM=NOLEAD
SET HTMLENCODE=ON
SET ARGRAPHENGINE=JSCHART
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';
-DEFAULTH &MYTEXT1='XX';
-SET &MYTEXT2=HEXBYT(167,'A1');
-SET &MYTEXT3='&|#x25b2';
-SET &MYTEXT4=HEXBYT(165,'A1');
-SET &MYTEXT42='[IMG]http://bcdevsrv057:8080/ibi_apps/run.bip?BIP_REQUEST_TYPE=BIP_RUN&||BIP_folder=IBFS%253A%252FWFC%252FRepository%252FSNAP%252F~t71299%252Fimages&||BIP_item=downarrow.jpg[/IMG]';
-SET &MYTEXT41='[IMG]IBFS:/WFC/Repository/SNAP/t71299/images/downarrow.jpg[/IMG]';
-SET &MYTEXT43='<img src="https://image.shutterstock.com/image-photo/beautiful-water-drop-on-dandelion-600w-789676552.jpg" width="42" height="42">';
GRAPH FILE car
-* Created by Info Assist for Graph
SUM CNT.CAR.COMP.CAR AS ' '
BY CAR.ORIGIN.COUNTRY_Def
WHERE CAR.ORIGIN.COUNTRY IN ( 'ENGLAND' , 'ITALY' , 'W GERMANY' );
ON GRAPH HOLD FORMAT JSCHART AS HCHART 
ON GRAPH SET VZERO OFF
ON GRAPH SET GRWIDTH 1
ON GRAPH SET AUTOFIT ON
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 PIE
ON GRAPH SET AUTOFIT ON
ON GRAPH SET STYLE *
*GRAPH_SCRIPT
setPieDepth(0);
setPieTilt(0);
setDepthRadius(0);
setPieFeelerTextDisplay(1);
setPlace(true);
setCurveFitEquationDisplay(false);
*END
INCLUDE=IBFS:/FILE/IBI_HTML_DIR/ibi_themes/Warm.sty,$
TYPE=REPORT, TITLETEXT=&WF_TITLE.QUOTEDSTRING, PAGESIZE=LEGAL, $
TYPE=DATA, COLUMN=N1, BUCKET=color, $
TYPE=DATA, COLUMN=N2, BUCKET=measure, $
*GRAPH_SCRIPT
setReportParsingErrors(false);
setSelectionEnableMove(false);
setFillColor(getSeries(2),new Color(87,182,150));
setFillColor(getSeries(0),new Color(0,148,215));
setFillColor(getSeries(1),new Color(0,82,115));
setDisplay(getLegendArea(),false);
setTextFormatPreset(getPieSliceLabel(),2);
setPieLabelDisplay(3);
setPieFeelerTextDisplay(2);
setDataTextDisplay(true);
setFontSizeAbsolute(getPieSliceLabel(),true);
setAutofit(getPieSliceLabel(),false);
setPlaceResize(getPieSliceLabel(),0);
setFontSizeAbsolute(getPieSliceLabelInside(),true);
setAutofit(getPieSliceLabelInside(),false);
setPlaceResize(getPieSliceLabelInside(),0);
setFontSizeInPoints(getPieSliceLabel(),18);
setFontSizeInPoints(getPieSliceLabelInside(),18);
setFontSizeInPoints(getPieRingLabel(),24);
setFillColor(getPieRingLabel(),new Color(0,47,85));
setFillColor(getPieSliceLabel(),new Color(0,83,115));
setFillColor(getPieSliceLabelInside(),new Color(0,83,115));
setPieSliceDetach(getSeries(*), 0);
setPieSliceDelete(0,false);
setPieSliceDelete(1,false);
setPieSliceDelete(2,false);
setPiesPerRow(4);
setDisplay(getPieRingLabel(),true);
setTextFormatPreset(getPieRingLabel(),6);
*GRAPH_JS_FINAL
"agnosticSettings": {
    "chartTypeFullName": "Pie_Ring"
},
"series":[{
    "series": "reset",
    "tooltip": "<div style='text-align:center'><span style='font-family:sans-serif;font-size:30px;font-weight:700'>{{series_percent}}</span><br>[b]{{series_label}}[/b]</div>"
}],

"dataLabels": {
              "visible": true,
},

"pieProperties": {
                             "holeSize": "80%",
                             "totalLabel": {
                                           "visible": "auto",
                                           "font": "15pt Sans-Serif",
                                           "color": "#002F54",
                            numberFormat: {

-*prefix: '<div align="center">$',
suffix: '<div id="ReplaceDiv">Test</div>', // added to the end of the label
}
}

              },

*END

ENDSTYLE

END
-HTMLFORM BEGIN
<!DOCTYPE html>
<html>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
$("#ReplaceDiv").html('<img src="https://image.shutterstock.com/image-photo/beautiful-water-drop-on-dandelion-600w-789676552.jpg" width="42" height="42">' );
});
function runit() {
$("#ReplaceDiv").html('<img src="https://image.shutterstock.com/image-photo/beautiful-water-drop-on-dandelion-600w-789676552.jpg" width="42" height="42">' );
}
</script>
<body onload="runit();">
!IBI.FIL.HCHART;
<input text="button" onclick="runit();">
</body>
</html>
-HTMLFORM END


Fernando


Prod WF 8.1.04, QA WF 8.2.03, Dev WF 8.2.03
 
Posts: 278 | Registered: October 10, 2006Report This Post
Gold member
posted Hide Post
thank you fernando. gave me a new route to try.

i will try to make it to work on onload and paste the code here.


WebFOCUS 8
Windows, All Outputs
 
Posts: 71 | Registered: January 23, 2018Report This Post
Gold member
posted Hide Post
i got busy now. so i will work on it later and post the code.
for now i will close this discussion and update later.

thanks for all your time.


WebFOCUS 8
Windows, All Outputs
 
Posts: 71 | Registered: January 23, 2018Report This Post
Expert
posted Hide Post
The following section runs OK but, as I mentioned, it changes the formatting of the central number. However, you could add styling to the callback for that as well.

"pieProperties": {
    "holeSize": "80%",
    "totalLabel": {
        "visible": "auto",
        "font": "15pt Sans-Serif",
        "color": "#002F54",
        "numberFormat": function(d) {return d + '<br /><div><img src="https://image.shutterstock.com/image-photo/beautiful-water-drop-on-dandelion-600w-789676552.jpg" width="42" height="42" /></div>';}
    }
}


T



In FOCUS
since 1986
WebFOCUS Server 8.2.01M, thru 8.2.07 on Windows Svr 2008 R2  
WebFOCUS App Studio 8.2.06 standalone on Windows 10 
 
Posts: 5694 | Location: United Kingdom | Registered: April 08, 2004Report This Post
  Powered by Social Strata  

Read-Only Read-Only Topic

Focal Point    Focal Point Forums  Hop To Forum Categories  WebFOCUS/FOCUS Forum on Focal Point     [CLOSED]pieProperties suffix doesnt accept img tag

Copyright © 1996-2020 Information Builders