RE: [flexcoders] Custom Datatip Renderes for charts
IN general, you can draw right into your own component. When you're
extending someone else's component, you run the risk of interfering with
what they're doing.
Setting that second point aside for a moment, you'd do something like:
g.clear();
g.lineStyle(...);
g.moveTo(0,0);
g.lineTo(...); etc.
See the ASDoc for the graphics API for more details.
Ely.
From: flexcoders@yahoogroups.com [mailto:[EMAIL PROTECTED] On
Behalf Of {reduxDJ}
Sent: Wednesday, May 30, 2007 4:04 PM
To: flexcoders@yahoogroups.com
Subject: RE: [flexcoders] Custom Datatip Renderes for charts
Ely:
So is there an easier way then the way I mentioned below of extending
etc to draw into the charts graphics? Can I do it right into my
Graphics object?
var g:Graphics = graphics;
and then (what would be next)
Thanks,
Patrick
From: flexcoders@yahoogroups.com [mailto:[EMAIL PROTECTED] On
Behalf Of Ely Greenfield
Sent: Wednesday, May 30, 2007 2:40 PM
To: flexcoders@yahoogroups.com
Subject: RE: [flexcoders] Custom Datatip Renderes for charts
There's nothing special going on in the GraphicsUtilities class. The
problem is that you're drawing into a sprite, rather than directly into
your component's own graphics.
Ely.
From: flexcoders@yahoogroups.com [mailto:[EMAIL PROTECTED] On
Behalf Of patricklemiuex
Sent: Wednesday, May 30, 2007 2:17 PM
To: flexcoders@yahoogroups.com
Subject: [flexcoders] Custom Datatip Renderes for charts
Ok, well I've gotten this far with my datatip renderer. It looks like
all the chart classes call the graphics utilities class to draw the
boring square box, no rounded rectangle method exists in this class.
If I just roll my own rounded rectangle box inside my DataTipRenderer
constructor, it hides the label...
So it looks like i need to do is, first extend the graphicsutilities
class and and then override the fillrect method to draw a rounded
rectangle, finally extend each chart to use my new extended graphics
utilities instead of the native one. Does that sound right?
package com.me.data
{
import flash.display.Graphics;
import flash.geom.Rectangle;
import mx.charts.HitData;
import mx.charts.chartClasses.DataTip;
import mx.charts.chartClasses.GraphicsUtilities;
import mx.graphics.IFill;
import mx.graphics.RoundedRectangle;
import mx.graphics.SolidColor;
import mx.graphics.Stroke;
import flash.display.Sprite;
import mx.core.IDataRenderer
public class CustomDataTip extends DataTip implements IDataRenderer
{
override protected function
updateDisplayList(unscaledWidth:Number,unscaledHeight:Number):void
{
// super.updateDisplayList(unscaledWidth, unscaledHeight);
var g:Graphics = graphics;
var xpos:Number = 0;
var ypos:Number = 0;
//var fill:IFill = IFill(new SolidColor(getStyle("backgroundColor"),
0.5));
//var stroke :Stroke= new Stroke(getStyle("borderColor"), 0, 100);
//GraphicsUtilities.fillRect(g, xpos, ypos,
unscaledWidth,unscaledHeight, fill, stroke);
var edit:Sprite = new Sprite();
edit.graphics.beginFill(getStyle("backgroundColor"),.5);
edit.graphics.drawRoundRect(xpos,ypos,unscaledWidth,unscaledHeight,6);
edit.graphics.endFill();
addChild(edit);
}
}
}
<><>
RE: [flexcoders] Custom Datatip Renderes for charts
Ely:
So is there an easier way then the way I mentioned below of extending etc to
draw into the charts graphics? Can I do it right into my
Graphics object?
var g:Graphics = graphics;
and then (what would be next)
Thanks,
Patrick
_
From: flexcoders@yahoogroups.com [mailto:[EMAIL PROTECTED] On
Behalf Of Ely Greenfield
Sent: Wednesday, May 30, 2007 2:40 PM
To: flexcoders@yahoogroups.com
Subject: RE: [flexcoders] Custom Datatip Renderes for charts
There's nothing special going on in the GraphicsUtilities class. The
problem is that you're drawing into a sprite, rather than directly into your
component's own graphics.
Ely.
From: flexcoders@yahoogroups.com [mailto:[EMAIL PROTECTED] On
Behalf Of patricklemiuex
Sent: Wednesday, May 30, 2007 2:17 PM
To: flexcoders@yahoogroups.com
Subject: [flexcoders] Custom Datatip Renderes for charts
Ok, well I've gotten this far with my datatip renderer. It looks like
all the chart classes call the graphics utilities class to draw the
boring square box, no rounded rectangle method exists in this class.
If I just roll my own rounded rectangle box inside my DataTipRenderer
constructor, it hides the label...
So it looks like i need to do is, first extend the graphicsutilities
class and and then override the fillrect method to draw a rounded
rectangle, finally extend each chart to use my new extended graphics
utilities instead of the native one. Does that sound right?
package com.me.data
{
import flash.display.Graphics;
import flash.geom.Rectangle;
import mx.charts.HitData;
import mx.charts.chartClasses.DataTip;
import mx.charts.chartClasses.GraphicsUtilities;
import mx.graphics.IFill;
import mx.graphics.RoundedRectangle;
import mx.graphics.SolidColor;
import mx.graphics.Stroke;
import flash.display.Sprite;
import mx.core.IDataRenderer
public class CustomDataTip extends DataTip implements IDataRenderer
{
override protected function
updateDisplayList(unscaledWidth:Number,unscaledHeight:Number):void
{
// super.updateDisplayList(unscaledWidth, unscaledHeight);
var g:Graphics = graphics;
var xpos:Number = 0;
var ypos:Number = 0;
//var fill:IFill = IFill(new SolidColor(getStyle("backgroundColor"),
0.5));
//var stroke :Stroke= new Stroke(getStyle("borderColor"), 0, 100);
//GraphicsUtilities.fillRect(g, xpos, ypos,
unscaledWidth,unscaledHeight, fill, stroke);
var edit:Sprite = new Sprite();
edit.graphics.beginFill(getStyle("backgroundColor"),.5);
edit.graphics.drawRoundRect(xpos,ypos,unscaledWidth,unscaledHeight,6);
edit.graphics.endFill();
addChild(edit);
}
}
}
RE: [flexcoders] Custom Datatip Renderes for charts
There's nothing special going on in the GraphicsUtilities class. The
problem is that you're drawing into a sprite, rather than directly into
your component's own graphics.
Ely.
From: flexcoders@yahoogroups.com [mailto:[EMAIL PROTECTED] On
Behalf Of patricklemiuex
Sent: Wednesday, May 30, 2007 2:17 PM
To: flexcoders@yahoogroups.com
Subject: [flexcoders] Custom Datatip Renderes for charts
Ok, well I've gotten this far with my datatip renderer. It looks like
all the chart classes call the graphics utilities class to draw the
boring square box, no rounded rectangle method exists in this class.
If I just roll my own rounded rectangle box inside my DataTipRenderer
constructor, it hides the label...
So it looks like i need to do is, first extend the graphicsutilities
class and and then override the fillrect method to draw a rounded
rectangle, finally extend each chart to use my new extended graphics
utilities instead of the native one. Does that sound right?
package com.me.data
{
import flash.display.Graphics;
import flash.geom.Rectangle;
import mx.charts.HitData;
import mx.charts.chartClasses.DataTip;
import mx.charts.chartClasses.GraphicsUtilities;
import mx.graphics.IFill;
import mx.graphics.RoundedRectangle;
import mx.graphics.SolidColor;
import mx.graphics.Stroke;
import flash.display.Sprite;
import mx.core.IDataRenderer
public class CustomDataTip extends DataTip implements IDataRenderer
{
override protected function
updateDisplayList(unscaledWidth:Number,unscaledHeight:Number):void
{
// super.updateDisplayList(unscaledWidth, unscaledHeight);
var g:Graphics = graphics;
var xpos:Number = 0;
var ypos:Number = 0;
//var fill:IFill = IFill(new SolidColor(getStyle("backgroundColor"),
0.5));
//var stroke :Stroke= new Stroke(getStyle("borderColor"), 0, 100);
//GraphicsUtilities.fillRect(g, xpos, ypos,
unscaledWidth,unscaledHeight, fill, stroke);
var edit:Sprite = new Sprite();
edit.graphics.beginFill(getStyle("backgroundColor"),.5);
edit.graphics.drawRoundRect(xpos,ypos,unscaledWidth,unscaledHeight,6);
edit.graphics.endFill();
addChild(edit);
}
}
}
<><>
[flexcoders] Custom Datatip Renderes for charts
Ok, well I've gotten this far with my datatip renderer. It looks like
all the chart classes call the graphics utilities class to draw the
boring square box, no rounded rectangle method exists in this class.
If I just roll my own rounded rectangle box inside my DataTipRenderer
constructor, it hides the label...
So it looks like i need to do is, first extend the graphicsutilities
class and and then override the fillrect method to draw a rounded
rectangle, finally extend each chart to use my new extended graphics
utilities instead of the native one. Does that sound right?
package com.me.data
{
import flash.display.Graphics;
import flash.geom.Rectangle;
import mx.charts.HitData;
import mx.charts.chartClasses.DataTip;
import mx.charts.chartClasses.GraphicsUtilities;
import mx.graphics.IFill;
import mx.graphics.RoundedRectangle;
import mx.graphics.SolidColor;
import mx.graphics.Stroke;
import flash.display.Sprite;
import mx.core.IDataRenderer
public class CustomDataTip extends DataTip implements IDataRenderer
{
override protected function
updateDisplayList(unscaledWidth:Number,unscaledHeight:Number):void
{
// super.updateDisplayList(unscaledWidth, unscaledHeight);
var g:Graphics = graphics;
var xpos:Number = 0;
var ypos:Number = 0;
//var fill:IFill = IFill(new
SolidColor(getStyle("backgroundColor"),
0.5));
//var stroke :Stroke= new Stroke(getStyle("borderColor"), 0,
100);
//GraphicsUtilities.fillRect(g, xpos, ypos,
unscaledWidth,unscaledHeight, fill, stroke);
var edit:Sprite = new Sprite();
edit.graphics.beginFill(getStyle("backgroundColor"),.5);
edit.graphics.drawRoundRect(xpos,ypos,unscaledWidth,unscaledHeight,6);
edit.graphics.endFill();
addChild(edit);
}
}
}
Re: [flexcoders] Custom Datatip Renderes for charts
You need to write an Renderder and assign it to the "dataTipRenderer" property of the chart. Have a look at the following thread. Though it is not in English but I guess you should be able to understand the code: http://www.fxug.net/modules/xhnewbb/viewtopic.php? topic_id=888&post_id=3572 On May 30, 2007, at 11:30 PM, patricklemiuex wrote: I want to customize the datatip for my chart app. I notice things like dollar signs are removed when I try to use them in labelfunction etc. Is there an example of this out there. -want to make rounded corners -some alpha transparency -custom fonts & colors
RE: [flexcoders] Custom Datatip Renderes for charts
The text for data tips is flash standard HTML. So you can control font, color, formatting, etc. with html tags. I'm surprised dollar signs are removed, maybe if you tried encoding them, it might render correctly? There's no way to get rounded corners with the default data tip. But All charts have a style called dataTipRenderer that is a class that gets instantiated to render data tips. You could supply your own data tip renderer if you like. Your renderer should implement the IDataRenderer interface. Its data property will get assigned a HitData structure. Render the displayText property of the hitData structure, and you're all set. Ely. From: flexcoders@yahoogroups.com [mailto:[EMAIL PROTECTED] On Behalf Of patricklemiuex Sent: Wednesday, May 30, 2007 11:01 AM To: flexcoders@yahoogroups.com Subject: [flexcoders] Custom Datatip Renderes for charts I want to customize the datatip for my chart app. I notice things like dollar signs are removed when I try to use them in labelfunction etc. Is there an example of this out there. -want to make rounded corners -some alpha transparency -custom fonts & colors <><>
[flexcoders] Custom Datatip Renderes for charts
I want to customize the datatip for my chart app. I notice things like dollar signs are removed when I try to use them in labelfunction etc. Is there an example of this out there. -want to make rounded corners -some alpha transparency -custom fonts & colors
