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     [SOLVED]realign pie label formatting in pie chart

Read-Only Read-Only Topic
Go
Search
Notify
Tools
[SOLVED]realign pie label formatting in pie chart
 Login/Join
 
Gold member
posted
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
 
Posts: 71 | Registered: January 23, 2018Report This Post
Gold member
posted Hide Post
let me know if anyone doesnt have access to the document file.


WebFOCUS 8
Windows, All Outputs
 
Posts: 71 | Registered: January 23, 2018Report This Post
Expert
posted Hide Post
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!

 
Posts: 6347 | Location: 33°49'23.0"S, 151°11'41.0"E | Registered: October 31, 2006Report This Post
Master
posted Hide Post
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:
 
 
 
 
 
Posts: 608 | Location: Salt Lake City, UT, USA | Registered: November 18, 2015Report This Post
Gold member
posted Hide Post
@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
 
Posts: 71 | Registered: January 23, 2018Report This Post
Master
posted Hide Post
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:
 
 
 
 
 
Posts: 608 | Location: Salt Lake City, UT, USA | Registered: November 18, 2015Report This Post
Master
posted Hide Post
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:
 
 
 
 
 
Posts: 608 | Location: Salt Lake City, UT, USA | Registered: November 18, 2015Report This Post
Gold member
posted Hide Post
@Hallway.....sure i ll do...u r one sort of synonymous to hellboy in JS charting.


WebFOCUS 8
Windows, All Outputs
 
Posts: 71 | Registered: January 23, 2018Report This Post
Master
posted Hide Post


Hallway

 
Prod: 8202M1
Test: 8202M4
Repository:
 
OS:
 
Outputs:
 
 
 
 
 
Posts: 608 | Location: Salt Lake City, UT, USA | Registered: November 18, 2015Report 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     [SOLVED]realign pie label formatting in pie chart

Copyright © 1996-2020 Information Builders