Monday, April 7, 2008

Here is much awaited PivotComponent in Flex

Well here is a implementation of Excels pivotComponent . I have used the OLAPDataGrid and OLAP API's of flex 3.0 .

For better experience click here

You are seeing
  • Dimensions List ==> left corner where "company " etc are shown
  • Measures List ==> Below the dimension's list . You can choose "Sum" , "Avg" etc
  • TabNavigator which shows "Chart View " and "grid View"
  • You can drag any dimension and drop it on to the Grid's or Charts row/column/slicer axis [ Grid n Chart will Prompt its acceptance]
  • You ca perform filtering by opening the popup button and unselecting what u dont need
  • You can perform slicing similarly
Source can be found here


Adriano said...

what can I say?? As a excel pivot table user this is a dream come true. Congratulations on the wonderful work . Cant wait to see the final version.

FreeSexyGames said...
This comment has been removed by the author.
flexgames said...

Hi, what is the best way to extend chart to make it drillDown/Up?

Satish T J said...
This comment has been removed by the author.
Satish T J said...

@flexgames :
You can find Sreenivas's blog and source for your performing drilldrown/up of charts


Satish T J said...

@adriano :
Hey kindly use this component and please do report any bugs/ problems you face in using the component .

You can refer my new post on how to use the pivotComponent .

Sreeni has writen a sample of drill down in Adg .. I will try to use it in Odg to provide drill down capability

Luben said...

Dear Satish, thank you for your excellent component! I tried to run it locally, but I always get the following exception (for example when I try to drag/drop a dimension to a column):

TypeError: Error #1009: Cannot access a property or method of a null object reference.
at mx.controls::PopUpButton/commitProperties()[E:\dev\3.0.x\frameworks\projects\framework\src\mx\controls\]
at mx.core::UIComponent/validateProperties()[E:\dev\3.0.x\frameworks\projects\framework\src\mx\core\]
at mx.managers::LayoutManager/validateClient()[E:\dev\3.0.x\frameworks\projects\framework\src\mx\managers\]
at mx.controls::AdvancedDataGrid/createHeaderItems()[C:\Work\flex\dmv_automation\projects\datavisualisation\src\mx\controls\]
at mx.controls::AdvancedDataGrid/createHeaders()[C:\Work\flex\dmv_automation\projects\datavisualisation\src\mx\controls\]
at mx.controls::OLAPDataGrid/createHeaders()[C:\Work\flex\dmv_automation\projects\datavisualisation\src\mx\controls\]
at com.adobe.flex.extras.controls.pivotComponentClasses::OLAPDataGridEx/createHeaders()[/home/lubo/projects/Pivot/com/adobe/flex/extras/controls/pivotComponentClasses/]
at mx.controls.advancedDataGridClasses::AdvancedDataGridBase/makeRowsAndColumns()[C:\Work\flex\dmv_automation\projects\datavisualisation\src\mx\controls\advancedDataGridClasses\]
at mx.controls::AdvancedDataGridBaseEx/makeRowsAndColumns()[C:\Work\flex\dmv_automation\projects\datavisualisation\src\mx\controls\]
at mx.controls::AdvancedDataGrid/makeRowsAndColumns()[C:\Work\flex\dmv_automation\projects\datavisualisation\src\mx\controls\]
at mx.controls.listClasses::AdvancedListBase/makeRowsAndColumnsWithExtraRows()[C:\Work\flex\dmv_automation\projects\datavisualisation\src\mx\controls\listClasses\]
at mx.controls.listClasses::AdvancedListBase/updateDisplayList()[C:\Work\flex\dmv_automation\projects\datavisualisation\src\mx\controls\listClasses\]
at mx.controls::AdvancedDataGridBaseEx/updateDisplayList()[C:\Work\flex\dmv_automation\projects\datavisualisation\src\mx\controls\]
at mx.controls::AdvancedDataGrid/updateDisplayList()[C:\Work\flex\dmv_automation\projects\datavisualisation\src\mx\controls\]
at mx.controls::OLAPDataGrid/updateDisplayList()[C:\Work\flex\dmv_automation\projects\datavisualisation\src\mx\controls\]
at com.adobe.flex.extras.controls.pivotComponentClasses::OLAPDataGridEx/updateDisplayList()[/home/lubo/projects/Pivot/com/adobe/flex/extras/controls/pivotComponentClasses/]
at mx.controls.listClasses::AdvancedListBase/validateDisplayList()[C:\Work\flex\dmv_automation\projects\datavisualisation\src\mx\controls\listClasses\]
at mx.managers::LayoutManager/validateDisplayList()[E:\dev\3.0.x\frameworks\projects\framework\src\mx\managers\]
at mx.managers::LayoutManager/doPhasedInstantiation()[E:\dev\3.0.x\frameworks\projects\framework\src\mx\managers\]
at Function/
at mx.core::UIComponent/callLaterDispatcher2()[E:\dev\3.0.x\frameworks\projects\framework\src\mx\core\]
at mx.core::UIComponent/callLaterDispatcher()[E:\dev\3.0.x\frameworks\projects\framework\src\mx\core\]

