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

Customizing colors of a Column Chart

A Column chart when instantiated, draws columns of the same color, whatever is the default or that chosen by the programmer in the ‘color’ property of the ColumnChart tag. Lets see a few examples to walk through the variations.

For the rest of the article the array-collection named “data” is assumed to be the data source for the graph.

<mx:ArrayCollection id="data">
     <mx:source>
           <mx:Array>
                <mx:Object x_value="x1" y_value="20"/>
                <mx:Object x_value="x2" y_value="33"/>
                <mx:Object x_value="x3" y_value="24"/>
                <mx:Object x_value="x4" y_value="47"/>
                <mx:Object x_value="x5" y_value="58"/>
                <mx:Object x_value="x6" y_value="10"/>
                <mx:Object x_value="x7" y_value="29"/>
                <mx:Object x_value="x8" y_value="29"/>
           </mx:Array>
     </mx:source>
</mx:ArrayCollection>

Now a normal chart code produces the following graph.

<mx:ColumnChart dataProvider="{data}">
      <mx:horizontalAxis>
            <mx:CategoryAxis categoryField="x_value"/>
      </mx:horizontalAxis>
      <mx:series>
          <mx:ColumnSeries xField="x_value" yField="y_value" />
      </mx:series>
</mx:ColumnChart>

If we want to have the columns have a desired color, say(#3355FF) we have to make the following change.

<mx:series>
     <mx:ColumnSeries color="0x3355ff" xField="x_value" yField="y_value">
          <mx:fill>
               <mx:SolidColor>
                    <mx:color>0x335f4c</mx:color>
               </mx:SolidColor>
          </mx:fill>
      </mx:ColumnSeries>
</mx:series>

And we get the following graph

If we want that the colors of each of the columns are different, the following approach is useful.

Making the array “colorsArray” bindable allows us to reflect any changes to the array at any stage of the program to the color of the columns using the array.

<mx:ColumnChart height="300" dataProvider="{data}">
	<mx:horizontalAxis>
		<mx:CategoryAxis categoryField="x_value" />
	</mx:horizontalAxis>
	<mx:series>
		<mx:ColumnSeries xField="x_value" yField="y_value" fills="{colorsArray}" />
	</mx:series>
</mx:ColumnChart>
<mx:Script>
     import mx.graphics.SolidColor;
     [Bindable]
     private var colorsArray:Array = new Array
		     	(
		        new SolidColor(0xFF6699, 1),
		        new SolidColor(0x9900CC, 1),
		        new SolidColor(0xFFFF33, 1),
		        new SolidColor(0x99FF99, 1),
		        new SolidColor(0x9900CC, 1),
		        new SolidColor(0x66CCFF, 1),
		        new SolidColor(0x000000, 1),
		        new SolidColor(0xFFFF33, 1),
		        new SolidColor(0xCC99CC, 1),
		        new SolidColor(0xFF6633, 1)
    			);
</mx:Script>

So these were the methods to add colors to the columns of a Column Chart as well as a Bar Chart.

My new Guitar and my new found life :)

Guys out there….

There is this good thing that happened to me i want to share with u all…. At the verge of extreme boredom and monotoniety in my college life came the breakthrough of my internship at eBay. And since then i am very happy with the work we do in here. Plus i also found one of my most cherished dreams since childhood come to terms…

I actually bought a guitar. a true real solid guitar that i can play with my own fingers. And now that i have it i spend most of my office time looking up guitar on the freely available net in my office, the first thing in the day. My computer at home and eBay are busy processing EADGBe chords rather than CPU cycles. If they were smart enough, they would have rebelled, definitely, for using them for work nowhere related to computing. thats unfair to them, but fair enough for me.

Having said all that,i must admit that all of it is of very little help. learning guitar is one hectic job and has no shortcuts or easy cuts. So if anyone finds this blog along somewhere at any point of time and can fathom my miseries in learning guitar, please be benevolent to dole out your guitar experience so that i can also get some of it…..

C ya soon….