Flex Stacked ColumnChart not showing up

Question

I have the following xml structure:

<root>
   <day name="Sun" values="21,22,25,26"/>
   <day name="Mon" values="27,20,22,25"/>
</root>

I want it to be represented in a Column Chart with stacked bars. The first column will comprise of the columns stacked over each other with values 21,22,25 and 26 corresponding to Sunday. The length of values might change each time the dataprovider is updated. So I wrote the code like:

var columnChart:ColumnChart = new ColumnChart();
columnchart.type="stacked";
var yAxisData:String = "@values";
var xAxisData:String = "@name";
var dp:XMLListCollection = new XMLListCollection(xmlFile.day); 
columnchart.dataProvider = dp;

var valueLength:int = dp[0][yAxisData].toString().split(",").length;
for(var count:int = 0;count<valueLength;count++){
var bSeries:ColumnSeries = new ColumnSeries();
bSeries.dataProvider = dataProvider;
bSeries.xField = xAxisData;
bSeries.yField = yAxisData+"["+count+"]";
columnchart.series.push(bSeries);
}
var hAxis:CategoryAxis = new CategoryAxis();
hAxis.dataProvider = dp;
hAxis.categoryField = xAxisData ;   
CartesianChart(columnchart).horizontalAxis = hAxis;     

But the graph is coming out to be empty. Where did I go wrong?

Answer 1

Below code may help you:-

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
        <fx:XML format="e4x" id="xmlFile">
            <root>
                <day name="Fri" values="11,22,33,44,55,66"/>
                <day name="Sat" values="10,20,30,40,50,60"/>
                <day name="Sun" values="21,22,25,26,56,76"/>
                <day name="Mon" values="5,10,15,20,25,30"/>
            </root>
        </fx:XML>
    </fx:Declarations>
    <fx:Script>
        <![CDATA[
            import mx.charts.CategoryAxis;
            import mx.charts.ColumnChart;
            import mx.charts.Legend;
            import mx.charts.chartClasses.CartesianChart;
            import mx.charts.chartClasses.Series;
            import mx.charts.series.ColumnSeries;
            import mx.charts.series.ColumnSet;
            import mx.collections.ArrayCollection;
            import mx.collections.XMLListCollection;


            private function createChart():void
            {
                var columnChart:ColumnChart = new ColumnChart();
                var dp:XMLListCollection = new XMLListCollection(xmlFile.day);  
                var stackedData:ArrayCollection = new ArrayCollection();

                var yAxisData:String = "@values";
                var xAxisData:String = "@name";

                var horizontalCategoryAxis:CategoryAxis = new CategoryAxis();
                horizontalCategoryAxis.categoryField = "name";
                columnChart.horizontalAxis = horizontalCategoryAxis;

                var columnSet:ColumnSet = new ColumnSet();
                columnSet.type = "stacked";

                for(var row:int=0; row < dp.length; row++){
                    var arrayData:Array = dp[row][yAxisData].toString().split(",");

                    var seriesArray:Array = new Array();

                    var obj:Object = new Object();
                    obj.name = dp[row][xAxisData].toString();

                    for(var j:int=0; j < arrayData.length; j++)
                    {
                        obj["xValues"+j] = arrayData[j].toString();
                    }
                    stackedData.addItem(obj);
                }

                for(var col:int=0; col < arrayData.length; col++){
                    var colmSeries:ColumnSeries = new ColumnSeries();
                    colmSeries.yField = "xValues"+col;
                    colmSeries.displayName = "Value at "+col;
                    seriesArray.push(colmSeries);
                }

                columnSet.series = seriesArray;
                columnChart.series = [columnSet];

                columnChart.dataProvider = stackedData;
                columnChart.percentWidth = 70;
                columnChart.percentHeight = 70;
                columnChart.showDataTips = true;

                var legend:Legend = new Legend();
                legend.direction = "horizontal";
                legend.dataProvider = columnChart;

                container.addElement(columnChart);
                container.addElement(legend);
            }

        ]]>
    </fx:Script>

    <s:VGroup id="container" width="100%" height="100%" creationComplete="createChart()"/>
</s:Application>