This is awesome!
 

wow its just great.. I have tried the component, but not sure how can i show tooltips with data on mouse over of the graphs.. 
 

Very impressive charting component. A few questions.

- How can the color of the 3 panels of the 3D space be set. By default there something like 0xffffff, 0x666666, 0x999999. i.e. white plus two light grays.

- How can a datatip be used?

- When the example is run the number 361 appears above 'Buttons to rotate'. This number changes based upon the 3D data that is charted. What is the solution to get rid of it?

Thanks.

Joe
 

Thanks. You can specify the color of the columns in the MXML. If you download the component from Adobe exchange you would notice that the gold, silver bronze colors are specified in the MXML.

Very basic tooltips were supported earlier but I pbly had taken them out in order to support more advanced ones that were not ready by this version. Can you please try and give toolTip="true" in the column3D component tags and see if it still works?

For the overlapping text there was no good way to ensure it will not overlap without the chart being really small compared to the container. However there may be some way to tweak it out .
 

Thanks for getting back.

We are able to set the column colors. Works fine. However need to change the color of the two rear, top and bottom 3D planes. They appear as white plus 3 shades of gray. Could not find on the WWW what the CSS option was.

Per the column datatips, if we use 'showDatTips=true' then our dataTipFunction fires and a datatip does appear, however its incorrect per the column the mouse is placed over. Also if mouse is placed outside of 3D chart () datatips appear when close to the chart.

Also would be nice if the graph legend (displayName attribute) when drawn on the 3D chart axis accepted > 20 charactes (perhaps 30 characters).
 

The datatips you would see by showDataTips wont be correct as they were not complete. So I would suggest not to use those ones at all. However I think I had left the code to show the basic tooltips that display on all flex components correctly as you can also see on

http://tasmania.globat.com/~mannu.info/flex/3dcharts/prototype1.html

For this if you can set toolTip property as true on the column3D components it might show up. For that can you try to set it in the CSS as something like (check if this is correct syntax for setting props on components thru CSS)


<style type="text/css">
Column3D {toolTip:true;}
style>
 

Hi,

Would like to use the 3D chart. The following type of extensions would be helpful:

- display of datatips using 'showDatTips=true' with a dataTipFunction.

- the graph legend (displayName attribute) when drawn on the 3D chart axis displays up to 30 characters.

- Change of the color of the two rear, top and bottom 3D planes using CSS. They appear as white plus 3 shades of gray.

- When a windows containing the 3D chart is resized the columns in the 3D chart are redrawn next to the original columns.

Are any of these planned for in the future? Is the source available if not?

Thanks,

Joe
 

- For datatip, some amount of changes were required without which they would not be displayed correctly but could you get the basic tooltips working? Thats the one that we can get working until the code is upgraded to fix that.

- Are you saying that you need to display something more than 30 chars? or you want to limit it to that. you can add a custom limiter to the property if you want to do that.

- The background color is all shades of gray (and not just 3). I dont remember if it was something that could be configured from outside. It would show the color in all luminocity between black and that color (just like on the columns).

- I didnt see that effect yet on window resizing yet. However I hope it will be just a refresh issue which would fix on further resizing. is it?

I have left Adobe company now and working for another company. So I am not aware of any further changes being made to the code which is under adobe license and not open source yet.

Nihit
 

Hi,

Thanks for the assistance.

Were using a 9x9 3D chart. The performance, reliability, zooming, dragging in 3D space, and visual presentation of the 3D chart is very good in Flex 2.01. The 3D chart is impressive when loaded with domain data. However need to address the following issues prior to deployment.

- display of datatips using 'showDatTips=true' with a dataTipFunction. Then a domain based datatip can be used. Its needed when the 3D chart has 81 (9x9) columns in a 3D space.

- ability to change the colors of the 3D planes (there now shades of gray) when the application theme color conflicts with the shades of gray 3D planes.

- When a windows containing the 3D chart is resized the columns in the 3D chart are redrawn next to the original columns. Need to do a few resizes (maybe 6+) before this begins to occur. We placed a 'resize="resizeEvent"' on both the Columns3DChart and VBox3D. The function is being fired however a validateNow() does not result in the prior drawn columns being removed. A manual selection of any of the + or - rotation buttons however does result in the chart being redrawn correctly.

Who at Adobe would be a contact for these issues? We would be happy to research and address the above issues if the source code was available.

Thanks

Joe
 

Hi Nihit,

We contacted Adobe. They do not have the source code for 3D chart since they stated that it was a personnel project of yours. Per resolving the issues in 3D chart that I mentioned in my prior post on June 09, 2007.

A few questions:

- Do you have time in the near term (perhaps on a consulting basis) to address these issues?

- If not is the source code available so that we can address the issues?

Below is a recap of the issues.


Were using a 9x9 3D chart. The performance, reliability, zooming, dragging in 3D space, and visual presentation of the 3D chart is very good in Flex 2.01. The 3D chart is impressive when loaded with domain data. However need to address the following issues prior to deployment.

- display of datatips using 'showDatTips=true' with a dataTipFunction. Then a domain based datatip can be used. Its needed when the 3D chart has 81 (9x9) columns in a 3D space.

- ability to change the colors of the 3D planes (there now shades of gray) when the application theme color conflicts with the shades of gray 3D planes.

- When a windows containing the 3D chart is resized the columns in the 3D chart are redrawn next to the original columns. Need to do a few resizes (maybe 6+) before this begins to occur. We placed a 'resize="resizeEvent"' on both the Columns3DChart and VBox3D. The function is being fired however a validateNow() does not result in the prior drawn columns being removed. A manual selection of any of the + or - rotation buttons however does result in the chart being redrawn correctly.



Thanks.

Joseph
 

I got some basic tooltips in for now. and also the line chart.
 

Hey Joseph,
Sorry for the late reply. Who did you talk to in Adobe? I can direct him to the location where the source code is kept. I might get some time over the weekends after my computer arrives this monday. However I can not committ on any timeline until I see my computer and see if I can get some setup ready.

Thanks

Nihit
 

I sent the location to Prayank, he has found the code in source control.
 

Prayank was not in our team when I worked on this. I will contact him and find out if the code is still in the source control or it has been removed and get back to you.
 

Hi Nihit,

Thanks. The party was Prayank. Do you need his contact info?

Joseph
 

Hi Nihit,

Do u have some code sample using this graphic?

I didn't found it.

Tnx in advance
 

Refer to the samples directory in the download distribution. There are about 5+ code samples.
 

Here is the reply I got from Adobe:

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
It would also be good to let them know that ILOG one of Adobe Partners is working on a full commercial implementation of 3D charts.

If they're willing to pay a reasonable license fee they're likely to get better long-term support for issues like the ones they've identified here. We could also send them the link to the alpha if they want to take a look.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

I would also be working on this in near future once I get my new computer fixed up to work on it.

Nihit
 

Hi Nihit,

Thanks for the update.

Please have Adobe send me the details on the license fee and link to the alpha.

In general your/Adobe's 3D chart SWC at the moment is quite good (refer to my prior posting). If the issues in my prior posting are addressed, 3D chart should work really well in any Flex application.

Joseph
 

Here ia the latest from Adobe:

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
You can have them sign up for ILOG alpha here. I think the final pricing is yet TBD, but I am sure it would be less expensive than consulting $$$:-)

http://groups.google.com/group/ilog-elixir?hl=en
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Thanks for the kind words about Flex 3D charts. I will setup the dev environment ASAP and see what all issues can be resolved.

Nihit
 

The ILOG alpha looks nice. Its SWC at the moment is 700K+ and probably will increase in size as the product moves forward.

Flex 3D charts SWC is half that size. Of course ILOG does much more.

So its a function of what one needs in terms of 3D charting.

Any update on the Flex 3D chart issues per your 6/21/07 posting?

Joe
 

Hi Joseph,

The size of the SWC should not really matter. Indeed as you said it contains much more (orgchart, radar chart, maps...) than 3D charting and when you'll compile your application only the 3D charting component will get into your SWF, so you should get a reasonable size in the end.

If you want to discuss this issue or any other issue with ILOG Elixir do not hesitate to start a discussion in the Elixir forum!

Thanks for your interest in the product.
 

i havent got chance to look at it yet. Hope to do that soon.
 

Here is the code for creating Pyramid3D instead of using ther column3D in the series:
So now the Pyramid3DSeries can made using Pyramid3D as follows and can be used in the MXML:

You can tweak it to create different kind of series other than Column and Pyramid.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
// ActionScript file Pyramid3D.as

