Search Flex Components Free

Custom Search

December 27, 2007

Line Charts in Flex


<?xml version=”1.0″?>
<mx:Application xmlns:mx=”'>"> “>
import mx.collections.ArrayCollection;
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:Panel title=”Line Chart”>
<mx:LineChart dataProvider=”{expenses}” showDataTips=”true” id=”myChart”>
<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:Stroke color=”0xFF33CC” weight=”5″/>
<mx:LineSeries yField=”Expenses” displayName=”Expenses”
<mx:LineSeries yField=”Amount” displayName=”Amount”/>
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:CategoryAxis dataProvider=”{expenses}” categoryField=”Month”/>

Related Flex Tutorials