Either approach works fine.  Renderers are there so developers can
easily swap in different appearances without having to get their hands
dirty with the more complex behavior of the individual series. In the
case of a column series, replicating the box drawing code is trivial. In
the case of a Wedge, it's more complicated.

Ely.
 

-----Original Message-----
From: flexcoders@yahoogroups.com [mailto:[EMAIL PROTECTED] On
Behalf Of peterthomasmartin
Sent: Friday, February 17, 2006 6:41 AM
To: flexcoders@yahoogroups.com
Subject: [flexcoders] Re: Column Chart coloring

Is this the best approach?

I have been doing something similiar with the WedgeSkin recently for the
Pie Chart.

The problem I found with creating a programmatic skin was that you
couldn't subclass the existing skin and change the fill. As such I ended
up copying the skin and therefore all the logic used to draw the chart
item (not very OO).

I found a neater solution was to subclass the series (PieSeries in my
case) and override updateDisplayList e.g.

override protected function updateDisplayList( 
                        unscaledWidth : Number,
                        unscaledHeight : Number ) : void
{
   super.updateDisplayList( unscaledWidth, unscaledHeight );

   // Set the fill colour for all items in the series.
   var data : Object = transitionRenderData;
                        
  if ( transitionRenderData == null )
  {
    data = renderData;
  }
  setFills( data );
}


--- In flexcoders@yahoogroups.com, "Jonathan Miranda" <[EMAIL PROTECTED]>
wrote:
>
> Ely, I can't thank you enough :-) I was about to just give up for 
> today and you helped me get it working :-)
> 
> For those at home wondering the important code now (there's no 
> rectangle Ely :-)):
> 
>  
> 
> override protected function
> updateDisplayList(unscaledWidth:Number,unscaledHeight:Number):void {
> 
>  
> super.updateDisplayList(unscaledWidth, unscaledHeight);
> 
>                                     var g:Graphics = graphics;
> 
>                                     g.clear();
> 
>                                     g.beginFill(colors[(_chartItem == 
> null)? 0:_chartItem.index]);
> 
>                         g.drawRect(0, 0, unscaledWidth, 
> unscaledHeight);
> 
>                                     g.endFill();
> 
>                         }
> 
> 
> And for your viewing pleasure...1 Dashboard down stat! ( a lot like 
> the demo but hey, it's customized for my client's needs )
> 
>  
> 
> _________________________________________
> 
> Jonathan Miranda
> 
> Flexible Master of the Web
> 
> "In the game of chess, it's important to never let your opponent see 
> your pieces."
> 
>  
> 
> From: flexcoders@yahoogroups.com [mailto:[EMAIL PROTECTED] 
> On Behalf Of Ely Greenfield
> Sent: Thursday, February 16, 2006 2:02 PM
> To: flexcoders@yahoogroups.com
> Subject: RE: [flexcoders] Column Chart coloring
> 
>  
> 
>  
> 
>  
> 
>  
> 
> AHHHHHHHH. You using Flex 2! Then I have a very, very different answer

> for you.
> 
>  
> 
> Flex 2 has moved to a model more like datagrid's item renderers. In 
> flex 2, you can specify an itemSkin class for a column series, and it 
> will create one for every column on the chart.
> 
>  
> 
> You want to define a custom skin class, and assign it to the series as
> so:
> 
>  
> 
> <mx:ColumnSeries itemSkin="CycleSkin" />
> 
>  
> 
> item skins are instantiated for each item in the data provider, and 
> each one is passed an instance of mx.charts.ChartItem. The chart item 
> knows the item from the dataProvider it represents, and what its index

> was in the dataProvider.
> 
>  
> 
>  
> 
> Here's a sample skin that should cycle colors:
> 
>  
> 
> import mx.charts.series.items.ColumnSeriesItem;
> 
> import mx.skins.ProgrammaticSkin;
> 
> import mx.core.IDataObject;
> 
>  
> 
> public class CycleSkin extends mx.skins.ProgrammaticSkin  implements 
> IDataObject
> 
> {
> 
>  private var colors:Array = [0xFF0000,0x00FF00,0x0000FF];
> 
> 
>  public function CycleSkin()
>  {
>  }
>     
>  private var _chartItem:ColumnSeriesItem;
> 
>  
> 
>  public function get data():Object
>  {return _chartItem;}
> 
>  
> 
>  public function set data(value:Object):void  {
> 
>     _chartItem = value as ColumnSeriesItem;
> 
>    invalidateDisplayList();
>  }
> 
>  override protected function updateDisplayList(unscaledWidth:Number,
>               unscaledHeight:Number):void  {
>   super.updateDisplayList(unscaledWidth, unscaledHeight);
>   var g:Graphics = graphics;
>   g.clear();  
>   g.moveTo(rc.left,rc.top);
> 
>   g.beginFill(colors[(_chartItem == null)? 0:_chartItem.index]);
>   g.lineTo(rc.right,rc.top);
>   g.lineTo(rc.right,rc.bottom);
>   g.lineTo(rc.left,rc.bottom);
>   g.lineTo(rc.left,rc.top);
> 
>   g.endFill();
>  }
> 
>  
> 
> }
> 
>  
> 
> }
> 
>  
> 
>  
> 
>  
> 
> ________________________________
> 
> From: flexcoders@yahoogroups.com [mailto:[EMAIL PROTECTED] 
> On Behalf Of Jonathan Miranda
> Sent: Thursday, February 16, 2006 10:54 AM
> To: flexcoders@yahoogroups.com
> Subject: RE: [flexcoders] Column Chart coloring
> 
> Sooooo close, I got it all to compile but the following. I can't 
> figure out how to do these functions on "target" because it's a 
> IFlexDisplayObject, and all those functions are from the graphics 
> class and take an "Object". How can I use these functions on the 
> "target" if it's not an Object? Extend it somehow or create an object?
> 
> public function draw(target:IFlexDisplayObject, rc:Rectangle):void {
> 
>                                       target.beginFill(  fills[count] 
> );
> 
>                                      
> 
>                                       target.moveTo(rc.left,rc.top);
> 
>                                       target.lineTo(rc.right,rc.top);
> 
>                                       
> target.lineTo(rc.right,rc.bottom);
> 
>                                       
> target.lineTo(rc.left,rc.bottom);
> 
>                                       target.lineTo(rc.left,rc.top);
> 
>                                     
> 
>                                       target.endFill();
> 
>                                       
> 
>                                       count++;
> 
>                          }
> 
>  
> 
>  
> 
> _________________________________________
> 
> Jonathan Miranda
> 
> Flexible Master of the Web
> 
> "In the game of chess, it's important to never let your opponent see 
> your pieces."
> 
>  
> 
> From: flexcoders@yahoogroups.com [mailto:[EMAIL PROTECTED] 
> On Behalf Of Ely Greenfield
> Sent: Thursday, February 16, 2006 11:27 AM
> To: flexcoders@yahoogroups.com
> Subject: RE: [flexcoders] Column Chart coloring
> 
>  
> 
>  
> 
>  
> 
> I'll leave making it compile as an exercise for the reader, but 
> something like:
> 
>  
> 
> class CycleRenderer implements BoxRenderer {  private var fills = 
> [0xFF0000,0x00FF00,0x0000FF];
> 
>  private var count:Number;
> 
>  
> 
>  function CycleRenderer()
>  {
>  }
>  
>  function beginDraw(target: UIObject, fill:Fill, stroke: Stroke, 
> sampleCount : Number)  {
> 
>     count = 0;
>  }
> 
>  
> 
>  function draw(target:UIObject, rc : Rect)  {
>   target.beginFill(  fills[count] );
> 
>  
> 
>   target.moveTo(rc.left,rc.top);
>   target.lineTo(rc.right,rc.top);
>   target.lineTo(rc.right,rc.bottom);
>   target.lineTo(rc.left,rc.bottom);
>   target.lineTo(rc.left,rc.top);
> 
>   target.endFill();
> 
>   
> 
>   count++;
>  }
> 
>  
> 
>  function endDraw(target:UIObject)
>  {
>  }
>  
>  function drawPreview(target:UIObject, rc: Rect, fill : Fill, stroke :
> Stroke)
>  {
> 
>    count = 0;
>    draw(target, rc);    
>  }
> }
> 
>  
> 
> Ely.
> 
> 
>  
> 
> ________________________________
> 
> From: flexcoders@yahoogroups.com [mailto:[EMAIL PROTECTED]
On
> Behalf Of Jonathan Miranda
> Sent: Thursday, February 16, 2006 10:19 AM
> To: flexcoders@yahoogroups.com
> Subject: RE: [flexcoders] Column Chart coloring
> 
> Hmm, after messing around with this I can't get it to cycle any type
of
> array because it seems to only accept one color...and I can't figure
out
> how the renderer can reference which item it's actually on. Best I've
> got so far is just changing one color. Fill (heh, bad joke) up to
> mocking an example?
> 
> _________________________________________
> 
> Jonathan Miranda
> 
> Flexible Master of the Web
> 
> "In the game of chess, it's important to never let your opponent see
> your pieces."
> 
>  
> 
> From: flexcoders@yahoogroups.com [mailto:[EMAIL PROTECTED]
On
> Behalf Of Ely Greenfield
> Sent: Thursday, February 16, 2006 10:44 AM
> To: flexcoders@yahoogroups.com
> Subject: RE: [flexcoders] Column Chart coloring
> 
>  
> 
>  
> 
>  
> 
> You could write a custom renderer for the chart that ignores the
colors
> passed in and just cycles through a pre-defined array of colors.
> 
>  
> 
> Ely.
> 
>  
> 
>  
> 
> ________________________________
> 
> From: flexcoders@yahoogroups.com [mailto:[EMAIL PROTECTED]
On
> Behalf Of Jonathan Miranda
> Sent: Thursday, February 16, 2006 9:30 AM
> To: flexcoders@yahoogroups.com
> Subject: [flexcoders] Column Chart coloring
> 
> Also, something else I'm having trouble finding documentation on....
> 
> I need to step through colors - let's say red,white,blue. It's one
> ColumnSeries - is there a way I can cycle through colors for each
> column?
> 
> _________________________________________
> 
> Jonathan Miranda
> 
> Flexible Master of the Web
> 
> "In the game of chess, it's important to never let your opponent see
> your pieces."
> 
>  
> 
>  
> 
>  
> 
> 
> 
> --
> 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
>
<http://groups.yahoo.com/gads?t=ms&k=Web+site+design+development&w1=Web+
>
site+design+development&w2=Computer+software+development&w3=Software+des
>
ign+and+development&w4=Macromedia+flex&w5=Software+development+best+prac
> tice&c=5&s=166&.sig=L-4QTvxB_quFDtMyhrQaHQ>  
> 
> Computer software development
>
<http://groups.yahoo.com/gads?t=ms&k=Computer+software+development&w1=We
>
b+site+design+development&w2=Computer+software+development&w3=Software+d
>
esign+and+development&w4=Macromedia+flex&w5=Software+development+best+pr
> actice&c=5&s=166&.sig=lvQjSRfQDfWudJSe1lLjHw>  
> 
> Software design and development
>
<http://groups.yahoo.com/gads?t=ms&k=Software+design+and+development&w1=
>
Web+site+design+development&w2=Computer+software+development&w3=Software
>
+design+and+development&w4=Macromedia+flex&w5=Software+development+best+
> practice&c=5&s=166&.sig=1pMBCdo3DsJbuU9AEmO1oQ>  
> 
> Macromedia flex
>
<http://groups.yahoo.com/gads?t=ms&k=Macromedia+flex&w1=Web+site+design+
>
development&w2=Computer+software+development&w3=Software+design+and+deve
>
lopment&w4=Macromedia+flex&w5=Software+development+best+practice&c=5&s=1
> 66&.sig=OO6nPIrz7_EpZI36cYzBjw>  
> 
> Software development best practice
>
<http://groups.yahoo.com/gads?t=ms&k=Software+development+best+practice&;
>
w1=Web+site+design+development&w2=Computer+software+development&w3=Softw
>
are+design+and+development&w4=Macromedia+flex&w5=Software+development+be
> st+practice&c=5&s=166&.sig=f89quyyulIDsnABLD6IXIw>  
> 
>  
> 
>  
> 
> ________________________________
> 
> YAHOO! GROUPS LINKS 
> 
>  
> 
> *      Visit your group "flexcoders
> <http://groups.yahoo.com/group/flexcoders> " on the web.
>         
> *      To unsubscribe from this group, send an email to:
>        [EMAIL PROTECTED]
> <mailto:[EMAIL PROTECTED]> 
>         
> *      Your use of Yahoo! Groups is subject to the Yahoo! Terms of
> Service <http://docs.yahoo.com/info/terms/> . 
> 
>  
> 
> ________________________________
>







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



 




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

<*> To visit your group on the web, go to:
    http://groups.yahoo.com/group/flexcoders/

<*> To unsubscribe from this group, send an email to:
    [EMAIL PROTECTED]

<*> Your use of Yahoo! Groups is subject to:
    http://docs.yahoo.com/info/terms/
 


Reply via email to