package com.adobe.flex.extras.core
{
import flash.events.Event;
import flash.events.MouseEvent;
import flash.geom.Point;
import mx.core.UIComponent;
import mx.events.MoveEvent;
import mx.events.ResizeEvent;
import mx.controls.Label;

public class Pyramid3D extends Component3D
{
override protected function updateShape(event:Event):void
{
if (parent)
{
var lastOrder:Number = _lastOrder;

updateParentOrder(order, lastOrder);

graphics.clear();
graphics.lineStyle(0,0,1);

rootContainer3D.rootCenter.x = rootContainer3D.width/2;
rootContainer3D.rootCenter.y = rootContainer3D.height/2;

rootContainer3D.rootCenter = rootContainer3D.localToGlobal(rootContainer3D.rootCenter);

var arr:Array = [{x:0,y:0,z:0}, {x:width,y:0,z:0},
{x:0, y:height,z:0}, {x:0, y:0,z:depth},

{x:width,y:height,z:0}, {x:width,y:0,z:depth},
{x:0,y:height,z:depth}, {x:width, y:height,z:depth}]

parentLocalToGlobal(true,arr);

var mid:Object = Utility3D.midVector([arr[0],arr[1],arr[5],arr[3]]);

drawPolygon([arr[7],arr[6],mid,mid],0,1); // about -2
drawPolygon([arr[7],arr[4],arr[2],arr[6]],2,1); // about -1
drawPolygon([arr[7],mid,mid,arr[4]],1,1); // about -0
drawPolygon([arr[6],arr[2],mid,mid],2,-1); // about 0
drawPolygon([arr[2],arr[4],mid,mid],1,-1); // about 2


}
}
}
}
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

public class Pyramid3DSeries extends Column3DSeries
{
include "../../core/Version.as";

public function Pyramid3DSeries(){
componentType='Pyramid3D';
}

}

}

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

.. version="1.0" encoding="iso-8859-1"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:fc="http://www.adobe.com/2006/fc" width="600" height="600" >

<mx:Script>
..[CDATA[
[Bindable] public var medals:Array = [
{country: "USA", gold: 50, silver: 25, bronze:40},
{country: "China", gold: 48, silver: 40, bronze:25},
{country: "Russia", gold: 38, silver: 32, bronze:45},
{country: "Germany", gold: 35, silver: 25, bronze:39},
{country: "India", gold: 14, silver: 15, bronze:28}
];


]]>


</mx:Script>

<mx:Style>
@font-face
{
font-family: MyArial;
src: local("Arial");
}
Column3DChart {
font-size: 14;
font-family: MyArial;
}
</mx:Style>

<mx:Panel title="Charts" width="100%" height="100%">
<fc:Column3DChart id="mychart" type="clustered" angleX="30" angleY="30" height="100%" width="100%" >

<fc:horizontalAxis>
<mx:CategoryAxis dataProvider="{medals}" categoryField="country" />
</fc:horizontalAxis>

<fc:verticalAxis>
<mx:LinearAxis minimum="0" maximum="70"/>
</fc:verticalAxis>

<fc:series>
<mx:Array>
<fc:Pyramid3DSeries dataProvider="{medals}" yField="gold" displayName="Gold">
<fc:fill>
<mx:SolidColor color="#EEEE00"/>
</fc:fill>
</fc:Pyramid3DSeries>
<fc:Pyramid3DSeries dataProvider="{medals}" yField="silver" displayName="Silver">
<fc:fill>
<mx:SolidColor color="#CCCCFF"/>
</fc:fill>
</fc:Pyramid3DSeries>
<fc:Pyramid3DSeries dataProvider="{medals}" yField="bronze" displayName="Bronze">
<fc:fill>
<mx:SolidColor color="#CC9900"/>
</fc:fill>
</fc:Pyramid3DSeries>
</mx:Array>
</fc:series>
</fc:Column3DChart>

<mx:Legend dataProvider="{mychart}"/>
</mx:Panel>

</mx:Application>
 

Hi,

I am in critical situation please help me. I need to generate 3d ribbon chat. How to change the chat type from bar to ribbon.

Thanks in advance.

Please please help me.

Thanks,
Dhana
 

I gave the code above for pyramids. Can you take some lead from there?
 

Hi nihit,

I am raghavendra i just saw your 3d charts its awesome. I just downloaded that but its not working.
i tried to do that for bubble charts can you help me out plse
 

what is the problem? was it working before?
 

I downloaded the project for adobe. com and then i tried to import the project i got app.html not found.Then i started creating my own project and imported swc file in libs.There i dont get any chart i get only the walls without chart .Or flex loading image will stops no further process. What may be the problem .....
 

Hi Nihit,

We have created the ActionScript file like blow:

Line3D.as
~~~~~~

