Focal Point
[SOLVED]realign pie label formatting in pie chart

This topic can be found at:
https://forums.informationbuilders.com/eve/forums/a/tpc/f/7971057331/m/7417074196

August 12, 2019, 01:24 PM
vinodh
[SOLVED]realign pie label formatting in pie chart
i want to realign the pie chart label from
existing: "name" and "percent value"
eg: employee/self (29%)

needed: "percent value" and "name"
eg: 29% employee/self

Also different font styling for "percent value" and "name"

eg: see attached document showing the differences and code used in sample chart.

https://www.scribd.com/documen...06875/PiechartLabels

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


WebFOCUS 8
Windows, All Outputs
August 12, 2019, 02:43 PM
vinodh
let me know if anyone doesnt have access to the document file.


WebFOCUS 8
Windows, All Outputs
August 12, 2019, 03:31 PM
Waz
As these charts are format JSCHART, you have the option of coding some javascript to format the text.

Take a look at the documentation on "formatCallback".


Waz...

Prod:WebFOCUS 7.6.10/8.1.04Upgrade:WebFOCUS 8.2.07OS:LinuxOutputs:HTML, PDF, Excel, PPT
In Focus since 1984
Pity the lost knowledge of an old programmer!

August 12, 2019, 03:51 PM
Hallway
Here is an example of formatting the labels and tooltips
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'; 
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); 
setTextFormatPreset(getPieRingLabel(),1); 
setDisplay(getPieRingLabel(),false); 
*GRAPH_JS_FINAL 
"pieProperties": { 
    "holeSize": "75%",    	
}, 
"agnosticSettings": { 
    "chartTypeFullName": "Pie_Ring" 
},
"series":[{
    "series": "reset",
    "tooltip": "<div style='text-align:center'><span style='font-family:Times New Roman;font-size:30px;font-weight:700'>{{series_percent}}</span><br>[b]{{series_label}}[/b]</div>"
}],
"dataLabels": {
    "visible": true,
    "formatCallback": function(data, series, group, dataset){
        return '<div style="text-align:center"><span style="font-family:Times New Roman;font-size:50px;font-weight:700">' + Math.round(data.value / dataset.total * 10000)/100 + '%</span><br>' + this.getSeries(series).label +'</div>';
    }
}
*END 
ENDSTYLE 
END 
-RUN  
 


Read docs here: Introduction to JSON Properties for HTML5 Charts

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


Hallway

 
Prod: 8202M1
Test: 8202M4
Repository:
 
OS:
 
Outputs:
 
 
 
 
August 12, 2019, 04:22 PM
vinodh
@hallway - thank you, you made it look so simple.

@waz - i didnt know all these days. now i look at it in the technical glossary. thank you. i will start playing with it.


WebFOCUS 8
Windows, All Outputs
August 12, 2019, 04:47 PM
Hallway
Excellent. Glad to help. There's a lot of good stuff in those charting docs.

If you're using a modern browser that utilizes ES6 ( almost every browser but Internet Explorer ), you can use template literals to create your labels https://caniuse.com/#feat=template-literals
    "formatCallback": function(data, series, group, dataset){
        return `<div style="text-align:center"><span style="font-family:Times New Roman;font-size:50px;font-weight:700">${Math.round(data.value / dataset.total * 10000)/100}%</span><br>${this.getSeries(series).label}</div>`;
    }


More on Template Literals here: https://css-tricks.com/template-literals/


Hallway

 
Prod: 8202M1
Test: 8202M4
Repository:
 
OS:
 
Outputs:
 
 
 
 
August 12, 2019, 05:02 PM
Hallway
Don't forget to change the title of the post to start with [SOLVED] if this has indeed solved the issue.


Hallway

 
Prod: 8202M1
Test: 8202M4
Repository:
 
OS:
 
Outputs:
 
 
 
 
August 12, 2019, 05:49 PM
vinodh
@Hallway.....sure i ll do...u r one sort of synonymous to hellboy in JS charting.


WebFOCUS 8
Windows, All Outputs
August 12, 2019, 06:13 PM
Hallway



Hallway

 
Prod: 8202M1
Test: 8202M4
Repository:
 
OS:
 
Outputs: