Creating line/column series dynamically?

[flexy]

I spent quite a bit of time today messing around with the LineChart component, as it's been a while since I've had them out on the desk!

Whilst I felt fairly confident about creating charts using MXML, I knew that in reality I would need to be able to populate them dynamically, often displaying 'n' number of results. I managed to achieve this in pretty good time (coupled with a bit of reading of the LineSeries class, and have included the code below to help anyone trying to embark on this kind to project.

Code:

** AS **

var myLineSeries:LineSeries = new LineSeries();
myLineSeries .yField = "fieldName";
myLineSeries .form = "curve";
myLineSeries .displayName = "Name";
myLineSeries .dataProvider = myArray;
myChart.series.push(myLineSeries );

myChart.invalidateSeriesStyles();
myChart.series = myChart.series;

** MXML **

<mx:LineChart id="myChart" showDataTips="true">
       <mx:series>
              <mx:Array></mx:Array>
       </mx:series>
</mx:LineChart>
<mx:Legend dataProvider="{myChart}"/>

I guess the key things to remember are that you 'push' your LineSeries to your chart's series array, and that you need to 'update' your chart by setting the series = series.

[JonoB]

Hi,

I hope you dont mind me resurrecting this old thread.

I have a line chart in Flex 3, which works pefectly; pure mxml as follows:

Code:

<mx:LineChart id="myChart" showDataTips="true" dataProvider="{model.bank_summary_chart}"           
    <mx:horizontalAxis>
        <mx:CategoryAxis dataProvider="{model.bank_summary_chart}" categoryField="date_trans"/>
    </mx:horizontalAxis>
   <mx:series>
        <mx:LineSeries yField="Current bank account" form="curve" displayName="Current Bank Account"/>
      <mx:LineSeries yField="Savings bank account" form="curve" displayName="Savings Bank Account"/>
    </mx:series>
</mx:LineChart>

I then tried to do this in AS (and also removed the <mx:LineSeries/> tags from the mxml above):

Code:

var mySeries:Array = new Array();
var series:Array = new Array("Current Bank Account", "Savings Bank Account", "date_trans");
var i:int;

for (i=0; i<series.length; i++) {
var item:String = series[i];
if (item != 'date_trans') {
var myLineSeries:LineSeries = new LineSeries();
myLineSeries.xField = item;
myLineSeries.yField = 'date_trans';
myLineSeries.displayName = item;
myLineSeries.setStyle('form','curve');
myLineSeries.setStyle('showDataEffect','interpolate');

//myLineSeries.dataProvider = model.bank_summary_chart;
mySeries.push(myLineSeries);
}
}
myChart.invalidateSeriesStyles();
myChart.series = mySeries;

And for some reason it doesnt work. The code runs fine, and in debug mode I can see the vars being set correctly, but the chart doesnt show any series.

The dataprovider is set on the chart correctly, as I can see the horizontal axis has been populated. You will note that I commented out myLineSeries.dataProvider = model.bank_summary_chart in the AS. I wasnt sure if this was needed or not, since its not needed in each line series in pure mxml form. Either way, even when its uncommented in AS, then the line series still do not show.   

Any ideas greatly appreciated.

[JonoB]

Arrg! I had the x and y co-ords the wrong way round