Folks, I get asked for Donut charts all the time and they sure do look pretty on a dashboard. I put together a quick sample that achieves what I would consider the best practice for a Donut Chart and solves three problems that you may struggle with when creating one. Those three problems would be
1. How do I increase the size of the hole radius? (the default size is too small) 2. How do I make the size of the hole proportional? (so that it looks good no matter what size the chart is) 3. How do I make the donut flat (2d) and eliminate the bevels?
All of the magic happens in the *GRAPH_JS block of the style portion of your code (this can also be placed in a WebFOCUS stylesheet).
*GRAPH_JS -*riserBevel of none makes the chart 2D delivering the flat look "riserBevel":"none", -*The holeSize property of a % will maintain the pie radius proportion no matter what size your chart is. This is better than using a fixed number of pixels pieProperties: { holeSize: '60%', label: {visible: true, font: '10pt Arial', color: '#666666'}, }, *END
Entire sample procedure found below
-DEFAULTH &WF_STYLE_UNITS='PIXELS'; -DEFAULTH &WF_STYLE_HEIGHT='405.0'; -DEFAULTH &WF_STYLE_WIDTH='770.0'; -DEFAULTH &WF_TITLE='WebFOCUS Report'; GRAPH FILE GGSALES SUM GGSALES.SALES01.DOLLARS AS ' ' BY GGSALES.SALES01.CATEGORY HEADING "Sales by Category" ON GRAPH PCHOLD FORMAT JSCHART ON GRAPH SET VZERO OFF ON GRAPH SET HTMLENCODE ON ON GRAPH SET GRAPHDEFAULT OFF -*EMBEDHEADING ON removes scroll bars when headings are used ON GRAPH SET EMBEDHEADING 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 GRMERGE ADVANCED ON GRAPH SET GRMULTIGRAPH 0 ON GRAPH SET GRLEGEND 1 ON GRAPH SET GRXAXIS 0 -*Donut Chart type of PIERING ON GRAPH SET LOOKGRAPH PIERING ON GRAPH SET AUTOFIT ON ON GRAPH SET STYLE * *GRAPH_SCRIPT setPieDepth(0); setPieTilt(0); setDepthRadius(0); setCurveFitEquationDisplay(false); setPlace(true); -*This turns off the feeler lines setPieFeelerTextDisplay(1); *END INCLUDE=IBFS:/FILE/IBI_HTML_DIR/javaassist/intl/EN/ENIADefault_combine.sty,$ TYPE=REPORT, TITLETEXT=&WF_TITLE.QUOTEDSTRING, $ TYPE=HEADING, JUSTIFY=CENTER, FONT='Trebuchet MS', SIZE=12, COLOR=RGB(66 70 73), STYLE=NORMAL, $ *GRAPH_SCRIPT setReportParsingErrors(false); setSelectionEnableMove(false); setLegendPosition(2); setFontStyle(getPieRingLabel(),2); setPieFeelerTextDisplay(2); -*Sets color of Pie Ring Label setFillColor(getPieRingLabel(),new Color(128,128,128)); -*Turns on Pie Ring Label setFontSizeAbsolute(getPieRingLabel(),true); setAutofit(getPieRingLabel(),false); -*Sets Pie Ring Label font size setFontSizeInPoints(getPieRingLabel(),18); setPlaceResize(getPieRingLabel(),0); setFillColor(getSeries(0),new Color(255,129,23)); setFillColor(getSeries(1),new Color(255,54,151)); setFillColor(getSeries(2),new Color(135,53,1)); -*Setting of no bevels and pie ring radius is best done in the *GRAPH_JS block of the stylesheet. This is also where you could add any code found in the HTML5 chart manual *GRAPH_JS -*riserBevel of none makes the chart 2D delivering the flat look "riserBevel":"none", -*The holeSize property of a % will maintain the pie radius proportion no matter what size your chart is. This is better than using a fixed number of pixels pieProperties: { holeSize: '60%', label: {visible: true, font: '10pt Arial', color: '#666666'}, }, *END ENDSTYLE ENDThis message has been edited. Last edited by: <Kathryn Henning>,
-- Porter Thorndike Senior Technical Specialist
September 02, 2014, 09:50 AM
Francis Mariani
Thanks for sharing this with us. I've never used
ON GRAPH PCHOLD FORMAT JSCHART
before so this is new to me.
FYI, it is a good idea to contain the code in your post within code tags, this will prevent anything that looks like html to be converted to html by the forum software. You do this by clicking on the </> icon, or, for an existing post, edit the post and add the code tags:
[code]
YOUR CODE HERE
[/code]
Francis
Give me code, or give me retirement. In FOCUS since 1991
Production: WF 7.7.05M, Dev Studio, BID, MRE, WebSphere, DB2 / Test: WF 8.1.05M, App Studio, BI Portal, Report Caster, jQuery, HighCharts, Apache Tomcat, MS SQL Server
September 02, 2014, 10:37 AM
Wep5622
Interestingly, our WebFOCUS 7704M server understands the JSCHART format, but then on creation of the output it turns out that we don't have the related javascript library in ibi_html!
That said, looking at the generated code it looks to be a little inefficient for larger data-sets; why isn't the data defined in the data[] array (assuming that's what it is for) instead of generating a javascript string concatenation statement (that needs evaluating) for every data-point?
We do generate appropriate data-structures with our Google Visualization graphs, so it's certainly possible to do that using FOCUS. Those Google graphs work beautifully (examples in these very forums) but require a working connection to the internet as you can't download their libraries to use them locally. (Which would only be a very minor issue if our (MS) proxy servers were reliable or even configured correctly.)
WebFOCUS 8.1.03, Windows 7-64/2008-64, IBM DB2/400, Oracle 11g & RDB, MS SQL-Server 2005, SAP, PostgreSQL 11, Output: HTML, PDF, Excel 2010 : Member of User Group Benelux :
How much of this, Porter's enhancements, can be done in InfoAssist?
In FOCUS Since 1983 ~ from FOCUS to WebFOCUS. Current: WebFOCUS Administrator at FIS Worldpay | 8204, 8206
July 10, 2019, 05:14 AM
Tony A
Doug,
You're asking about example code that was written (potentially) in early 8 version(s) and you are now on 8.2.04 Gen 48.
Have you tried doing this in IA yourself? In the IA version you have, it took me less than five minutes to produce what Porter provides above - using the default stylesheet, so it might be worth checking what you can do before asking?
As you can no doubt tell, some (most) of what Porter does style wise (minus the bow tie ), finds its way into the product default stylesheets and, as he states above
quote:
(this can also be placed in a WebFOCUS stylesheet)
.
What I will say, in Designer, the pie chart now reflects what Porter has achieved above - although (sorry Porter) much better colours
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