RE: [flexcoders] F2B3 - Looking for Column Chart styles example similar to old "Brocade" sample app.

Fri, 26 May 2006 09:31:26 -0700

 
 
 
 
Well, this is a common question. And I wrote the original code, so I have an unfair advantage ;)
 
Ely.
 

From: [email protected] [mailto:[EMAIL PROTECTED] On Behalf Of Ben Lucyk
Sent: Thursday, May 25, 2006 2:29 PM
To: [email protected]
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: [email protected] [mailto:[EMAIL PROTECTED] On Behalf Of Ely Greenfield
Sent: Thursday, May 25, 2006 1:23 PM
To: [email protected]
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: [email protected] [mailto:[EMAIL PROTECTED] On Behalf Of Ben Lucyk
Sent: Thursday, May 25, 2006 12:50 PM
To: [email protected]
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