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,

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

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

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

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.

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.

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