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
END

This message has been edited. Last edited by: <Kathryn Henning>,

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]

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

*GRAPH_JS
riserBevel: ' ',
riserShadow:{angle: 180, distance: 8, blur: .2},
pieProperties:{
holeSize: '60%',
label: {visible: true, font: '10pt Arial', color: '#666666'},
skew: 25
}


*END

*GRAPH_JS
"riserBevel": "donut"
,
pieProperties:{
holeSize: '60%',
label: {visible: true, font: '10pt Arial', color: '#666666'},
skew: 25
}

*END

How much of this, Porter's enhancements, can be done in InfoAssist?

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