Satish T J said...

@luben : Hi luben ,
There is a small bug with the sdk PopUpButton . I have made a small modification for the sdk's PopUpButton and that has been packaged with the component .

The modification is in the sdk's PopupButton
private function removeFromStageHandler(event:Event):void
_popUp = null


private function removeFromStageHandler(event:Event):void
_popUp = null

Actually I have bundled the modified PopUpButton with the package .
Kindly let me know how you built your swc ??
[ It you built the swc using buildSWC.bat .. then it will help me to modify the buildSWC.bat .. If you built the swc from the flexbuilder .. Kindly also include the packaged PopUPButton from the source]

Satish TJ

Adriano said...

@satish :

I will test the component and will let you know of the results. It would be nice to be able to group/ungroup fields like in the AdvancedDataGrid component.

Satish T J said...

@adriano :
Waiting for ur feedback :)

Nancy said...

I'm getting the same error that luben had, but I changed the removedFromStageHandler function and it still doesn't work. Error on line number 469 in

_popUp.cacheAsBitmap = true;

in commitProperties function. Any idea what is up with that?

Nancy said...

ok, I am using Flex Builder and added the mx folder in my build path to compile your library project with the other popUpButton file, but I'm still having the problem. I went in an manually edited the sdk popUpButton file too, but neither of them worked. Also I noticed that changes I make to popUpButton have no effect on the error. Do I need to do something different to make the changes 'stick'?

Satish T J said...

@nancy :
Kindly pic the swc from my above post
named PivotComponent swc

Martin said...

Problems with PopupComment are fixed if you change the PivotComponent project Properties:
Under Flex Library Build Path, Library Path tab, change the framework.swc's Link Type to: "Merged into Code".

Otherwise it uses the External linking.

Christian said...

Hello! Congratulations for this component!
I have tested it...that's great to do the same work like excel pivot table...
Well, I have some questions for you...How can I do for put the "All" (Sum) at the end of the grid or delete it?

satish said...

Hi Christian
Theres a property called "showAll" which does that .. It works fine in Charts .
I think thats a small discrepency with the Grid .
I will fix it this weekend

maragato said...

Excellent !! Would there be a way to export the data shown in Excel ?

c0y0te X said...

Hi, Satish, first of, let me thank you for sharing this really cool component with us, and congratulate you on your work. Second, I've been browsing for a solution on how to export data showed on your pivot component to excel, I've found an object named CubeImpl (mx.olap.DefaultCubeImpl) within the cube (mx.olap.OLAPCube) object, in this CubeImpl I can see properties that contain dimensions and data, the problem I'm facing is that the CubeImpl is not accessible programatically (or at least I don't know how to...) is there anyway to do this? or any other way to read the values from the OLAPDataGrid? I know you already helped a lot by developing the pivot component and I really appreciate it but it would be nice if you can help me with this. If I get it working I'll publish the solution here, I promise. :)

