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     [CLOSED]pieProperties suffix doesnt accept img tag
Go
New
Search
Notify
Tools
Reply
  
[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: 61 | Registered: January 23, 2018Reply With QuoteReport 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.06 on Windows Svr 2008 R2  
WebFOCUS App Studio 8.2.06 standalone on Windows 10 
 
Posts: 5601 | Location: United Kingdom | Registered: April 08, 2004Reply With QuoteReport 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: 61 | Registered: January 23, 2018Reply With QuoteReport 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: 263 | Registered: October 10, 2006Reply With QuoteReport 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: 61 | Registered: January 23, 2018Reply With QuoteReport 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: 61 | Registered: January 23, 2018Reply With QuoteReport 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.06 on Windows Svr 2008 R2  
WebFOCUS App Studio 8.2.06 standalone on Windows 10 
 
Posts: 5601 | Location: United Kingdom | Registered: April 08, 2004Reply With QuoteReport This Post
  Powered by Social Strata  
 

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

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