Charting - CircleRenderer?

[FireRaven]

I'm pretty new to Flex, but I am trying to figure out how to have each bubble
in a bubble chart automatically render in a different color (similar to the way
in which lines, columns, etc. are each automaitcally assigned a different
color). Any help, pointers, etc. would be greatly appreciated. Thanks in
advance!

[peterent]

You've hit upon a pretty advanced topic. So let's approach this a different
way. If you have multiple series, each series will be drawn in its own color.
Provided you do not have a ton of data, you could transform your data from a
single series to many series, each with a single point. See the attached code.

Original data:
{product:"apples",value:100},{product:"oranges",va lue:200},{product:"grapes",val
ue:130}, ...
New data:
{product:"apples",value1:100},{product:"oranges",v alue2:200},{product:"grapes",v
alue3:130},...



<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml">
<mx:Array id="dp">
<mx:Object product="apples" value1="100" units="200" />
<mx:Object product="oranges" value2="200" units="45" />
<mx:Object product="grapes" value3="150" units="92" />
<mx:Object product="bananas" value4="280" units="124" />
</mx:Array>
<mx:BubbleChart id="bubblechart1" dataProvider="{dp}" showDataTips="true">
<mx:horizontalAxis>
<mx:CategoryAxis categoryField="product" dataProvider="{dp}" />
</mx:horizontalAxis>
<mx:series>
<mx:Array>
<mx:BubbleSeries name="series1" yField="value1" radiusField="units" />
<mx:BubbleSeries name="series2" yField="value2" radiusField="units" />
<mx:BubbleSeries name="series3" yField="value3" radiusField="units" />
<mx:BubbleSeries name="series4" yField="value4" radiusField="units" />
</mx:Array>
</mx:series>
</mx:BubbleChart>
<mx:Legend dataProvider="{bubblechart1}" />
</mx:Application>

[FireRaven]

Thanks for the response Peter. Yes, I considered the multiple series approach
but we do have large datasets and in the long run it makes more sense to
architect a component that serves our purposes more closely. I realize that
the topic is probably an advanced one, but that is why I posted it here hoping
for some guidance. Can you point me at anything that would help me understand
how colors are assigned to series and where the best place in the component
hierarchy woudld be to extend from?

Our charting requirements also include putting several line series on a
Bubble Chart. I gather that this is accomplished by using a CartesianChart
instead of a BubbleChart, but I have not been successful in getting them both
to appear. I have no problem with mixing lines, columns, etc. but when I add
a bubble series it never renders the bubbles. Any thoughts?

[peterent]

Well, the truth of the matter is, you need access to the source code of the
CircleRenderer to make what you want. The chart renderers in Flex 1.5 are not
designed to be extended for this purpose.

As for using Cartesian chart, check out this URL to the
[url]http://flexapps.macromedia.com/flex15/chartexplorer/explorer.mxml[/url], you'll find
an example there under the "Misc Techniques and Examples" folder.

[FireRaven]

I was hoping that the fill object in beginDraw, Draw & endDraw methods of the
BoxRenderer interface (which is what the CircleRenderer implements) would allow
me to do what I want if I knew the scheme by which colors were assigned.

Re: Christophe's "Chartin Components Explorer". Yes, I looked at that, and as
I said, it works for line and column series but not for bubble series. The
documentation makes reference to the fact that one needs to do this by
utilizing a Cartesian Chart but when I attempted to do so I got no further than
with the example in the Charting Component Explorer. hanks for all your
feedback though... I've got someone at Macromedia lined up to help me with
this next week though!

[FireRaven]

Peter,

I've been thinking about the simpler "multiple series solution" that you
proposed and have come to the conclusion that it would probably be a reasonable
solution. The data currently originates in an XML file (ultimately a remote
java object) and I don't know how many objects will get returned in advance.
How do I define the array of BubbleSeries in the chart to accomodate a variable
number of series and how do I best structure the XML data for this solution?
Thanks for your help...

[peterent]

The chart renderers basically call their draw() methods in order from left to
right across the chart. If you extend CircleRenderer you could make the
following adjustments:

beginDraw: initialize a class variable to zero, indicating the start of the
count of circles to be drawn. The sampleCount parameter gives you the total
number. You can, in beginDraw, create an array (perhaps static so you only do
this once) of fills that you'll re-use in draw(). Then call super.beginDraw.

draw: Assume this is being called for the ith point, so you will need that
class variable from beginDraw to tell you which circle to draw. Use this to
select the color fill. Substitute _fill for the color you want to draw now.
Increment that class counter variable so the next time draw is called it picks
a new color. Then call super.draw.

I don't think you'll need to override any of the other methods.

If that doesn't work, you will need to have your XML data return a separate
property for each point. This really depends on what you have on the
server-side. But for example:

<points>
<point x="1" y1="100" />
<point x="2" y2="200" />
...
<point x="100" y100="256" />
</points>

All you really need to do to create different series is to create a new
attribute for each point. Then you have to generate the series in ActionScript.
Assuming you get back 100 points, then you want to create 100 series:

for(var i=0; i < points.length; i++) {
var series:BubbleSeries = new BubbleSeries();
series.xField = "x";
series.yField = "y"+i;
bubbleChart.series.addItem(series);
}

That's the idea anyway.

[FireRaven]

Peter,

Using a very slightly modified version of your example from above, can you
tell me why when all I do is change the type of chart from BubbleChart to
CartesanChart the data does not render any more? If I switch it back it works
fine. Thanks.

Martin

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml">

<mx:Array id="dp">
<mx:Object product="apples" value1="100" units="190" />
<mx:Object product="oranges" value2="200" units="45" />
<mx:Object product="grapes" value3="150" units="92" />
<mx:Object product="bananas" value4="280" units="124" />
</mx:Array>

<mx:Panel title="Bubble Chart" width="100%" height="100%" >

<mx:CartesianChart id="chart1" dataProvider="{dp}" showDataTips="true"
width="100%" height="100%" styleName="mainChart" >

<mx:horizontalAxis>
<mx:CategoryAxis categoryField="product" dataProvider="{dp}" />
</mx:horizontalAxis>

<mx:series>
<mx:Array>
<mx:BubbleSeries name="series1" yField="value1" radiusField="units" />
<mx:BubbleSeries name="series2" yField="value2" radiusField="units" />
<mx:BubbleSeries name="series3" yField="value3" radiusField="units" />
<mx:BubbleSeries name="series4" yField="value4" radiusField="units" />
</mx:Array>
</mx:series>

</mx:CartesianChart>
</mx:Panel>
</mx:Application>

[peterent]

That's a good question. I was surprised myself that it didn't work. So I did
some digging and discovered that the BubbleChart, while extending
CartesianChart, makes a modified LinearAxis. It depends on this modification.

[FireRaven]

What exactly are the implications of this? Does this mean that it's not possible to combine Line Series and Bubble Series on the same chart?