// ActionScript file
package com.chart
{
import flash.events.Event;
import flash.events.MouseEvent;
import flash.geom.Point;
import mx.core.UIComponent;
import mx.events.MoveEvent;
import mx.events.ResizeEvent;
import mx.controls.Label;
import com.adobe.flex.extras.core.Component3D;

public class Line3D extends Component3D
{
override protected function updateShape(event:Event):void
{
if (parent)
{
var lastOrder:Number = _lastOrder;

updateParentOrder(order, lastOrder);

graphics.clear();
graphics.lineStyle(0,0,1);

rootContainer3D.rootCenter.x = rootContainer3D.width/2;
rootContainer3D.rootCenter.y = rootContainer3D.height/2;

rootContainer3D.rootCenter = rootContainer3D.localToGlobal(rootContainer3D.rootCenter);

var arr:Array = [{x:0,y:0,z:0}, {x:width,y:0,z:0},
{x:0, y:height,z:0}, {x:0, y:0,z:depth},

{x:width,y:height,z:0}, {x:width,y:0,z:depth},
{x:0,y:height,z:depth}, {x:width, y:height,z:depth}
]

parentLocalToGlobal(true,arr);

var mid:Object = Utility3D.midVector([arr[0],arr[1],arr[5],arr[3]]);

drawPolygon([arr[7],arr[6],mid,mid],0,1); // about -2
drawPolygon([arr[7],arr[4],arr[2],arr[6]],2,1); // about -1
drawPolygon([arr[7],mid,mid,arr[4]],1,1); // about -0
drawPolygon([arr[6],arr[2],mid,mid],2,-1); // about 0
drawPolygon([arr[2],arr[4],mid,mid],1,-1); // about 2


}
}
}
}
-------------------------------------------------------------

Line3DSeries.as
~~~~~~~~~~

// ActionScript file
package com.chart
{
import flash.events.Event;
import flash.events.MouseEvent;
import flash.geom.Point;
import mx.core.UIComponent;
import mx.events.MoveEvent;
import mx.events.ResizeEvent;
import mx.controls.Label;
import mx.controls.Alert;
import com.adobe.flex.extras.charts.series.Column3DSeries;

public class Line3DSeries extends Column3DSeries
{
public function Line3DSeries(){
comp..'Line3D';
}

}
}

-----------------------------------------------------------

FlexLineChart.mxml
~~~~~~~~~~~~

.. version="1.0" encoding="utf-8"?>
xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
xmlns:fc="http://www.adobe.com/2006/fc"
xmlns:chart="com.chart.*">


[Bindable] public var medals:Array = [
{country: "USA", gold: 50, silver: 25, bronze:40},
{country: "China", gold: 48, silver: 40, bronze:25},
{country: "Russia", gold: 38, silver: 32, bronze:45},
{country: "Germany", gold: 35, silver: 25, bronze:39},
{country: "India", gold: 14, silver: 15, bronze:28}
];
]]>



@font-face
{
font-family: MyArial;
src: local("Arial");
}
Column3DChart
{
font-size: 14;
font-family: MyArial;
}









































-----------------------------------------------------------

We ran the application, There is no chart shown. ie., Our custom component Line3D and Line3DSeries not invoked.

How to invoke the function.

Correct me if anything wrong.

I am waiting for your valuable suggestion. Please consider my post and don't forget to reply.

Today [09/15/2007] you came online but there is no reply for my post.

Please help me.

Thanks,
Dhanasekaran
 

Hi Nihit,
thanks for ur reply,
i tried the above code, but i couldn't able to find any difference.

The steps i followed is,
1. the given action script has been added to my project
2. the flex 3d swc from adobe exchange has been added.

but i need to change the source of pyramid 3d, there is no reflect in chart when i change.

How could i tweek the method.

Thanks,
Dhanasekaran
 

Hi Nihit,

We have modified the ActionScript you gave but it's not reflecting in the chart.

(i) How to integrate the ActionScript with mxml.
(ii) Pyramid3D and Pyramid3DSeries classes are placed in the same file or different file.
(iii) How to include "version.as" file. Where it is.

Please Please help me how to do that.

Thanks in advance. Please help me.

By,
Dhanasekaran
 

Hi Nihit,

We have changed the package name like com.chart and imported inside the . Is it right? how to invoke the changed Action Script File.

Thanks,
Dhanasekaran
 

Hi Nihit,

We have changed the package name from com.adobe.flex.extras.core to com.chart inside the ActionScript File and imported inside the tag. Is it right? how to invoke the changed Action Script File.

Thanks,
Dhanasekaran
 

Nihit
This is amazing... WOW . Can you help me with couple of questions:
1. I am trying to put data from different sources on one bar graph. Since I think the "data provider" could be just one for this graph how can i overcome that issue?
2. I have cpu utilization for multiple machines at multiple times. I want to show them all in one graph as lines to show how they are consuming differect CPU at different time. Same issue as above. i am not able to get this done.
WOuld really appreciate your suggestion.
thanks
Sunny
 

Hi Nikit

Where can i get the source for the SWC file.

can you provide me the link or the source?

i like to customize the chart more so if you provide it then that will be helpful to me

 

Hi!
Its very surprising to see what all flex can do....
But can u tell me if flex can do the following things
1.To insert a doughnut inside a doughnut
2.to have circles around pyramid