Arial chart – Chart over a Chart

Friends…

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

( 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="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
<![CDATA[
import mx.managers.PopUpManager;
import mx.charts.HitData;
import mx.core.IFlexDisplayObject;
import mx.charts.events.ChartItemEvent;
import mx.collections.ArrayCollection;
import itemRenderer.SmallChartDown;

private var barChartAC_2:ArrayCollection = new ArrayCollection([
{hrs:5,amt:'Expenses',value:72},
{hrs:10,amt:'Lost Income',value:96},
{hrs:15,amt:'Penalties',value:120}
]);

private var barChartAC_72:ArrayCollection = new ArrayCollection([
{hrs:'Revenue',amt:10,dispName:'$1 M',value:8},
{hrs:'Interest',amt:20,value:24},
{hrs:'Discount',amt:30,value:48}
]);
private var barChartAC_96:ArrayCollection = new ArrayCollection([
{hrs:'Revenue',amt:19,dispName:'$1 M',value:8},
{hrs:'Interes',amt:22,value:24},
{hrs:'Discount',amt:33,value:48}
]);
private var barChartAC_120:ArrayCollection = new ArrayCollection([
{hrs:'Revenue',amt:10,dispName:'$1 M',value:8},
{hrs:'Interest',amt:25,value:24},
{hrs:'Discount',amt:63,value:48},
{hrs:'Rev',amt:30,dispName:'$1 M',value:8},
{hrs:'Int',amt:55,value:24},
{hrs:'Disc',amt:43,value:48}
]);

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;
else
return barChartAC_72;
}

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

if(smallChart_down==null)
{
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.name="smallChart_down";
smallChart_down.width =175;
smallChart_down.height =200;
smallChart_down.addEventListener(MouseEvent.MOUSE_OVER,changeInFlag)
smallChart_down.addEventListener(MouseEvent.ROLL_OUT,changeOutFlag);

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

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

[Bindable]
private var isMouseIn:Boolean;

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

private function itemRolloutData(e:MouseEvent):void
{
if(isMouseIn == false)
{
if( smallChart_down!=null)Â Â Â  //if popup exist then remove it
{
smallChart_down.removeEventListener(MouseEvent.ROLL_OVER,changeInFlag);
smallChart_down.removeEventListener(MouseEvent.ROLL_OUT,changeOutFlag);
PopUpManager.removePopUp(smallChart_down);
smallChart_down =null;
}
}
}
]]>
</mx:Script>
<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"
dataProvider="{barChartAC_2}"
styleName="barChartStyle" type="stacked"
itemRollOver="itemRolloverData(event)"
itemRollOut="itemRolloutData(event)"
rollOut="itemRolloutData(event)"Â  >
<mx:series >
<mx:BarSeries xField="hrs" />
</mx:series>
<mx:verticalAxis >
<mx:CategoryAxis categoryField="amt"/>
</mx:verticalAxis>
</mx:BarChart>
</mx:Panel>
</mx:Application>

And the other one is : SmallChartDown.mxml

<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"
left="10" right="10" top="10"
verticalScrollPolicy="off" horizontalScrollPolicy="auto"
width="100%" height="100%" minWidth="150" maxWidth="300"
name="SmallChart"
borderStyle="solid" borderColor="#96AECD"
backgroundColor="#FaFaFa" alpha="0.79"
label="Small Chart Down"Â  >

<mx:Style>
.bar1
{
fill: #0000ff;
}
.bar2
{
fill: #ff0000;
}
.barStyleCol
{
color: #0000f0;
}
</mx:Style>
<mx:Script>
<![CDATA[
import mx.binding.utils.BindingUtils;
import mx.managers.PopUpManager;
import mx.core.IFlexDisplayObject;
import mx.charts.HitData;
import mx.charts.events.ChartItemEvent;
import mx.controls.Alert;
import mx.collections.ArrayCollection;

private static var _barChartAC:ArrayCollection = new ArrayCollection([
{hrs:'Revenue',amt:7,value:8},
{hrs:'Interest',amt:2,value:24},
{hrs:'Discount',amt:5,value:48},
]);

public static function set barChartAC(externalAC:ArrayCollection):void
{
_barChartAC.enableAutoUpdate();
_barChartAC = externalAC;
_barChartAC.refresh();
}
[Bindable]
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:Script>
<mx:ColumnChart id="barChart_1" top="5" bottom="25" showDataTips="true"
height="100%" dataProvider="{_barChartAC}"
creationComplete="adjustWidth()"
horizontalAxisStyleName="bar1"
chartSeriesStyles="{['bar1','bar2','barStyleCol']}"
verticalAxisStyleName="bar2" >
<mx:series>
<mx:ColumnSeries yField="amt" xField="hrs" />
</mx:series>
<mx:horizontalAxis>
<mx:CategoryAxis categoryField="hrs" ticksBetweenLabels="true"/>
</mx:horizontalAxis>
</mx:ColumnChart>
</mx:Canvas>