Exploding all wedges in a Flex PieChart control using the explodeRadius property

By Peter deHaan On November 10, 2007 · 4 Comments

The following example shows how you can explode all wedges in a PieChart at once by using the explodeRadius property, as seen in the following snippet:

<mx:PieChart dataProvider="{dp.product}" height="100%" width="100%"> <mx:series> <mx:PieSeries field="@data" labelPosition="callout"> <mx:explodeRadius>0.2</mx:explodeRadius> <mx:filters> <mx:Array /> </mx:filters> </mx:PieSeries> </mx:series> </mx:PieChart>

If you want to explode individual wedges, simply use the perWedgeExplodeRadius property.

[...]

Continue Reading →

Customizing radial strokes in a Flex PieChart control

By Peter deHaan On November 10, 2007 · 2 Comments

The following example shows how you can customize the radial stroke in a Flex PieChart control by using the PieSeries class’s radialStroke style and the mx.graphics.Stroke class, as seen in the following snippet:

<mx:PieChart dataProvider="{dp.product}" height="250" width="100%"> <mx:series> <mx:PieSeries id="pieSeries" field="@data"> <mx:radialStroke> <mx:Stroke color="black" weight="2" /> </mx:radialStroke> <mx:filters> <mx:Array /> </mx:filters> </mx:PieSeries> </mx:series> </mx:PieChart>

Full [...]

Continue Reading →

Customizing callout strokes in a Flex PieChart control

By Peter deHaan On November 10, 2007 · Leave a Comment

The following example shows how you can customize the callout stroke in a Flex PieChart control by using the PieSeries class’s calloutStroke style and the mx.graphics.Stroke class, as seen in the following snippet:

<mx:PieChart dataProvider="{dp.product}" height="250" width="100%"> <mx:series> <mx:PieSeries id="pieSeries" field="@data"> <mx:calloutStroke> <mx:Stroke color="black"weight="2" /> </mx:calloutStroke> <mx:filters> <mx:Array /> </mx:filters> </mx:PieSeries> </mx:series> </mx:PieChart>

To see [...]

Continue Reading →

Exploding wedges in a Flex PieChart control based on user input

By Peter deHaan On November 10, 2007 · 4 Comments

The following example shows how you can explode individual wedges in a PieChart when the user changes the value of a Slider control, or rolls over an item in a List control. For other examples of PieChart wedge exploding, check out “Exploding wedges in a Flex PieChart control”.

Full code after the jump.

Continue Reading →

Creating a simple PieChart in Flex using ActionScript

By Peter deHaan On November 7, 2007 · 17 Comments

The following example shows how you can create a simple PieChart in Flex using ActionScript instead of MXML.

Full code after the jump.

 

Continue Reading →

Creating custom fills in a Flex PieChart control using the fillFunction property

By Peter deHaan On November 7, 2007 · 5 Comments

The following example shows how you can set fill colors in a Flex PieChart by specifying a custom fill function. In this example the fill function calculates the fill color based on the percentage value of each item. The larger the wedge, the brigher the fill color.

Full code after the jump.

Continue Reading →

Rotating a Flex PieChart control when a user clicks on an item

By Peter deHaan On November 7, 2007 · Leave a Comment

The following example shows how you can rotate a PieChart in Flex when the user clicks on an item. This allows you to make sure that the clicked item always appears at 0 degrees rotation (off to the right).

Full code after the jump.

Continue Reading →

Exploding wedges in a Flex PieChart control

By Peter deHaan On November 6, 2007 · 7 Comments

The following example shows how you can explode specific wedges in a PieChart control when the user clicks an item in the chart.

Full code after the jump.

 

Continue Reading →

Customizing strokes in a Flex PieChart control

By Peter deHaan On November 6, 2007 · 3 Comments

The following example shows how you can customize the stroke in a Flex PieChart control by using the PieSeries class’s stroke style and the mx.graphics.Stroke class, as seen in the following snippet:

<mx:PieChart dataProvider="{dp.product}" height="250" width="100%"> <mx:series> <mx:PieSeries id="pieSeries" field="@data"> <mx:stroke> <mx:Stroke color="black" weight="2" /> </mx:stroke> <mx:filters> <mx:Array /> </mx:filters> </mx:PieSeries> </mx:series> </mx:PieChart>

Full code [...]

Continue Reading →

Removing the drop shadow from a Flex PieChart control

By Peter deHaan On November 5, 2007 · 10 Comments

The following example shows how you can remove the default drop shadow from a Flex PieChart control by setting the filters property to an empty array in the PieSeries tag, as seen in the following snippet:

<mx:piechart id="pieChart" dataProvider="{dp.product}" height="250" width="100%"> <mx:series> <mx:pieseries id="pieSeries" field="@data" filters="[]" /> </mx:series> </mx:piechart>

Full code after the jump.

Continue Reading →

Positioning labels in a Flex PieChart control

By Peter deHaan On November 4, 2007 · 6 Comments

The following example shows how you can position callouts in a PieChart control’s pie series by setting the labelPosition style.

Full code after the jump.

 

Continue Reading →

Creating a custom data tip function on a Flex PieChart control

By Peter deHaan On November 4, 2007 · 5 Comments

The following example shows how you can create a custom data tip function on a PieChart control in Flex by specifying the dataTipFunction property in your PieChart control. This example also shows how you can make all the data tips visible at the same time in the pie chart by setting the showAllDataTips property to [...]

Continue Reading →