Pushing a Slice Away From a Pie Chart

How to:

The explodeSlice property defines the distance (in pixels) to push a slice away from the pie chart.


Top of page

x
Syntax: How to Push a Slice Away From a Pie Chart
series:
[
    (
      series: snumber,
      group: gnumber,
      explodeSlice: explodeval   }
]

where:

snumber

Is a zero-based series number. If the series does not exist in the chart, the property is ignored.

gnumber

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.

explodeval

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.



Example: Pushing Pie Slices Away From 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
END

The 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
END

The output is:


WebFOCUS