Dyanmic Add Flex Chart Series

dyanmicAddChart.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" initialize="init()" viewSourceURL="srcview/index.html">
    
    <mx:Script>
        <![CDATA[
            import mx.charts.series.ColumnSeries;
            import mx.charts.series.BarSeries;
            import mx.charts.series.BarSet;
            import mx.collections.ArrayCollection;
            import mx.charts.ColumnChart;
            import mx.graphics.Stroke;
            import mx.graphics.SolidColor;
            import util.ColorArray;
            
            [Bindable]
            private var dataCollection:ArrayCollection;
            [Bindable]
            private var indexesInGraph:ArrayCollection;
            private var itemIndex:int;
            private var yearValueArray:Array;
            
            private function init():void
            {
                indexesInGraph = new ArrayCollection();
                dataCollection = new ArrayCollection();
            }
            
            private function addItem():void
            {
                indexesInGraph.addItem(itemIndex);
                cbIndexes.dataProvider = indexesInGraph;
                for( var i:int=2000 ; i < 2010 ; i++ )
                {
                    yearValueArray = getCorrectValueArrayByYear(i);
                    if( yearValueArray == null )
                    {
                        yearValueArray = new Array();
                        yearValueArray['year'] = i;
                        dataCollection.addItem(yearValueArray);
                    }
                    yearValueArray['value'+itemIndex] = Math.round(Math.random() * 100);
                }
                addItemToChart();
            }
            
            private function addItemToChart():void
            {
                var currentColumnSet:ColumnSet = columnChart.series[0] as ColumnSet;
                var currentSeries:Array = currentColumnSet.series;
                
                var columnSeries:ColumnSeries = new ColumnSeries();
                columnSeries.yField = "value"+itemIndex;
                columnSeries.xField = "year";
                columnSeries.setStyle("showDataEffect", seriesInterpolate);
                columnSeries.name = itemIndex.toString();
                columnSeries.displayName = "Item " + itemIndex;
                columnSeries.setStyle("fill", new SolidColor( ColorArray.getColorAt(itemIndex), 1) );
                currentSeries.push(columnSeries);
                (columnChart.series[0] as ColumnSet).series = currentSeries;
                itemIndex++;
            }
            
            private function getCorrectValueArrayByYear(year:int):Array
            {
                for each( yearValueArray in dataCollection )
                {
                    if( yearValueArray['year'] == year )
                        return yearValueArray;
                }
                return null;
            }
            
            private function removeItem():void
            {
                var currentColumnSet:ColumnSet = columnChart.series[0] as ColumnSet;
                var currentSeries:Array = currentColumnSet.series;
                var newSeries:Array = new Array();
                var indexToRemove:int = int(cbIndexes.selectedItem);
                for each( var columnSeries:ColumnSeries in currentSeries )
                {
                    // Doing check by name, but could be by yField or by displayName also.
                    if( int(columnSeries.name) != indexToRemove)
                    {
                        newSeries.push(columnSeries);
                    }
                }
                (columnChart.series[0] as ColumnSet).series = newSeries;
                // Put color of the deleted Column at back of the line 
                ColorArray.shiftColors(indexToRemove);
                indexesInGraph.removeItemAt(cbIndexes.selectedIndex);
                removeItemFromDataCollection(indexToRemove);
            }
            
            private function removeItemFromDataCollection(indexToRemove:int):void
            {
                var newYearValueArray:Array;
                var newDataCollection:ArrayCollection = new ArrayCollection();
                for each( yearValueArray in dataCollection )
                {
                    newYearValueArray = new Array();
                    newYearValueArray['year'] = yearValueArray['year'];
                    for each( var i:int in indexesInGraph )
                    {
                        newYearValueArray['value'+i] = yearValueArray['value'+i]
                    }
                    newDataCollection.addItem( newYearValueArray );
                }
                dataCollection = newDataCollection;
            }
            
            
        ]]>
    </mx:Script>
    
    <mx:SeriesInterpolate duration="1000" id="seriesInterpolate"/>
    
    <mx:VBox width="100%"
             height="100%"
             backgroundColor="#FFFFFF"
             verticalAlign="middle"
             horizontalAlign="center">
        <mx:Text fontSize="14" paddingLeft="53"
                 text="Dynamic ColumnChart by www.Flex-Blog.com"
                 width="700"
                 textAlign="center" 
                 fontWeight="bold"/>
        
        <mx:Text fontSize="10" paddingLeft="53"
                 text="Add or Remove items by using the controls at the bottom of the Chart"
                 width="700"
                 textAlign="center" 
                 fontWeight="bold"/>

        <mx:Legend dataProvider="{columnChart}" direction="horizontal" /> 
        <mx:ColumnChart type="clustered"
                        showDataTips="true"
                        id="columnChart"
                        width="700"
                        dataProvider="{dataCollection}">
			

            <mx:horizontalAxis>
                <mx:CategoryAxis title="Year"
                                 categoryField="year"
                                 id="yearAxis"/>
            </mx:horizontalAxis>

            <mx:verticalAxis>
                <mx:LinearAxis title="Value"
                               id="countAxis"
                               autoAdjust="true"/>
            </mx:verticalAxis>

            <mx:horizontalAxisRenderers>
                <mx:AxisRenderer axisStroke="{new Stroke(0x666666, 1, 1)}"
                                 showLine="true"
                                 axisTitleStyleName="chartTitle"
                                 axis="{yearAxis}"/>
            </mx:horizontalAxisRenderers>

            <mx:verticalAxisRenderers>
                <mx:AxisRenderer axisStroke="{new Stroke(0x666666, 1, 1)}"
                                 verticalAxisTitleAlignment="vertical"
                                 showLine="true"
                                 axisTitleStyleName="chartTitle"
                                 axis="{countAxis}"/>
            </mx:verticalAxisRenderers>

            <mx:series>

                <mx:ColumnSet id="set"
                              type="clustered"
                              dataProvider="{dataCollection}">

                </mx:ColumnSet>

            </mx:series>

            <mx:backgroundElements>
                <mx:Grid styleName="myLineChart"
                         borderStyle="solid"/>
                <mx:GridLines horizontalShowOrigin="true"
                              verticalShowOrigin="false"
                              y="0"
                              horizontalStroke="{new Stroke(0x666666,1,1)}"/>
            </mx:backgroundElements>

        </mx:ColumnChart>


        <mx:VBox width="700"
                 paddingLeft="53">
            
            <mx:HBox width="100%"
                     borderStyle="solid"
                     borderThickness="1"
                     borderColor="#666666"
                     paddingTop="10"
                     paddingBottom="10"
                     horizontalAlign="center">
                <mx:Button label="Add New Item"
                           click="addItem()"/>
                <mx:Label text="Remove item with index:"/>
                <mx:ComboBox dataProvider="{indexesInGraph}"
                             id="cbIndexes"
                             width="60"/>
                <mx:Button click="removeItem()"
                           label="Remove" enabled="{indexesInGraph.length > 0}"/>
            </mx:HBox>
            
            <mx:Spacer height="50"/>
            <mx:HBox width="100%" horizontalAlign="center">
                <mx:Text textAlign="center"
                         text="www.Flex-Blog.com"
                         buttonMode="true"
                         click="navigateToURL(new URLRequest('http://www.flex-blog.com'))"
                         mouseChildren="false"/>
                <mx:Text text="-"/>
                <mx:Text textAlign="center"
                         useHandCursor="true"
                         buttonMode="true"
                         click="navigateToURL(new URLRequest('mailto:[email protected]'))" 
                         toolTip="[email protected]"
                         mouseChildren="false"
                         text="Arjan Nieuwenhuizen"/>
            </mx:HBox>
            
        </mx:VBox>

</mx:VBox>
    
</mx:Application>