Print Page - Creating line/column series dynamically?

Title: Creating line/column series dynamically?
Post by: flexy on 27 Sep 2006, 15:53:14 UTC

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 (http://livedocs.macromedia.com/flex/2/langref/mx/charts/series/LineSeries.html), 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.

Title: Re: Creating line/column series dynamically?
Post by: JonoB on 03 Feb 2010, 09:22:48 UTC

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.

Title: Re: Creating line/column series dynamically?
Post by: JonoB on 03 Feb 2010, 13:11:01 UTC

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

flexdeveloper.eu Forum

Flex and ActionScript 3.0 => Flex Charting => Topic started by: flexy on 27 Sep 2006, 15:53:14 UTC