Display multiple lineChart with custom label function and multiple data providers
Problem
How to create a line chart with multiple series of data? How to change a label on vertical lineChart axis and how to change dataProvider?
Solution
In this simple example you can see how to define LineChart component, how to use two different data providers and how to create a custom axis label.
Detailed explanation
I helped my friend to create a simple comparison chart for NBA MVP race. Here is the code:
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal" backgroundColor="0xFFFFFF">
<mx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.charts.events.ChartItemEvent;
import mx.charts.chartClasses.Series;
import mx.charts.ChartItem;
import mx.charts.chartClasses.IAxis;
[Bindable]
public var statsPpg:Array = [
{season:'03-04',kobe:24.0, dwayne:16.2, lebron: 20.9},
{season:'04-05',kobe:27.6, dwayne:24.1, lebron: 27.2},
{season:'05-06',kobe:35.4, dwayne:27.2, lebron: 31.4},
{season:'06-07',kobe:31.6, dwayne:27.4, lebron: 27.3},
{season:'07-08',kobe:28.3, dwayne:24.6, lebron: 30.0},
{season:'08-09',kobe:27.2, dwayne:29.9, lebron: 28.4}
];
public var statsAssists:Array = [
{season:'03-04',kobe:5.1, dwayne:4.5, lebron: 5.9},
{season:'04-05',kobe:6, dwayne:6.8, lebron: 7.2},
{season:'05-06',kobe:4.5, dwayne:6.7, lebron: 6.6},
{season:'06-07',kobe:5.4, dwayne:7.5, lebron: 6},
{season:'07-08',kobe:5.4, dwayne:6.9, lebron: 7.2},
{season:'08-09',kobe:5, dwayne:7.5, lebron: 7.4}
];
private function yAxisLabel(value:Object, previousValue:Object, axis:IAxis):String
{
return value + ' pg';
}
private function setStats(type:String):void
{
if (type == 'ppg')
{
chartPPG.dataProvider = statsPpg;
categories.dataProvider = statsPpg;
yAxis.title = "Points per game";
}
else if ( type == 'assists')
{
chartPPG.dataProvider = statsAssists;
categories.dataProvider = statsAssists;
yAxis.title = "Assists per game";
}
}
]]>
</mx:Script>
<mx:Panel width="790" title="NBA MVP race: Kobe vs. LeBron vs. Dwayne" layout="horizontal">
<mx:LineChart dataProvider="{statsPpg}" id="chartPPG" name="Comparison" showDataTips="true">
<mx:horizontalAxis>
<mx:CategoryAxis dataProvider="{statsPpg}" categoryField="season" title="NBA seasons" id="categories"/>
</mx:horizontalAxis>
<mx:verticalAxis>
<mx:LinearAxis labelFunction="{yAxisLabel}" title="Points per game" id="yAxis"/>
</mx:verticalAxis>
<mx:series>
<mx:LineSeries id="Kobe" yField="kobe" xField="season" displayName="Kobe Bryant"/>
<mx:LineSeries id="Dwayne" yField="dwayne" xField="season" displayName="Dwayne Wade" />
<mx:LineSeries id="LeBron" yField="lebron" xField="season" displayName="LeBron James" />
</mx:series>
</mx:LineChart>
<mx:Legend dataProvider="{chartPPG}" direction="vertical" width="174"/>
<mx:Button label="PPG" click="setStats('ppg')"/>
<mx:Button label="Assists" click="setStats('assists')"/>
</mx:Panel>
</mx:Application>
