Question

Here is my problem I have arraycollection with the attribute “Month” with similar data you can find
Month:”Feb” for 5 times. If I run my application data won’t appear on the screen for “Feb” i.e columnchart won’t get displayed.
Can anyone tell me the reason or possible work around to solve this issue?
Please find code below: –

<mx:Script>
    <![CDATA[
        import mx.charts.series.ColumnSeries;
        import mx.collections.ArrayCollection;

        [Bindable] private var expenses:ArrayCollection = new
            ArrayCollection([
                {Month:"Jan", Profit:1000, Expenses:1500, Amount:450},
                {Month:"Feb", Profit:500, Expenses:200, Amount:600},
                {Month:"Feb", Profit:1500, Expenses:500, Amount:300},
                {Month:"Feb", Profit:2000, Expenses:1500, Amount:450},
                {Month:"Feb", Profit:1000, Expenses:200, Amount:600},
                {Month:"Feb", Profit:1500, Expenses:500, Amount:300},
                {Month:"Feb", Profit:2000, Expenses:1500, Amount:450},
                {Month:"Aug", Profit:1000, Expenses:200, Amount:600},
                {Month:"Sept", Profit:1500, Expenses:500, Amount:300},
                {Month:"Oct", Profit:2000, Expenses:1500, Amount:450},
                {Month:"Nov", Profit:1000, Expenses:200, Amount:600},
                {Month:"Dec", Profit:1500, Expenses:500, Amount:300}
            ]);

        private function clickHandler():void
        {
            var columnSeries:Array = new Array();
            var series:ColumnSeries = new ColumnSeries();
            categoryAxis.categoryField = series.xField = "Month";
            series.yField = "Profit";
            series.displayName = "Profit";
            columnSeries.push(series);
            myChart.series = columnSeries;
            series.percentWidth = 100;
            series.percentHeight = 100;

            myChart.dataProvider = expenses;
        }

    ]]>
</mx:Script>

<mx:VBox horizontalAlign="center" width="100%" height="100%" creationComplete="clickHandler()">
    <mx:ColumnChart id="myChart" width="90%" showDataTips="true" height="90%"  >
        <mx:horizontalAxis>
            <mx:CategoryAxis id="categoryAxis" categoryField="Month" />
        </mx:horizontalAxis>
    </mx:ColumnChart>
</mx:VBox>

Answer 1

<fx:Script>
        <![CDATA[
            import mx.charts.series.ColumnSeries;
            import mx.collections.ArrayCollection;
            import mx.events.FlexEvent;

            [Bindable] private var expenses:ArrayCollection = new
                ArrayCollection([
                    {id:1, Month:"Jan", Profit:1000, Expenses:1500, Amount:450},
                    {id:2, Month:"Feb", Profit:500, Expenses:200, Amount:600},
                    {id:3, Month:"Feb", Profit:1500, Expenses:500, Amount:300},
                    {id:4, Month:"Feb", Profit:2000, Expenses:1500, Amount:450},
                    {id:5, Month:"Feb", Profit:1000, Expenses:200, Amount:600},
                    {id:6, Month:"Feb", Profit:1500, Expenses:500, Amount:300},
                    {id:7, Month:"Feb", Profit:2000, Expenses:1500, Amount:450},
                    {id:8, Month:"Aug", Profit:1000, Expenses:200, Amount:600},
                    {id:9, Month:"Sept", Profit:1500, Expenses:500, Amount:300},
                    {id:10, Month:"Oct", Profit:2000, Expenses:1500, Amount:450},
                    {id:11, Month:"Nov", Profit:1000, Expenses:200, Amount:600},
                    {id:12, Month:"Dec", Profit:1500, Expenses:500, Amount:300}
                ]);

            private function clickHandler():void
            {
                categoryAxis.labelFunction = labelFunction;
                var columnSeries:Array = new Array();
                var series:ColumnSeries = new ColumnSeries();
                categoryAxis.categoryField = series.xField = "id";
                series.yField = "Profit";
                series.displayName = "Profit";
                columnSeries.push(series);
                myChart.series = columnSeries;
                series.percentWidth = 100;
                series.percentHeight = 100;

                myChart.dataProvider = expenses;
            }



            protected function labelFunction(value:Object, pre:Object, axis:Object, item:Object):Object 
            {
                return item.Month;
            }

        ]]>
    </fx:Script>


    <mx:VBox horizontalAlign="center" width="100%" height="100%" creationComplete="clickHandler()">
        <mx:ColumnChart id="myChart" width="90%" showDataTips="true" height="90%"  >
            <mx:horizontalAxis>
                <mx:CategoryAxis id="categoryAxis" categoryField="id"/>
            </mx:horizontalAxis>
        </mx:ColumnChart>
    </mx:VBox>

Do some thing like this, hope this will help.