How to: |
The explodeSlice property defines the distance (in pixels) to push a slice away from the pie chart.
series:
[
(
series: snumber,
group: gnumber,
explodeSlice: explodeval }
]where:
Is a zero-based series number. If the series does not exist in the chart, the property is ignored.
For multi-pie charts, is an optional zero-based group (pie) number. If the group does not exist in the chart, the property is ignored. If a group number is not specified, the property is applied to all pies.
Is a number that defines the distance (in pixels) to push a slice away from the pie, or a percentage string enclosed in single quotation marks and including a percent symbol (for example, '25%') to explode a slice as a percentage of the radius of the pie. For example, if the pie is 200 pixels in diameter (100 pixels radius), explodeSlice: '50%' will push the slice out 50 pixels from the center of the pie.
The following request against the GGSALES data source generates a pie chart and explodes the slices for series 2, 4, 6. and 8:
GRAPH FILE GGSALES
SUM DOLLARS
BY PRODUCT
ON GRAPH PCHOLD FORMAT JSCHART
ON GRAPH SET LOOKGRAPH PIE
ON GRAPH SET STYLE *
*GRAPH_JS
series: [
{series: 0, color: 'cyan'},
{series: 1, color: 'bisque'},
{series: 2, color: 'slateblue', explodeSlice: 8},
{series: 3, color: 'red'},
{series: 4, color: 'green', explodeSlice: 18},
{series: 5, color: 'yellow'},
{series: 6, color: 'blue', explodeSlice: 14},
{series: 7, color: 'orange'},
{series: 8, color: 'limegreen', explodeSlice: 8},
{series: 9, color: 'lavender'},
]
*END
ENDSTYLE
ENDThe output is:

The following request generates multiple pies and explodes the slices for series 0 in pie 0, for series 1 in pie 1, and for series 2 in pie 2:
GRAPH FILE GGSALES
SUM DOLLARS UNITS BUDDOLLARS BUDUNITS
BY CATEGORY
ON GRAPH PCHOLD FORMAT JSCHART
ON GRAPH SET LOOKGRAPH PIE
ON GRAPH SET STYLE *
*GRAPH_JS
series: [
{series: 0, color: 'bisque'},
{series: 0, group: 0, explodeSlice: 10},
{series: 1, color: 'cyan'},
{series: 1, group: 1, explodeSlice: 20},
{series: 2, color: 'coral'},
{series: 2, group: 2, explodeSlice: 30},
{series: 3, color: 'lightblue'},
]
*END
ENDSTYLE
ENDThe output is:

| WebFOCUS |