RE: [flexcoders] Default Chart Colors
Ely,
By extrapolation, would PieSeries also accept an array of gradients
intead of an array of hex values? And is there a way to represent this
in css? Also would it be possible to alter the styleName property of a
PieSeries at runtime?
Jeff
-Original Message-
From: flexcoders@yahoogroups.com [mailto:[EMAIL PROTECTED] On
Behalf Of Ely Greenfield
Sent: Thursday, May 19, 2005 6:30 PM
To: flexcoders@yahoogroups.com
Subject: RE: [flexcoders] Default Chart Colors
Hi Dave. The answer is a teeny bit complex.
Each Series (except the pieSeries) has a style property called 'fill'
that it pulls its fill from. So what you're wondering is: how do I
specify the fill style for each series that appears in my chart?
Each chart type, when it displays its series, assigns a CSS style
selector to each series. In order to guarantee that each series gets a
different fill, it assigns a different selector to each series, by
index.
The names of the selectors the chart assigns are, in turn, specified in
a style property of the chart, called chartSeriesStyles.
So if you want to specify the fills to be used by ColumnCharts, you
could do it like this:
mx:Style
.customColumnSeries1 {
fill: #FF;
}
.customColumnSeries2 {
fill: #00FF00;
}
.customColumnSeries3 {
fill: #FF;
}
ColumnChart {
chartSeriesStyles: customColumnSeries1,
customColumnSeries2, customColumnSeries3;
}
/mx:Style
PieCharts work a little differently. Since each pie series needs more
that one fill (one for each wedge), the pieSeries draw its fills from a
property called fills. You can specify this in CSS as well:
mx:Style
PieSeries {
Fills: #Ff, #00FF00, #FF;
}
/mx:Style
Now there's a little bit of handwaving going on here. The reason is,
the fill properties of the charts aren't really rgb hex values, they are
fill objects. We made them fill objects so that you could fill a chart
with other fill types -- gradients, etc.
However, CSS doesn't support a syntax for specifying an object. Which
means there's really no way to specify a Fill object -- SolidColor,
LinearGradient, etc. -- in CSS. If you want to specify a complex fill
type, you need to either do it on a per-component basis, or set the
style through actionscript.
But, since there _is_ a way to specify simple color values in CSS, and
that's what most designers typically want to do, we provided a shortcut.
When the charts render themselves, if they find a simple RGB value in
their fill or fills properties, they'll convert them to a SolidColor on
the fly. Hence, the above CSS markup will work.
Ely.
-Original Message-
From: flexcoders@yahoogroups.com [mailto:[EMAIL PROTECTED] On
Behalf Of Dave
Sent: Thursday, May 19, 2005 2:17 PM
To: flexcoders@yahoogroups.com
Subject: [flexcoders] Default Chart Colors
Importance: High
How do I change the default colors used by Flex for multiple charts?
As charts are added, the Legend and the Chart itself follow a pattern
of predetermined colors.
Where is that defined? I need to change site wide.
Thanks much,
-Dave
Yahoo! Groups Links
Yahoo! Groups Links
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/
RE: [flexcoders] Default Chart Colors
By extrapolation, would PieSeries also accept an array of gradients
intead of an array of hex values?
Yes. The fill property of most series, and the fills property of the
pieSeries, take Fill objects. Which means any of them can take solid fills,
solid fills with alpha, linear gradients, and radial gradients. The same is
true for the pointFill property of line series and area series, the fill
property of the charts (which specifies the background color), and the
various *fill properties of the GridLines class.
And is there a way to represent this in css?
Unfortunately, no, that's a limitation of CSS. We're considering whether
and how to address this in the next release of flex, but for the meantime,
you can:
- specify the styles inline on the item in MXML
- set the values on the CSSStyleDeclaration for PieSeries at initialization
through actionscript
- write a subclass of PieSeries that sets its fill style in its constructor,
and use that instead
- write a custom MXML component that allows you to specify CSS data using
MXML.
Let me explain that last one a bit. A while back I wrote up a little
actionscript class that allowed me to specify CSS properties using MXML.
I've included it at the bottom of this email, for your enjoyment and/or use.
But a small caveat -- when you specify styles via CSS, the compiler is able
to optimize assigning the styles a little bit better than this class can. So
using this class might have an effect on your startup time. You'll have to
try it out yourself, and decided if the benefits outweigh the cost.
Also would it be possible to alter the styleName property of a
PieSeries at runtime?
Yes, absolutely. PieChart.series[0].styleName = ...;
In my earlier response, I fibbed a little bit. I said that the chart object
assigns the styleName of each series on the fly. In truth, it's not actually
assigning the styleName -- it's really assigning a different internal
property of the series, that inserts style properties into the style chain
at a slightly lower priority than the styleName property does. What does
this mean? Well, if you assign the styleName property, you'll override any
style properties you want to override, without accidentally blowing away the
ones you want to keep the same.
Ely.
-
style/Selector.as:
import mx.util.*;
import mx.core.*;
import mx.styles.*;
/*
Here's an example of how you might use this class in an MXML file:
style:Selector name=.Creamsicle xmlns:style=style.*
fills
mx:Array
mx:SolidColor color=#E48801 /
mx:SolidColor color=#E5A53B /
mx:SolidColor color=#E7C274 /
mx:SolidColor color=#E9D9A6 /
mx:SolidColor color=#EDE9C6 /
/mx:Array
/fills
font-familylabelFont/font-family
font-weightbold/font-weight
font-size24/font-size
/style:Selector
*/
dynamic class style.Selector implements MXMLObject
{
public var name:String;
public function initialized(document : Object, id : String) : Void
{
var selectorName = name;
if(selectorName.indexOf(.) == 0)
selectorName = selectorName.substr(1);
var selector:CSSStyleDeclaration =
StyleManager.styles[selectorName];
if(selector == null)
selector = StyleManager.styles[selectorName] = new
CSSStyleDeclaration();
for(var aProp in this) {
if(aProp == name)
continue;
selector.setStyle(removeDashes(aProp),this[aProp]);
}
}
public function removeDashes(oldName:String):String
{
var name:String = oldName;
var idx:Number = name.indexOf(-);
while(idx != -1) {
name = name.substr(0,idx) +
name.substr(idx+1,1).toUpperCase() + name.substr(idx+2);
idx = name.indexOf(-);
}
return name;
}
}
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/
[flexcoders] Default Chart Colors
How do I change the default colors used by Flex for multiple charts? As charts are added, the Legend and the Chart itself follow a pattern of predetermined colors. Where is that defined? I need to change site wide. Thanks much, -Dave 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/
RE: [flexcoders] Default Chart Colors
Hi Dave. The answer is a teeny bit complex.
Each Series (except the pieSeries) has a style property called 'fill' that
it pulls its fill from. So what you're wondering is: how do I specify the
fill style for each series that appears in my chart?
Each chart type, when it displays its series, assigns a CSS style selector
to each series. In order to guarantee that each series gets a different
fill, it assigns a different selector to each series, by index.
The names of the selectors the chart assigns are, in turn, specified in a
style property of the chart, called chartSeriesStyles.
So if you want to specify the fills to be used by ColumnCharts, you could do
it like this:
mx:Style
.customColumnSeries1 {
fill: #FF;
}
.customColumnSeries2 {
fill: #00FF00;
}
.customColumnSeries3 {
fill: #FF;
}
ColumnChart {
chartSeriesStyles: customColumnSeries1, customColumnSeries2,
customColumnSeries3;
}
/mx:Style
PieCharts work a little differently. Since each pie series needs more that
one fill (one for each wedge), the pieSeries draw its fills from a property
called fills. You can specify this in CSS as well:
mx:Style
PieSeries {
Fills: #Ff, #00FF00, #FF;
}
/mx:Style
Now there's a little bit of handwaving going on here. The reason is, the
fill properties of the charts aren't really rgb hex values, they are fill
objects. We made them fill objects so that you could fill a chart with other
fill types -- gradients, etc.
However, CSS doesn't support a syntax for specifying an object. Which means
there's really no way to specify a Fill object -- SolidColor,
LinearGradient, etc. -- in CSS. If you want to specify a complex fill type,
you need to either do it on a per-component basis, or set the style through
actionscript.
But, since there _is_ a way to specify simple color values in CSS, and
that's what most designers typically want to do, we provided a shortcut.
When the charts render themselves, if they find a simple RGB value in their
fill or fills properties, they'll convert them to a SolidColor on the fly.
Hence, the above CSS markup will work.
Ely.
-Original Message-
From: flexcoders@yahoogroups.com [mailto:[EMAIL PROTECTED] On
Behalf Of Dave
Sent: Thursday, May 19, 2005 2:17 PM
To: flexcoders@yahoogroups.com
Subject: [flexcoders] Default Chart Colors
Importance: High
How do I change the default colors used by Flex for multiple charts?
As charts are added, the Legend and the Chart itself follow a pattern
of predetermined colors.
Where is that defined? I need to change site wide.
Thanks much,
-Dave
Yahoo! Groups Links
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/
