When you're right, you're right! 5 minutes later and I now have a
nice gradient fill in my bars. Half a day of "beginGradientFill"
and all I had to show for it was.... well, nothing. Thanks Ely!
Here's the code if anyone runs into this need ( and please post back
if anyone see places for improvements ):
package
{
//
import flash.display.Graphics;
import flash.geom.Rectangle;
import mx.charts.ChartItem;
import mx.core.IDataRenderer;
import mx.core.UIComponent;
import mx.charts.chartClasses.LegendData;
import flash.geom.Rectangle;
import mx.graphics.GradientEntry;
import mx.graphics.LinearGradient;
//
public class SetItemLength extends UIComponent implements
IDataRenderer {
//
public function SetItemLength ():void {
super();
}
private var _chartItem:Object;
//
public function get data():Object {
return _chartItem;
}
public function set data(value:Object):void {
if (_chartItem == value)
return;
//
if(value is LegendData)
return;
_chartItem = ChartItem(value);
}
override protected function updateDisplayList
(unscaledWidth:Number,unscaledHeight:Number):void {
super.updateDisplayList(unscaledWidth,
unscaledHeight);
var rc:Rectangle = new Rectangle(0, 0,
width , height );
//var columnColor:uint;
var g:Graphics = graphics;
var fill:LinearGradient = new LinearGradient
();
var g1:GradientEntry = new GradientEntry
(0xFF9900, 0, 1);
var g2:GradientEntry = new GradientEntry
(0xFFCC00, .20, 1);
var g3:GradientEntry = new GradientEntry
(0xA35901, .50, 1);
var g4:GradientEntry = new GradientEntry
(0x2B1500, .85, 1);
var g5:GradientEntry = new GradientEntry
(0xFFCC00, .95, 1);
fill.entries=[g1, g2, g3, g4, g5];
fill.angle = 90;
//
g.clear();
g.moveTo(rc.left,rc.top);
// Only if the _chartItem has data
if (_chartItem == null)
return;
// Only if the _chartItem has the
attributes
if(_chartItem.item.hasOwnProperty
("startDate") && _chartItem.item.hasOwnProperty("endDate")){
//
if (String
(_chartItem.item.startDate) == String(_chartItem.item.endDate)){
//trace("MATCH " +
rc.width);
rc.width = 2;
fill.begin(g, new Rectangle
(0, 0, rc.width, rc.height));
} else
fill.begin(g, new Rectangle
(0, 0, rc.width, rc.height));
}
g.lineTo(rc.right,rc.top);
g.lineTo(rc.right,rc.bottom);
g.lineTo(rc.left,rc.bottom);
g.lineTo(rc.left,rc.top);
fill.end(g);
}
}
}
--- In [email protected], "Ely Greenfield" <[EMAIL PROTECTED]>
wrote:
>
>
>
>
> Hi Mark. Try using the mx.graphics.LinearGradientFill class. It
will
> proably make your life much easier than trying to use the graphics
> begingradientFill function.
>
> Ely.
>
>
> ________________________________
>
> From: [email protected]
[mailto:[EMAIL PROTECTED] On
> Behalf Of Mark
> Sent: Wednesday, March 21, 2007 1:08 PM
> To: [email protected]
> Subject: [flexcoders] Re: small problem with Bar Chart showing days
>
>
>
> OK, I got the size working, but now I have a new problem. I used a
> custom itemRenderer to change the size if the dates are the same.
> The code is redrawing the bars with a fill color of red (for now).
> I want that solid color to be a gradientFill, but I can't seem to
> get it to work at all. When I use the "beginGradientFill" like the
> code below all I get is 2 colors without an actual gradiant
between
> them (and I'm trying for four colors). I tried using the Matrix
but
> that just confused me more.
>
> Can someone lend a hand with that part?
>
> Here's what I have with the solid color --
>
> package
> {
>
> import flash.display.Graphics;
> import flash.geom.Rectangle;
> import mx.charts.ChartItem;
> import mx.core.IDataRenderer;
> import mx.core.UIComponent;
> import mx.charts.chartClasses.LegendData;
> //import flash.display.GradientType;
> import flash.display.*;
> import flash.geom.Matrix;
>
> public class SetItemLength extends UIComponent implements
> IDataRenderer {
> //
> private var colors:Array = [0xFF9900,0xFFCC00,
> 0xA35901, 0x2B1500];
> private var alphas:Array = [1, 1, 1, 1];
> private var ratios:Array = [0, .20, .40, .85];
> //
> //
> public function SetItemLength ():void {
> super();
> }
> private var _chartItem:Object;
>
> public function get data():Object {
> return _chartItem;
> }
> public function set data(value:Object):void {
> if (_chartItem == value)
> return;
> //
> if(value is LegendData)
> return;
> _chartItem = ChartItem(value);
> }
> override protected function updateDisplayList
> (unscaledWidth:Number,unscaledHeight:Number):void {
> super.updateDisplayList(unscaledWidth, unscaledHeight);
> var rc:Rectangle = new Rectangle(0, 0, width , height );
> var columnColor:uint;
> var g:Graphics = graphics;
> //
> //
> g.clear();
> g.moveTo(rc.left,rc.top);
> // Only if the _chartItem has data
> if (_chartItem == null)
> return;
> // Only if the _chartItem has the attributes
> if(_chartItem.item.hasOwnProperty("startDate") &&
> _chartItem.item.hasOwnProperty("endDate")){
> //
> if (String(_chartItem.item.startDate) == String
> (_chartItem.item.endDate)){
> rc.width = 2;
> g.beginGradientFill(GradientType.LINEAR,
> colors, alphas, ratios);
> } else
> g.beginGradientFill(GradientType.LINEAR,
> colors, alphas, ratios);
> }
> 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();
> }
> }
> }
>
