In a previous example, “Rotating a Flex PieChart control when a user clicks on an item”, we looked at changing a PieChart’s rotation when the user clicked on a pie wedge. In the following example, we look at how to add a nice animation effect with some easing to make the effect a bit more smooth.
Full code after the jump.
Continue reading ‘Animating a Flex PieChart control’s rotation when a user clicks on an item’
The following example shows how you can display the selected pie series item when the user clicks a wedge in a PieChart control.
Full code after the jump.
The following example shows how you can create transparent wedges in a Flex PieChart control by setting the SolidColor object’s alpha property to 0, as seen in the following snippet:
<mx:PieChart dataProvider="{arrColl}" height="100%" width="100%">
<mx:series>
<mx:PieSeries id="pieSeries" field="data">
<mx:fills>
<mx:SolidColor alpha="0.0" />
<mx:SolidColor color="haloBlue" alpha="1.0" />
</mx:fills>
<mx:filters>
<mx:Array />
</mx:filters>
</mx:PieSeries>
</mx:series>
</mx:PieChart>
Full code after the jump.
Continue reading ‘Drawing transparent pie wedges in a Flex PieChart control’
The following examples show how you can change the default fill colors for a Flex PieChart control by setting the fills style using either CSS or MXML.
Full code after the jump.
Continue reading ‘Changing the default fill colors in a Flex PieChart control’
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.
Full code after the jump.
Continue reading ‘Exploding all wedges in a Flex PieChart control using the explodeRadius property’
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 code after the jump.
Continue reading ‘Customizing radial strokes in a Flex PieChart control’
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 an example of changing the stroke around the pie chart itself, see “Customizing strokes in a Flex PieChart control”.
Full code after the jump.
Continue reading ‘Customizing callout strokes in a Flex PieChart control’
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 ‘Exploding wedges in a Flex PieChart control based on user input’
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 a simple PieChart in Flex using ActionScript’
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 ‘Creating custom fills in a Flex PieChart control using the fillFunction property’
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 ‘Rotating a Flex PieChart control when a user clicks on an item’
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 ‘Exploding wedges in a Flex PieChart control’
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 after the jump.
Continue reading ‘Customizing strokes in a Flex PieChart control’
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 ‘Removing the drop shadow from a Flex PieChart control’
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 ‘Positioning labels in a Flex PieChart control’
