Arial chart – Chart over a Chart


Today, I am going to post something different. We all know about RIA s. Even we all try very hard to make our project very user friendly and rich.

I am sharing my one experience. In my one project, there was a need arise that our client needs to show data in a some main head and under that he needs to show some other data, too. Like some thing tree type data to show in Charts ❓

Roll Over Chart

( e.g. : Main head is : Expense in that three Sub heads Revenue, Interest, Discount )

  1. Expense
  • Revenue
  • Interest
  • Discount

In this case we were in a problem that how to show the data in a tree manner with chart. And another constraint of our client was, the user should not moved out to some another view also (means if possible user should not have to click some where and a new view shown to him and again the user clicks on something and he/she will be redirected back. )

So, after some brain itching thoughts I come up to one solution 💡

That, I made a custom component : On RollOver on the bar of a Chart, another small Chart will be appear, which shows the information of its sub heads – and on a RollOut that chart (aerial – screen pass – view) will be disposed and the main chart look as it is.

So friends here is that Jewelle…

The files are as below : MayurRollOverChart.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="" layout="absolute">
import mx.managers.PopUpManager;
import mx.charts.HitData;
import mx.core.IFlexDisplayObject;
import mx.collections.ArrayCollection;
import itemRenderer.SmallChartDown;

private var barChartAC_2:ArrayCollection = new ArrayCollection([
{hrs:10,amt:'Lost Income',value:96},

private var barChartAC_72:ArrayCollection = new ArrayCollection([
{hrs:'Revenue',amt:10,dispName:'$1 M',value:8},
private var barChartAC_96:ArrayCollection = new ArrayCollection([
{hrs:'Revenue',amt:19,dispName:'$1 M',value:8},
private var barChartAC_120:ArrayCollection = new ArrayCollection([
{hrs:'Revenue',amt:10,dispName:'$1 M',value:8},
{hrs:'Rev',amt:30,dispName:'$1 M',value:8},

public var smallChart_down:IFlexDisplayObject;

private function chageDownBarChartAC(barHrs:int):ArrayCollection
if(barHrs == 72)
return barChartAC_72;
elseà if(barHrs == 96)
return barChartAC_96;
elseà if(barHrs == 120)
return barChartAC_120;
return barChartAC_72;

private function itemRolloverData(e:ChartItemEvent):void
var h : HitData = e.hitData;
//outPutTexArea.text = " --> "+e.hitData.item.value;

if(e.hitData.item.value == 72)
SmallChartDown.barChartAC = chageDownBarChartAC(72);
else if(e.hitData.item.value == 96)
SmallChartDown.barChartAC = chageDownBarChartAC(96);
else if(e.hitData.item.value == 120)
SmallChartDown.barChartAC = chageDownBarChartAC(120);

smallChart_down = PopUpManager.createPopUp(this,SmallChartDown,false);"smallChart_down";
smallChart_down.width =175;
smallChart_down.height =200;

if(mouseX+smallChart_down.width > this.width)
smallChart_down.x = (stage.mouseX-(smallChart_down.width-7))
smallChart_down.x = stage.mouseX-7;

if(mouseY+smallChart_down.height > this.height)
smallChart_down.y = (stage.mouseY-(smallChart_down.height-7))
smallChart_down.y = stage.mouseY-7;

private var isMouseIn:Boolean;

private function changeInFlag(event):void
isMouseIn = true;
private function changeOutFlag(event):void
isMouseIn = false;

private function itemRolloutData(e:MouseEvent):void
if(isMouseIn == false)
if( smallChart_down!=null)Ã Ã Ã  //if popup exist then remove it
smallChart_down =null;
<mx:Panel id="panel" width="450" height="450" headerColors="#FF0000"
left="25" top="25" >
<mx:Text text="Arial Chart - Chart over a Chart" color="#FF0000" fontWeight="bold" left="10"Ã  />
<mx:BarChart id="barChart_2" width="275" height="200"
styleName="barChartStyle" type="stacked"
rollOut="itemRolloutData(event)"Ã  >
<mx:series >
<mx:BarSeries xField="hrs" />
<mx:verticalAxis >
<mx:CategoryAxis categoryField="amt"/>

And the other one is : SmallChartDown.mxml

<mx:Canvas xmlns:mx=""
left="10" right="10" top="10"
verticalScrollPolicy="off" horizontalScrollPolicy="auto"
width="100%" height="100%" minWidth="150" maxWidth="300"
borderStyle="solid" borderColor="#96AECD"
backgroundColor="#FaFaFa" alpha="0.79"
label="Small Chart Down"Ã  >

fill: #0000ff;
fill: #ff0000;
color: #0000f0;
import mx.binding.utils.BindingUtils;
import mx.managers.PopUpManager;
import mx.core.IFlexDisplayObject;
import mx.charts.HitData;
import mx.controls.Alert;
import mx.collections.ArrayCollection;

private static var _barChartAC:ArrayCollection = new ArrayCollection([

public static function set barChartAC(externalAC:ArrayCollection):void
_barChartAC = externalAC;
private var _nWidth:int;

public function set nWidth(i:int):void
_nWidth = i;
public function get nWidth():int
return _nWidth;
private function adjustWidth()
nWidth = _barChartAC.length;
barChart_1.width = nWidth*50;
<mx:ColumnChart id="barChart_1" top="5" bottom="25" showDataTips="true"
height="100%" dataProvider="{_barChartAC}"
verticalAxisStyleName="bar2" >
<mx:ColumnSeries yField="amt" xField="hrs" />
<mx:CategoryAxis categoryField="hrs" ticksBetweenLabels="true"/>


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: