Creating a simple stacked column chart – FlexA post from my blog: http://jbkflex.wordpress.com/2012/01/31/creating-a-simpl...
private var stackedData:ArrayCollection = new ArrayCollection([{month:"Jan 2009",unitedstates: 200, india:101, brazil: 25}...
<mx:ColumnSet type="stacked">           <mx:ColumnSeries yField="unitedstates" displayName="United States"/>           <mx...
<fx:Script><![CDATA[import mx.collections.ArrayCollection;[Bindable]private var stackedData:ArrayCollection = new ArrayCol...
<mx:ColumnSeries yField="unitedstates" displayName="United States"/>        <mx:ColumnSeries yField="india" displayName="I...
Upcoming SlideShare
Loading in …5
×

Creating a simple stacked column chart – Flex

2,638 views

Published on

When I was working with Flex and Action Script 3.0 I used to do a lot of Dashboard and data visualization applications. One thing that I used to do often was a stacked column chart displaying multi dimensional data. So I thought of posting an example of creating a stacked chart out of the files deep within my Flex project folders. Let’s see the demo first and then move on to the explanation.
Demo: http://jbk404.site50.net/flex/playvideo/stackedchart.html
For the full post download the file or visit the actual blog post link: http://jbkflex.wordpress.com/2012/01/31/creating-a-simple-stacked-column-chart-flex/

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
2,638
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
10
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Creating a simple stacked column chart – Flex

  1. 1. Creating a simple stacked column chart – FlexA post from my blog: http://jbkflex.wordpress.com/2012/01/31/creating-a-simple-stacked-column-chart-flex/When I was working with Flex and Action Script 3.0 I used to do a lot of Dashboard and data visualizationapplications. One thing that I used to do often was a stacked column chart displaying multi dimensional data. So Ithought of posting an example of creating a stacked chart out of the files deep within my Flex project folders. Let’ssee the demo first and then move on to the explanation.Demo: http://jbk404.site50.net/flex/playvideo/stackedchart.html Stacked Column Chart - data visualization for three countriesWhy a stacked chart?In a normal column chart we show two dimensional data for the item that we are charting. One axis shows thecategory of division and the other shows the value. If you see the demo app or the picture above the x-axiscategorizes the data into months and the y-axis shows the values. The item that we are charting is countries (India,USA, and Brazil). Had it been a normal column chart then we would have only one country data to visualize. Thatsingle country would have been our charting item (the object for which we are plotting the data). But in this case wehave three countries and their data to visualize. So to do it all in a single chart we need a stacked chart in which onecolumn (one particular month) is a stack of the values (individual columns) of each of the three counties. Below is thedata structure that we will plot in the stacked column chart,
  2. 2. private var stackedData:ArrayCollection = new ArrayCollection([{month:"Jan 2009",unitedstates: 200, india:101, brazil: 25},{month:"Feb 2009",unitedstates: 100, india:34, brazil: 2},{month:"March 2009",unitedstates: 50, india:10, brazil: 35},{month:"Sep 2009",unitedstates: 160, india:51, brazil: 25},{month:"Oct 2009",unitedstates: 20, india:20, brazil: 100},]);I will not go into the explanation of each of the classes (such as ArrayCollection) that I am using here, as this exampleis meant for someone who is familiar with Flex and ActionScript.Had we been plotting a normal column chart the data structure would have been something like it is below,private var data_normal_column_chart:ArrayCollection = new ArrayCollection([{month:"Jan 2009",india:101},{month:"Feb 2009",india:34},{month:"March 2009,india:10},{month:"Sep 2009",india:51},{month:"Oct 2009",india:20},]);Writing the MXML code – creating the chart component<mx:VBox width="100%" height="100%"> <mx:ColumnChart id="chart" width="500" height="500" dataProvider="{stackedData}"showDataTips="true"> <mx:horizontalAxis> <mx:CategoryAxis categoryField="month"/> </mx:horizontalAxis> <mx:series>
  3. 3. <mx:ColumnSet type="stacked"> <mx:ColumnSeries yField="unitedstates" displayName="United States"/> <mx:ColumnSeries yField="india" displayName="India"/> <mx:ColumnSeries yField="brazil" displayName="Brazil"/> </mx:ColumnSet> </mx:series> </mx:ColumnChart> <mx:Legend dataProvider="{chart}" direction="horizontal"/></mx:VBox>To create a stacked chart we have to use the ColumnChart component. You can use the ColumnChart to representa variety of different charts including simple columns, clustered columns, stacked, 100% stacked, and high/low. Tovisualize the data in our data structure (stackedData) it is data binded to the chart using the dataProvider property.And then we have set the showDataTips property to true so that a tooltip displays the necessary information for eachcolumn when user moves his mouse over it. The horizontal or the x-axis is a category axis which categorizes the databy months and I have specified the categoryField to month which is defined in the data. You usethe ColumnSeries chart series with the ColumnChart control to define the data for the chart. A ColumnChart controlexpects its series property to contain an array of ColumnSeries objects. Now, to stack the columns usetheColumnSet grouping and set the type property to stacked. There are other options available for type property todefine the grouping behavior of the chart series – clustered, 100%, overlaid. You can check them out in theColumnSet link that I have given. You can see in the code that for each ColumnSeries I have specified the data forthe country that it will display in the yField property. The displayName displays the value in the tooltip and the legend.This is all to create a simple stacked column chart. And finally we have the legend component that shows the chartlegend.Below is the full source code. You can copy the code and paste it in an .mxml file inside any of your project.<?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"width="100%" height="100%"pageTitle="Stacked Column Chart">
  4. 4. <fx:Script><![CDATA[import mx.collections.ArrayCollection;[Bindable]private var stackedData:ArrayCollection = new ArrayCollection([{month:"Jan 2009",unitedstates: 200, india:101, brazil: 25},{month:"Feb 2009",unitedstates: 100, india:34, brazil: 2},{month:"March 2009",unitedstates: 50, india:10, brazil: 35},{month:"Sep 2009",unitedstates: 160, india:51, brazil: 25},{month:"Oct 2009",unitedstates: 20, india:20, brazil: 100},]);]]></fx:Script><mx:VBox width="100%" height="100%"> <mx:ColumnChart id="chart" width="500" height="500" dataProvider="{stackedData}"showDataTips="true"> <mx:horizontalAxis> <mx:CategoryAxis categoryField="month"/> </mx:horizontalAxis> <mx:series> <mx:ColumnSet type="stacked">
  5. 5. <mx:ColumnSeries yField="unitedstates" displayName="United States"/> <mx:ColumnSeries yField="india" displayName="India"/> <mx:ColumnSeries yField="brazil" displayName="Brazil"/> </mx:ColumnSet> </mx:series> </mx:ColumnChart> <mx:Legend dataProvider="{chart}" direction="horizontal"/></mx:VBox></s:Application>Here is the link to the demo once again: http://jbk404.site50.net/flex/playvideo/stackedchart.htmlYou can find a detailed tutorial on creating stacked chart- by Adobe in thislink:http://help.adobe.com/en_US/flex/using/WS2db454920e96a9e51e63e3d11c0bf69084-7c6b.html

×