SlideShare a Scribd company logo
1 of 5
Download to read offline
Creating a simple stacked column chart – Flex
A 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 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




                               Stacked Column Chart - data visualization for three countries

Why a stacked chart?
In a normal column chart we show two dimensional data for the item that we are charting. One axis shows the
category of division and the other shows the value. If you see the demo app or the picture above the x-axis
categorizes 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. That
single country would have been our charting item (the object for which we are plotting the data). But in this case we
have three countries and their data to visualize. So to do it all in a single chart we need a stacked chart in which one
column (one particular month) is a stack of the values (individual columns) of each of the three counties. Below is the
data structure that we will plot in the stacked column chart,
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 example
is 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>
<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 represent
a variety of different charts including simple columns, clustered columns, stacked, 100% stacked, and high/low. To
visualize 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 each
column when user moves his mouse over it. The horizontal or the x-axis is a category axis which categorizes the data
by months and I have specified the categoryField to month which is defined in the data. You use
the ColumnSeries chart series with the ColumnChart control to define the data for the chart. A ColumnChart control
expects its series property to contain an array of ColumnSeries objects. Now, to stack the columns use
theColumnSet grouping and set the type property to stacked. There are other options available for type property to
define the grouping behavior of the chart series – clustered, 100%, overlaid. You can check them out in the
ColumnSet link that I have given. You can see in the code that for each ColumnSeries I have specified the data for
the 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 chart
legend.
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">
<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">
<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.html
You can find a detailed tutorial on creating stacked chart- by Adobe in this
link:http://help.adobe.com/en_US/flex/using/WS2db454920e96a9e51e63e3d11c0bf69084-7c6b.html

More Related Content

Recently uploaded

How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?IES VE
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdfPedro Manuel
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDELiveplex
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPathCommunity
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IES VE
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8DianaGray10
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Websitedgelyza
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfDaniel Santiago Silva Capera
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding TeamAdam Moalla
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintMahmoud Rabie
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaborationbruanjhuli
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024D Cloud Solutions
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxGDSC PJATK
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URLRuncy Oommen
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationIES VE
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAshyamraj55
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7DianaGray10
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesMd Hossain Ali
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostMatt Ray
 

Recently uploaded (20)

How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?
 
Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdf
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation Developers
 
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
IESVE Software for Florida Code Compliance Using ASHRAE 90.1-2019
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Website
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
 
9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership Blueprint
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024
 
Cybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptxCybersecurity Workshop #1.pptx
Cybersecurity Workshop #1.pptx
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URL
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
 
20230104 - machine vision
20230104 - machine vision20230104 - machine vision
20230104 - machine vision
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7
 
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just MinutesAI Fame Rush Review – Virtual Influencer Creation In Just Minutes
AI Fame Rush Review – Virtual Influencer Creation In Just Minutes
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
 

Creating a simple stacked column chart – Flex

  • 1. Creating a simple stacked column chart – Flex A 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 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 Stacked Column Chart - data visualization for three countries Why a stacked chart? In a normal column chart we show two dimensional data for the item that we are charting. One axis shows the category of division and the other shows the value. If you see the demo app or the picture above the x-axis categorizes 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. That single country would have been our charting item (the object for which we are plotting the data). But in this case we have three countries and their data to visualize. So to do it all in a single chart we need a stacked chart in which one column (one particular month) is a stack of the values (individual columns) of each of the three counties. Below is the data structure that we will plot in the stacked column chart,
  • 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 example is 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. <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 represent a variety of different charts including simple columns, clustered columns, stacked, 100% stacked, and high/low. To visualize 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 each column when user moves his mouse over it. The horizontal or the x-axis is a category axis which categorizes the data by months and I have specified the categoryField to month which is defined in the data. You use the ColumnSeries chart series with the ColumnChart control to define the data for the chart. A ColumnChart control expects its series property to contain an array of ColumnSeries objects. Now, to stack the columns use theColumnSet grouping and set the type property to stacked. There are other options available for type property to define the grouping behavior of the chart series – clustered, 100%, overlaid. You can check them out in the ColumnSet link that I have given. You can see in the code that for each ColumnSeries I have specified the data for the 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 chart legend. 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. <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. <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.html You can find a detailed tutorial on creating stacked chart- by Adobe in this link:http://help.adobe.com/en_US/flex/using/WS2db454920e96a9e51e63e3d11c0bf69084-7c6b.html