Search Flex Components Free

Custom Search

December 27, 2007

Line Charts in Flex

lineChart.mxml

<?xml version=”1.0″?>
<mx:Application xmlns:mx=”
http://www.adobe.com/2006/mxml'>http://www.adobe.com/2006/mxml">http://www.adobe.com/2006/mxml “>
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
public var expenses:ArrayCollection = new ArrayCollection([
{Month: “Jan”, Profit: 2000, Expenses: 1500, Amount: 450},
{Month: “Feb”, Profit: 1000, Expenses: 200, Amount: 600},
{Month: “Mar”, Profit: 1500, Expenses: 500, Amount: 300}]);
]]>
</mx:Script>
<mx:Panel title=”Line Chart”>
<mx:LineChart dataProvider=”{expenses}” showDataTips=”true” id=”myChart”>
<mx:series>
<mx:LineSeries yField=”Profit” displayName=”Profit”>
<!–
You can change the width and color of the lines for each series
by using the <mx:lineStroke> tag. The default line is 3 pixels
wide and has a shadow. The following code sets a custom
color and width for the series Stroke object.
–>
<mx:lineStroke>
<mx:Stroke color=”0xFF33CC” weight=”5″/>
</mx:lineStroke>
</mx:LineSeries>
<mx:LineSeries yField=”Expenses” displayName=”Expenses”
lineSegmentRenderer=”mx.charts.renderers.ShadowLineRenderer”/>
<mx:LineSeries yField=”Amount” displayName=”Amount”/>
</mx:series>
<mx:seriesFilters>
<!–
The default appearance of the lines in a LineChart control is with
drop shadows. You can remove these shadows by setting the chart
control's seriesFilters property to an empty Array.
–>
<mx:Array/>
</mx:seriesFilters>
<mx:horizontalAxis>
<mx:CategoryAxis dataProvider=”{expenses}” categoryField=”Month”/>
</mx:horizontalAxis>
</mx:LineChart>
</mx:Panel>
</mx:Application>





Related Flex Tutorials