Perfect.  I went with the ShadowBoxitemRenderer approach – no noticeable hit on performance at this stage – and it looks just the same as before in the ColumnChart. 

 

Thanks again for your time.

 

Ben Lucyk
[EMAIL PROTECTED]
p 1.877.TRY.ESRIA ext 718
c 1.408.489.3913
f  1.877.828.4436

 

 

 

 

 

 

 


From: flexcoders@yahoogroups.com [mailto:[EMAIL PROTECTED] On Behalf Of Ely Greenfield
Sent: Friday, May 26, 2006 12:44 PM
To: flexcoders@yahoogroups.com
Subject: RE: [flexcoders] F2B3 - Looking for Column Chart styles example similar to old "Brocade" sample app.

 

 

 

 

In Beta 3, the drop shadow in the columns has been optimized by attaching it to the ColumnChart directly. To get it back, you've got two options:

 

1) set the seriesFilters property of the CartesianChart to a drop shadow.  This will give you a single drop shadow for the entire set of columns (i.e., the front most column won't create a drop shadow on the columns behind it, giving the appearance that all the columns are flattened into one layer).

 

<CartesianChart>

    <seriesFilters>

        <f:DropShadowFilter xmlns:f="flash.filters.*" />

    </seriesFIlters>

 

2) set a drop shadow filter on each series directly.  This will make the front most series cast a shadow on the series behind it.

 

<CartesianChart>

    <series>

          <ColumnSeries>

                 <filters>

                       <f:DropShadowFilter xmlns:f="flash.filters.*" />

                </filters>

                 ...

 

3) set a drop shadow filter on each individual column. This has the biggest hit on performance, but will make each individual column pop out. To do this, set the itemRenderer or each column to the ShadowBoxitemRenderer (this one probably won't add anything to your use case).

 

...

    <series>

         <ColumnSeries itemRenderer="mx.charts.renderers.ShadowBoxItemRenderer" ... />

    ...

 

 

Ely.

 

 

 


From: flexcoders@yahoogroups.com [mailto:[EMAIL PROTECTED] On Behalf Of Ben Lucyk
Sent: Thursday, May 25, 2006 8:31 PM
To: flexcoders@yahoogroups.com
Subject: RE: [flexcoders] F2B3 - Looking for Column Chart styles example similar to old "Brocade" sample app.

Works like a charm Ely.  I added an alpha=”.8” to help give it that same look in Brocade.  One question though, where did my nice column drop shadow go to now that I’m using the CartesianChart and how do I get it back?

 

Thanks,

Ben Lucyk
[EMAIL PROTECTED]
p 1.877.TRY.ESRIA ext 718
c 1.408.489.3913
f  1.877.828.4436

 

 

 

 

 

 

 


From: flexcoders@yahoogroups.com [mailto:[EMAIL PROTECTED] On Behalf Of Ben Lucyk
Sent: Thursday, May 25, 2006 5:29 PM
To: flexcoders@yahoogroups.com
Subject: RE: [flexcoders] F2B3 - Looking for Column Chart styles example similar to old "Brocade" sample app.

 

What a great help Ely.  Thanks for all the detail!  It sounds like you’ve spent a fair amount of time with this one already!  :)

 

I’ll be playing with your suggestions tonight and will post my results. 

 

Thanks again,

Ben Lucyk
[EMAIL PROTECTED]
p 1.877.TRY.ESRIA ext 718
c 1.408.489.3913
f  1.877.828.4436

 

 

 

 

 

 

 


From: flexcoders@yahoogroups.com [mailto:[EMAIL PROTECTED] On Behalf Of Ely Greenfield
Sent: Thursday, May 25, 2006 1:23 PM
To: flexcoders@yahoogroups.com
Subject: RE: [flexcoders] F2B3 - Looking for Column Chart styles example similar to old "Brocade" sample app.

 

 

 

 

Hi Ben.  When a set of column series is clustered, the chart (or columnSet) is setting the columnWidthRatio and offset properties to do it. So if you wanted to cluster differently, you could put the columnSeries inside a CartesianChart and set those properties yourself.

 

To figure out how wide each column should be, you first need to decide how wide you want the total cluster to be, and how much each column should overlap. Then your formula would be:

 

columnWidth = clusterWidth / (overlap + (series count)*(1-overlap));

 

the offset is the offset of the middle of the column from the middle of the category. given the clusterWidth and columnWidthRatio, the offset for each series is:

 

seriesOffset(N) = -clusterWidth/2 + (1-overlap)*columnWidthRatio*(N) + columnWidthRatio/2;

 

So if you have three series, and your total width is 75%, and the overlap should be 50%, then

 

columnWdithRatio = .75 / (.5 + 3*(1-.5))

columnWdithRatio = .75 / 2;

columnWdithRatio = .375

 

given that,

 

seriesOffset(0) = -.75/2 + (.5)*.375*0 + .375/2;

seriesOffset(0) = -.1875;

 

seriesOffset(1) = -.75/2 + (.5)*.375*1 + .375/2;

seriesOffset(1) = 0;

 

seriesOffset(2) = -.75/2 + (.5)*.375*2 + .375/2;

seriesOffset(2) = -.75/2 + .375 + .375/2;;

seriesOffset(2) = .1875;

 

Putting that into practice, the markup would be

<CartesianChart>

  <series>

     <ColumnSeries columnWidthRatio=".375" offset="-.1875" />

     <ColumnSeries columnWidthRatio=".375" offset="0" />

     <ColumnSeries columnWidthRatio=".375" offset=".1875" />

</CartesianChart>

 

(You may need to reverse the order of those, I don't remember)

 

Ely.

 

 


From: flexcoders@yahoogroups.com [mailto:[EMAIL PROTECTED] On Behalf Of Ben Lucyk
Sent: Thursday, May 25, 2006 12:50 PM
To: flexcoders@yahoogroups.com
Subject: [flexcoders] F2B3 - Looking for Column Chart styles example similar to old "Brocade" sample app.

Does anyone have some examples or info for styling the <mx:ColumnChart type=”clustered”> component?  I have a client that is interested in seeing the same “displaced”, overlapping styles for the column series’ as seen in the online Brocade sample app (Click “Measure Viewer”).

 

http://flexapps.macromedia.com/flex/brocade/app.mxml?versionChecked=true

 

I reloaded Flash Player 8.5 and looked at the F2B1 chart explorer

 

http://weblogs.macromedia.com/flex_samples/charts_explorer/explorer.html

 

… but there aren’t a whole lot of style examples.

 

Any help would be appreciated,

Ben Lucyk
[EMAIL PROTECTED]
p 1.877.TRY.ESRIA ext 718
c 1.408.489.3913
f  1.877.828.4436

 

 

 

 

 

 

 

 




--
Flexcoders Mailing List
FAQ: http://groups.yahoo.com/group/flexcoders/files/flexcodersFAQ.txt
Search Archives: http://www.mail-archive.com/flexcoders%40yahoogroups.com




SPONSORED LINKS
Web site design development Computer software development Software design and development
Macromedia flex Software development best practice


YAHOO! GROUPS LINKS




Reply via email to