Dynamic series of Column Chart

When using Column charts in flex with static set of data that we know of at compile time, one can go ahead with the default implementation of the chart. This will provide a simple chart. One can use multiple series on a single chart to depict different data categorized or measured across some common parameter.

For eg,
if our data set is the set comprising information about our expenses and earnings of one week, then the chart should show each data on each day of the week. i.e., expense and earnings of day1, day2 and so on for 7 days of the week.

The data set will be an array collection :-

This produces the following graph. the display name allows us to have different names displayed when we hover over the different series to help users to understand what data they are viewing, as shown in the figure.

<mx:ArrayCollection id="data">
      <mx:source>
           <mx:Array>
               <mx:Object day="1" earning="220" expense="20"/>
               <mx:Object day="2" earning="200" expense="33"/>
               <mx:Object day="3" earning="225" expense="24"/>
               <mx:Object day="4" earning="235" expense="47"/>
               <mx:Object day="5" earning="245" expense="58"/>
               <mx:Object day="6" earning="265" expense="10"/>
               <mx:Object day="7" earning="230" expense="29"/>
           </mx:Array>
      </mx:source>
</mx:ArrayCollection>
The code to create a multiple series column chart is to simply add as many columns as desired in the series tag and set their x and y fields ( and sometimes one can have different data providers for each and different x and y fields too). Here colorsArray is an array of some predefined colors that provide the colors of the columns. 
<mx:ColumnChart dataProvider="{data}" showDataTips="true">
<mx:horizontalAxis>
            <mx:CategoryAxis id="ca" categoryField="day" title="Financial report" />
</mx:horizontalAxis>
<mx:series>
           <mx:ColumnSeries xField="day" yField="expense" fills="{colorsArray}" displayName="Expense"/>
           <mx:ColumnSeries xField="day" yField="earning" fills="{colorsArray}" displayName="Earning"/>
</mx:series>
</mx:ColumnChart>
This produces the following graph. the display name allows us to have different names displayed when we hover over the different series to help users to understand what data they are viewing, as shown in the figure.
Graph with different data shown in multiple series

But when the data source is not uniform and known at compile time, such charts become useless. Consider a real world applications when data is fetched from dynamic methods like JSP, servlets, PHP interfaces that fetch varying amount of data depending on some user inputs.

For eg., if the columns of plotting is not known at compile time and decided by user input at run time. If the user is given a choice to select the parameters [one or more of - earnings, expense,savings,tax, education,investment] upon which he wishes to compare his money, the no. of columns will be different every time the user selects the no. of columns.

In such cases the graph should be able to draw as many series as desired and this information is available only at run time. So the following piece of code adds column series at run time.

The function is passed an array of objects that represent the parameters chosen by the user from the list of the supplied parameters. It then draws those many columns and sets their x and y fields.

public function drawTheColumns(parameters:Array):void
{
	var tmp:ColumnSeries = new ColumnSeries();
	series = [tmp];
	for(var i:int=0;i<parameters.length;i++)
     	{
     		tmp = new ColumnSeries();
     		tmp.id = "column"+Number(i);
     		tmp.xField = "day";
     		tmp.yField = parameters[i];
     		tmp.displayName = parameters[i];
     		series[i] = tmp;
     	}
}

And the data source is modified like this to hold various data fields.

<mx:ArrayCollection id="data">
	<mx:source>
		<mx:Array>
			<mx:Object day="1" earning="220" expense="20" saving="120" tax="75"/>
			<mx:Object day="2" earning="200" expense="33" saving="175" tax="65"/>
			<mx:Object day="3" earning="225" expense="24" saving="180" tax="55"/>
			<mx:Object day="4" earning="235" expense="47" saving="140" tax="25"/>
			<mx:Object day="5" earning="245" expense="58" saving="135" tax="55"/>
			<mx:Object day="6" earning="265" expense="10" saving="115" tax="45"/>
			<mx:Object day="7" earning="230" expense="29" saving="165" tax="85"/>
		</mx:Array>
	</mx:source>
</mx:ArrayCollection>

Assuming user selects earning,tax and saving fields from the UI, the following graph is generated.

Chart with dynamically generated columns