Using Repeater to generate dynamic line charts

Question

I have a call to a webservice that returns an array of
arrays. The outside array relates to the "YEAR", and the inside
arrays have 1 element for each "MONTH". I want to create a line
chart that has a line for each year, with the x-axis having months
across the bottom.
I can create this just fine by coding the appropriate number
of mx:LineSeries tags in my code.
However, I have a case where the data that I get back from
the webservice could have up to 5 years (I'm only coding for 3).
So, I'd like to find a way to dynamically generate an mx:LineSeries
instance for each one of these years. I can't seem to get this to
work with using a Repeater.
This code isn't mine (got it from the docs), but it matches
with what i'm trying to do exactly:
<?xml version="1.0"?>
<mx:Application xmlns:mx="
http://www.adobe.com/2006/mxml">
<mx:Script><![CDATA[
import mx.charts.events.ChartItemEvent;
import mx.collections.ArrayCollection;
[Bindable]
public var expenses_2005:ArrayCollection = new
ArrayCollection([
{Year: 2005, Expense: "Taxes", Amount: 2000},
{Year: 2005, Expense: "Gas", Amount: 100},
{Year: 2005, Expense: "Food", Amount: 200}
[Bindable]
public var expenses_2006:ArrayCollection = new
ArrayCollection([
{Year: 2006, Expense: "Taxes", Amount: 2500},
{Year: 2006, Expense: "Gas", Amount: 400},
{Year: 2006, Expense: "Food", Amount: 300}
[Bindable]
public var expenses:ArrayCollection = new ArrayCollection([
expenses_2005,
expenses_2006
]]></mx:Script>
<mx:LineChart dataProvider="{expenses}"
showDataTips="true">
<mx:horizontalAxis>
<mx:CategoryAxis dataProvider="{expenses.getItemAt(0)}"
categoryField="Expense" title="Expense"/>
</mx:horizontalAxis>
<mx:verticalAxis>
<mx:LinearAxis displayName="Amount"/>
</mx:verticalAxis>
<mx:series>
<mx:LineSeries xField="Expense" yField="Amount"
displayName="2005" dataProvider="{expenses.getItemAt(0)}"/>
<mx:LineSeries xField="Expense" yField="Amount"
displayName="2006" dataProvider="{expenses.getItemAt(1)}"/>
</mx:series>
</mx:LineChart>
</mx:Application>
How can I now change this to dynamically build the necessary
numbers of LineSeries?

Answer 1

Hi jsevlie,
What I usually do in this case is to create multiple
LineSeries objects in ActionScript as soon as I get in the data.
Here is some code to get you started:
private var theChart:ColumnChart = new ColumnChart;
function drawGraph(){
this.theChart.dataProvider = this.theData;
var ctgAxis:CategoryAxis = new CategoryAxis();
ctgAxis.dataProvider = this.theData;
ctgAxis.categoryField = "0";
this.theChart.horizontalAxis = ctgAxis;
var series:Array = new Array();
for(var i:int=0; i < this.columnSpan; i++){
var colSeries:ColumnSeries = new ColumnSeries();
colSeries.yField = String(i+1);
if(i==0){
colSeries.displayName = "Revenue";
colorSrs(colSeries, 0x3F48F3);
else if(i==1){
colSeries.displayName = "Profit";
colorSrs(colSeries, 0xE9C836);
else{
colSeries.displayName = "Cost";
colorSrs(colSeries, 0x6FB35F);
series
= colSeries;
this.theChart.series = series;