Thanks in advanced for your help

Amilkar Reyna

Helton Marinho said...

Is there a way to change the practice of 'styleName' for all lines of totalizers (total and sub-totals)?

I am doing the following, but is not feasible:


propogate(event:Event):void {
/// original code
var item:OLAPDataGridItemRendererProvider;
var arr:Array=[];
var label:String = "";

for(var a:int=0; a< cube.dimensions.length; a++){
label = cube.dimensions.getItemAt(a).toString();
if(label != "Measures") {
item = new OLAPDataGridItemRendererProvider;
item.styleName = "xxx";
olapgrid.itemRendererProviders = arr;

}catch(E:Error){"ERR:"+E.toString()); }

.xxx {


zavs said...


I am looking to the source code and it contains such headers:

// Copyright 2008 Adobe Systems Incorporated
// All Rights Reserved.

Does the mean, that code is copyrighted by Adobe, and we can't do modifications? Have you written the component for the Adobe?

Saugata said...

How can I read the data for the chart from an xml here?

Romain said...

Hi Satish,

I test your PivotComponent with the OlapDataGrid and I think I found a little bug.

In fact, when you drop many dimensions and the olapdatagrid display many rows, it's impossible to scroll down.

Can you help me if you know what is the origin of this problem ?

Thank you


Mohammed Al-Mansari said...
This comment has been removed by the author.
druvini said...

Hi nice of you for sharing the component but i am not able to configure it . i have down loaded the swc and used the code which u have given but i am not able to get the out put. Can plz post the mxml page which show the using ur component

crorella said...


I'm using a xmla bridge to get the data of the cube, do you know how can I feed the Pivot Component with the result of the query?.
The result is a IOLAPResult, but the PivotComponent expects a ICollectionView as datasource.


Msn said...

Hey, im with problem in uncheck all values in the combo dimension,




MENDONÇA said...

There is a pocibilidade format of the values of $ and olapdatagridex tip. ,. how?


Manu said...

How to set the item renderer on the OLAPDataGrid ? I want to set the number formatter for the datagrid.

Gau said...

Hello Satish,

Is there any way to make it work with xml data.

jimi said...

Hi Satish,

Any recent news or updates on the PivotComponent? I'm looking at using it in a new app.



crzymnmchl said...

The vertical scrolling problem when rows are added was a showstopper for me - fixed it by editing

public function OLAPDataGridEx() needs a

this.enabled = true; added to it.

Godzhesas said...

You've done an excellent job! I invite you to take a look at our Flex olap pivot table component at Flexmonster

akitaelisa said...


First of all, just say to you "Congratulations!! This componet is impresive!"

I have been working in it, and i found a little error when we wanted tu put the dimension "All" to be no selected, and filter the results to be no present this dimension "All".

This is the solution, in the method

MyCheckBox.storeChange(event) by this, add these lines:

if(this.label == "(All)"&& this.selected == false ){

//put the same that when the condicion is: if(this.label != "(All)" && this.selected == false)


Hope this helps.

Congratulations again and thank you for your work.

peter.nijsen said...
This comment has been removed by the author.
Abdul said...

Very Nice..
I Expect this one only..!

AMUTHA said...

hi thanks for this component..this help me lot.. but i want add one more things in this component, that is if i click any paricular item in grid,that will show the that particular count related data in a popup like excel...can you plz help me..

reiluk said...

proff component, do i hide the "ALL" selection or display?

reiluk said...

proff component, do i hide the "ALL" selection or display?

Kumar Kalra said...

Its an amazing component. But i am facing an issue. I am using flex sdk 4.1 and the drag drop is not working.I am able to drag, but its not getting dropped. Can you please help me with this.