Programitically creating column series to flex chart not showing the chart

Question

I want to create n number of series dynamically when i run my
application.
where n can be any value it depends on the data which i
retrieve from database. below i pasted the example
( in this example i have taken n = 4 i.e., CountMax=4 if i
change the CountMax=6 then it should generate 6series dynamically
after calculating the values. ). just copy the below code and paste
it in Flex builder and run the application.
in this example i am facing problem, chart series are not
showing. i dont know the reason why its not showing, if anyone got
the solutions for the problem please let me know. my actual
requirement is to retrieve data from Salesforce account and want to
populate the arraylist then display the chart.
<?xml version="1.0"?>
<!-- Example showing using mx:LineSeries vs using AS to
create chart series programmatically -->
<mx:Application xmlns:mx="
http://www.adobe.com/2006/mxml"
creationComplete="drawChart()" layout="absolute">
<mx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.charts.series.ColumnSeries;
import mx.charts.series.LineSeries;
import mx.collections.ArrayCollection;
[Bindable]
public var categoryArray:ArrayCollection = new
ArrayCollection();
[Bindable]
public var sArray:ArrayCollection = new ArrayCollection();
public function drawChart():void
var histMax:int = 25;
var histMin:int = 5;
var countMax:int = 6;
var tmpArr:Array = new Array();
categoryArray.removeAll();
for(var n:int = 0; n < 10; n++)
tmpArr[n] = histMin + Math.round((2 * n) / 20 * (histMax -
histMin));
categoryArray.addItem({data:tmpArr[n]});
// Add a series to the chart with the x-values and y-values
// from the arrays and set the series type to a column chart
for(var chartSeries:int = 0; chartSeries < countMax;
chartSeries++)
var tmpseries:Array = new Array(10);
for(var i:int = 1; i < 10; i++)
tmpseries = 3 * Math.random();
var cs:ColumnSeries = new ColumnSeries();
columnchart1.series.join( = [cs];
sArray.addItem({data:tmpseries});
//columnchart1.dataProvider = sArray;
cs = new ColumnSeries();
cs.dataProvider= sArray;
cs.displayName = 'Series';
cs.yField = 'data';
columnchart1.series[chartSeries] = cs;
]]>
</mx:Script>
<mx:Panel title="Dynamic Series Adding Sample"
width="195%" height="90%" layout="absolute">
<mx:ColumnChart id="columnchart1" height="338"
width="396" showDataTips="true" type="stacked" x="10" y="0">
<mx:horizontalAxis>
<mx:CategoryAxis dataProvider="{categoryArray}"
categoryField="data"/>
</mx:horizontalAxis>
<mx:verticalAxis>
<mx:LinearAxis baseAtZero="true" maximum="3"
autoAdjust="true"/>
</mx:verticalAxis>
</mx:ColumnChart>
</mx:Panel>
</mx:Application>

Answer 1

<?xml version="1.0"?>
<!-- Example showing using mx:ColumnSeries vs using AS to
create chart series programmatically -->
<mx:Application xmlns:mx="
http://www.adobe.com/2006/mxml"
creationComplete="drawChart()" layout="absolute">
<mx:Script>
<![CDATA[
import mx.graphics.SolidColor;
import mx.charts.HitData;
import mx.controls.Alert;
import mx.charts.series.ColumnSeries;
import mx.charts.series.LineSeries;
import mx.collections.ArrayCollection;
[Bindable]
public var categoryArray:ArrayCollection = new
ArrayCollection();
public function drawChart():void
var histMax:int = 25;
var histMin:int = 5;
var countMax:int = 3;
var tmpArr:Array = new Array();
categoryArray.removeAll();
for(var n:int = 0; n < 10; n++)
tmpArr[n] = histMin + Math.round((2 * n) / 20 * (histMax -
histMin));
categoryArray.addItem({data:tmpArr[n]});
var cs:ColumnSeries = new ColumnSeries();
columnchart1.series = [cs];
// Add a series to the chart with the x-values and y-values
// from the arrays and set the series type to a column chart
for(var chartSeries:int = 0; chartSeries < countMax;
chartSeries++)
var tmpseries:Array = new Array(10);
for(var i:int = 0; i < 10; i++)
tmpseries
= 1 * Math.random();
if(tmpseries > 0.5)
tmpseries
= 1;
else
tmpseries = 0;
var testArrCol:ArrayCollection = new ArrayCollection();
for(var j:int =0; j < 10; j++)
var m:Number = tmpArr[j];
var m1:Number = tmpseries[j];
testArrCol.addItem({mData:m.toString(),nData:m1.toString()});
cs = new ColumnSeries();
cs.dataProvider = testArrCol;
cs.displayName = 'Series' + chartSeries;
cs.xField = 'mData';
cs.yField = 'nData';
columnchart1.series[chartSeries] = cs;
public function myTipFunction(hitData:HitData):String
return(ColumnSeries(hitData.element).displayName +" - "+
hitData.item.mData + "\n" + "Value : "+ hitData.item.nData);
]]>
</mx:Script>
<mx:Panel title="Dynamic Series Adding Sample" width="98%"
height="90%" layout="absolute">
<mx:ColumnChart id="columnchart1" height="338"
width="396" showDataTips="true" type="stacked" x="10" y="0"
dataTipFunction="{myTipFunction}">
<mx:horizontalAxis>
<mx:CategoryAxis dataProvider="{categoryArray}"
categoryField="data"/>
</mx:horizontalAxis>
<mx:verticalAxisRenderer>
<mx:AxisRenderer visible="false"/>
</mx:verticalAxisRenderer>
</mx:ColumnChart>
</mx:Panel>
</mx:Application>