2 Replies Latest reply on Apr 22, 2009 1:31 PM by tcflex

    cannot represent both gradient and solid fills on a series

    tcflex

      I have a bubble chart with a single bubble series. Each chart item fill is determined by a fill function. Intially this fill function will fill all the chart items with gradient colors yellow, red and green. As soon as I select an Item from the data grid I have a function which maps to one of the chart element. Here in this function, when an item is selected, I am changing the chart items fill by using item.fill property to a solid color (which intially had a gradient color) and keeping the rest of the chart items same. Then I called invaliedseriesstyles method on the chart which will redraw the chart. After redrawing the chart, I found the other chart items too changed their fills to solid color where I was expecting only the selected chart item to change from gradient to solid color. Please let me know on how to overcome this situation.

       

      Thanks.

      tc.

        • 1. Re: cannot represent both gradient and solid fills on a series
          _Natasha_ Level 4

          As a variant for solution is to create itemRenderer for drawing selected item using another style.

          Fill property if series is applied for all items.

          So in your renderer you can choose the style of filling based on data and set a special property for data to distinguish it from others.

           

          May be there are different easer ways.

          • 2. Re: cannot represent both gradient and solid fills on a series
            tcflex Level 1

            Thanks for the reply. I have to do invalidate display list every time I select a chart Item so that Item rendering happens. Here is the example of the problem. I am pasting the code down.

             

            Instead of rendere I am using fill function where I can get data from the chart Item parameter passes to the fill function.

             

             

             

             

             

             

             

             

             

             

             

             

             

             

             

             

             

             

             

             

             

             

             

             

             

             

             

             

             

             

             

             

             

             

             

             

             

             

             

             

             

             

             

             

             

             

             

             

             

             

             

             

             

             

             

             

             

             

             

             

             

             

             

             

             

             

             

             

             

             

             

             

             

             

             

             

             

             

             

             

             

             

             

             

             

             

             

             

             

             

             

             

             

            <?xml version="1.0" encoding="utf-8"?>

            <mx:Application

             

             

            xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" initialize="init()"

            >

            <mx:Script>

            <![CDATA[

             

             

            import

            mx.charts.ChartItem;

             

             

            import

            mx.graphics.IFill;

             

             

            import

            mx.collections.ArrayCollection;

            [

             

            Bindable

            ]

             

             

            private var

            ac:ArrayCollection;

            [

             

            Bindable

            ]

             

             

            private var

            sind:Array = [];

             

             

             

            private function init():void

            {

            ac =

             

            new

            ArrayCollection ([

            {priority:25, score:100, time:30, SLA:40, y:1},

            {priority:85, score:300, time:50, SLA:10, y:1},

            {priority:65, score:200, time:120,SLA:25, y:1},

            ]);

            }

             

             

             

            private function

            colorBubble(i:ChartItem, index:int):IFill {

             

             

            var

            o:Object = i.item;

             

             

            var dt:int = o["time"] - o["SLA"

            ];

             

             

            if

            ( dt > 0)

             

             

            return

            rgred;

             

             

            if

            (dt < 0)

             

             

            return

            rggreen;

             

             

             

            return

            rgyellow;

             

             

            trace

            (i);

            }

             

             

             

            private function itemClickHandler(event:Event):void

            {

             

             

            //item.fill = rgred;

             

            }

             

            ]]>

            </mx:Script>

             

             

            <mx:DataGrid x="50" y="45"

            >

             

             

            <mx:columns>

             

             

            <mx:DataGridColumn headerText="Column 1" dataField="col1"

            />

             

             

            <mx:DataGridColumn headerText="Column 2" dataField="col2"

            />

             

             

            <mx:DataGridColumn headerText="Column 3" dataField="col3"

            />

             

             

            </mx:columns>

             

             

            </mx:DataGrid>

             

             

             

            <mx:Array id="background"

            />

             

             

            <mx:SolidColor id="sc1" color="0x00000" alpha=".3"

            />

             

             

            <mx:RadialGradient id="rgred"

            >

             

             

            <mx:entries>

             

             

            <mx:GradientEntry color="0xFF6666"

            />

             

             

            <mx:GradientEntry color="0xFF0000"

            />

             

             

            <mx:GradientEntry color="0x660000" />

             

             

            </mx:entries>

             

             

             

            </mx:RadialGradient>

             

             

            <mx:RadialGradient id="rgyellow"

            >

             

             

            <mx:entries>

             

             

            <mx:GradientEntry color="0xFFFF33"

            />

             

             

            <mx:GradientEntry color="0xFFCC00"

            />

             

             

            <mx:GradientEntry color="0xFFFF00"

            />

             

             

            </mx:entries>

             

             

            </mx:RadialGradient>

             

             

            <mx:RadialGradient id="rggreen"

            >

             

             

            <mx:entries>

             

             

            <mx:GradientEntry color="0x99FF66"

            />

             

             

            <mx:GradientEntry color="0x66FF00"

            />

             

             

            <mx:GradientEntry color="0x00FF00"

            />

             

             

            </mx:entries>

             

             

            </mx:RadialGradient>

             

             

            <mx:Stroke id="stroke1" color="0x00000" weight="2"

            />

             

             

            <mx:BubbleChart id="myChart" showDataTips="true

            "

            width="

             

            100%" height="100%

            "

            backgroundElements="

             

            {background}

            "

            selectionMode="

             

            multiple

            "

            paddingTop="

             

            15

            "

            itemClick="itemClickHandler(event) "

            verticalCenter="

             

            25

            "

            horizontalCenter="

             

            25

            "

            mouseSensitivity="

             

            2

            "

             

             

             

            >

             

             

            <mx:series>

             

             

            <mx:BubbleSeries id="circleSeries" dataProvider="{ac}

            "

            displayName="

             

            bubbleInfo

            "

            xField="

             

            score

            "

            yField="

             

            y

            "

            radiusField="

             

            priority

            "

            maxRadius="

             

            60

            "

            minRadius="

             

            30

            "

            stroke="

             

            {stroke1}

            "

             

            selectable="

             

            true

            "

            fillFunction="

             

            colorBubble

            "

            selectedIndices="

             

            {sind}

            "

             

             

             

            />

             

             

             

             

            </mx:series>

             

             

            <mx:horizontalAxis>

             

             

            <mx:LinearAxis id="linearAxis"

            />

             

             

            </mx:horizontalAxis>

             

             

            <mx:verticalAxis>

             

             

            <mx:LinearAxis id="verticalAxis"

            />

             

             

            </mx:verticalAxis>

             

             

            <mx:horizontalAxisRenderers

            >

             

             

            <mx:Array>

             

             

            <mx:AxisRenderer axis="{linearAxis}" showLabels="false" showLine="false" tickLength="0" tickPlacement="none"

            />

             

             

            </mx:Array>

             

             

            </mx:horizontalAxisRenderers>

             

             

            <mx:verticalAxisRenderers>

             

             

            <mx:Array>

             

             

            <mx:AxisRenderer axis="{verticalAxis}" showLabels="false" showLine="false" tickLength="0" tickPlacement="none"

            />

             

             

            </mx:Array>

             

             

            </mx:verticalAxisRenderers>

             

             

            </mx:BubbleChart>

             

             

             

            </mx:Application>