What is Plot chart?
A plot is just like a grid and specifically defines where each data point provides. x and y coordinates will be used to plot sets of data.
Create a plot chart as below:
using Plot chart
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | <fx:Script> <![CDATA[
import mx.collections.*;
[Bindable]
public var mydataSet:ArrayCollection;
public function init():void {
var myarray:Array = [];
for (var i:int=0;i < 10;i++) {
var setValues:Object = {
A:Math.random()*100,
B:Math.random()*100,
C:Math.random()*100,
D:Math.random()*100
};
myarray.push(setValues);
}
dataSet = new ArrayCollection(myarray);
}
]]></fx:Script>
<s:Panel title="Plotting Chart">
<s:layout>
<s:VerticalLayout/>
</s:layout>
<mx:PlotChart id="myChart"
dataProvider="{dataSet}" showDataTips="true">
<mx:series>
<mx:PlotSeries
xField="A"
yField="B"
displayName="Series X"/>
<mx:PlotSeries
xField="C"
yField="D"
displayName="Series Y"/>
</mx:series>
</mx:PlotChart>
<mx:Legend id="l1" dataProvider="{myChart}"/>
</s:Panel> |
The output of plot chart is:
Customizing charts
How to customize charts?
Flex API enables us to work with various charts and provides support to customize them as well.
What is Series stroke?
A stroke enhances the visualization of the line or the outside of the series. To apply a stroke,
Property needs to be identified to use for a specified series.
Changing the previous chart by adding the color
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <fx:Declarations>
<fx:XML id="mobileXML" source="mydata.xml"/>
<s:XMLListCollection id="mobileData"
source="{mobileXML.profits.info}"/>
<fx:Array id="coloring">
<s:SolidColor color="Yellow" alpha="0.5"/>
<s:SolidColor color="Maroon" alpha="0.5"/>
<s:SolidColor color="Red" alpha="0.5"/>
<s:SolidColor color="Blue" alpha="0.5"/>
</fx:Array>
</fx:Declarations>
<mx:Legend dataProvider="{mobileProfitChart}"/>
<mx:PieChart id="mobileProfitChart"
dataProvider="{mobileData}"
height="100%" width="100%" >
<mx:series>
<mx:PieSeries field="@profit" nameField="@name"
labelPosition="callout" fills="{coloring}"/>
</mx:series>
</mx:PieChart> |
Conclusion
Charting in Flex is very powerful as it can be used to implement various charts for the requirements and building dashboards.
Charts consists of many parts that include series, axes, labels, sub charts , and elements.
Flex provides support for implementing nine types of charts that are required to address to the common requirements. The stroke and fills features can be used to enhance the charts display for effective customization.
April 1, 2011
Adobe Flex