Flex Bubblechart Data Structure

Question

I have been trying to represent the following data in a Flex Bubblechart.See the chart code below as well.

<fx:Script>
    <![CDATA[
        import mx.collections.ArrayCollection;
        [Bindable]
        var BBCData:ArrayCollection= new ArrayCollection([
            {Industry: "In1", Range:"0-10 Days",  lcount:10},
            {Industry: "In1", Range:"10-20 Days",  lcount:20},
            {Industry: "In1", Range:"20-30 Days",  lcount:30},
            {Industry: "In1", Range:"30-40 Days",  lcount:40},
            {Industry: "In1", Range:"40-50 Days", lcount:50},

            {Industry: "In2", Range:"0-10 Days", lcount:10},
            {Industry: "In2", Range:"10-20 Days",  lcount:20},
            {Industry: "In2", Range:"20-30 Days",  lcount:30},
            {Industry: "In2", Range:"30-40 Days",  lcount:40},
            {Industry: "In2", Range:"40-50 Days",  lcount:50}
        ]);
    ]]>
</fx:Script>
<mx:BubbleChart  id="PriorityLowBubbleChart" width="400" height="250" 
                minRadius="1" 
                maxRadius="50" dataProvider="{BBCData}" 

                showDataTips="true">
    <mx:verticalAxis>
        <mx:CategoryAxis categoryField="Range" dataProvider="{BBCData}"/>
    </mx:verticalAxis>
    <mx:horizontalAxis>
        <mx:CategoryAxis categoryField="Industry"  dataProvider="{BBCData}"/>
    </mx:horizontalAxis>
<mx:series> 
    <mx:BubbleSeries dataProvider="{BBCData}" radiusField="lcount">

    </mx:BubbleSeries>
</mx:series>

</mx:BubbleChart>

And the Bubble chart I get is not what I expect. I am looking at the Bubblechart to show bubbles with radius as "count" and the X and Y are denoted by Industry and Range respectively. So for example, the chart should show a circle of radious 10 at the intersection of Industry In1 and Range 0-10 Days.

In reality, I get the following graph

So for every data point it creates a new X item ("in1" repeated 5 times, "in2" repeated 5 times), in actual, it should be just one.Same is the case with y-marks.

It appears the chart is not able to group same field values on both the axes and hence this problem

is there a different data structure needs to be employed, or are there chart settings that solve this?

Answer 1

I am able to show bubble in bubble chart, Please find below code, which may give you some idea. I have commented few lines you can uncomment it and view the result, for you actual result you have to work little more on it and understand GroupingCollection concept. for refrel link How do I display grouped XML data in a Flex pie chart? : -

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>
    <fx:Script>
        <![CDATA[
            import mx.charts.series.BubbleSeries;
            import mx.collections.ArrayCollection;

            [Bindable]
            public var BBCData:ArrayCollection = new ArrayCollection([
                {id:1, Industry: "In1", Range:"0-10 Days",  lcount:10},
                {id:2, Industry: "In1", Range:"10-20 Days",  lcount:20},
                {id:3, Industry: "In1", Range:"20-30 Days",  lcount:30},
                {id:4, Industry: "In1", Range:"30-40 Days",  lcount:40},
                {id:5, Industry: "In1", Range:"40-50 Days", lcount:50},

                {id:6, Industry: "In2", Range:"0-10 Days", lcount:10},
                {id:7, Industry: "In2", Range:"10-20 Days",  lcount:20},
                {id:8, Industry: "In2", Range:"20-30 Days",  lcount:30},
                {id:9, Industry: "In2", Range:"30-40 Days",  lcount:40},
                {id:10, Industry: "In2", Range:"40-50 Days",  lcount:50}
            ]);

            protected function verticalLabelFunction(value:Object, pre:Object, axis:Object, item:Object):Object 
            {
                return item.Range;
            } 
            protected function horizontalLabelFunction(value:Object, pre:Object, axis:Object, item:Object):Object 
            {
                return item.Industry;
            }

            private function clickHandler():void
            {
                horizontalAxisID.labelFunction = horizontalLabelFunction;
                horizontalAxisID.displayName = "Industry";

                verticalAxisID.labelFunction = verticalLabelFunction
                verticalAxisID.displayName = "Range";

                var columnSeries:Array = new Array();
                var series:BubbleSeries = new BubbleSeries();
                series.radiusField = "lcount";
                //Solution 1 - OutPut as per your dataProvider
                horizontalAxisID.categoryField = series.xField = "id";
                verticalAxisID.categoryField = series.yField = "id";

                //Solution 2 - OutPut as per your dataProvider
                //verticalAxisID.categoryField = series.yField = "Range";
                //horizontalAxisID.categoryField = series.xField = "Industry";

                columnSeries.push(series);
                PriorityLowBubbleChart.series = columnSeries;
                series.percentWidth = 100;
                series.percentHeight = 100;
                PriorityLowBubbleChart.dataProvider = BBCData;
            }
        ]]>
    </fx:Script>

    <s:layout>
        <s:VerticalLayout/>
    </s:layout>

    <mx:BubbleChart  id="PriorityLowBubbleChart" width="400" height="250" 
                     minRadius="1" maxRadius="50" dataProvider="{BBCData}" showDataTips="true" 
                     creationComplete="clickHandler()" >
        <mx:horizontalAxis>
            <mx:CategoryAxis id="horizontalAxisID" categoryField="id" />
        </mx:horizontalAxis>
        <mx:verticalAxis>
            <mx:CategoryAxis id="verticalAxisID" categoryField="id" />
        </mx:verticalAxis>
    </mx:BubbleChart>

</s:Application>

Or another way to achive what you are looking is as below: -

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>
    <fx:Script>
        <![CDATA[
            import mx.charts.series.BubbleSeries;
            import mx.collections.ArrayCollection;
            import mx.utils.ObjectUtil;

            [Bindable]
            private var BBCData:ArrayCollection = new ArrayCollection([
                {id:1, Industry: "In1", Range:"0-10 Days",  lcount:10},
                {id:2, Industry: "In1", Range:"10-20 Days",  lcount:20},
                {id:3, Industry: "In1", Range:"20-30 Days",  lcount:30},
                {id:4, Industry: "In1", Range:"30-40 Days",  lcount:40},
                {id:5, Industry: "In1", Range:"40-50 Days", lcount:50},
                {id:6, Industry: "In2", Range:"0-10 Days", lcount:10},
                {id:7, Industry: "In2", Range:"10-20 Days",  lcount:20},
                {id:8, Industry: "In2", Range:"20-30 Days",  lcount:30},
                {id:9, Industry: "In2", Range:"30-40 Days",  lcount:40},
                {id:10, Industry: "In2", Range:"40-50 Days",  lcount:50}
            ]);

            protected function verticalLabelFunction(value:Object, pre:Object, axis:Object, item:Object):Object 
            {
                return item.Range;
            } 
            protected function horizontalLabelFunction(value:Object, pre:Object, axis:Object, item:Object):Object 
            {
                return item.Industry;
            }

            [Bindable]
            public var range:Array = [
                {Range:"0-10 Days"},
                {Range:"10-20 Days"},
                {Range:"20-30 Days"},
                {Range:"30-40 Days"},
                {Range:"40-10 Days"}
            ];

            [Bindable]
            public var industry:Array = [
                {Industry: "In1"},
                {Industry: "In2"}
            ];

        ]]>
    </fx:Script>

    <s:layout>
        <s:VerticalLayout/>
    </s:layout>

    <s:Panel title="Line Chart">
        <s:layout>
            <s:VerticalLayout/>
        </s:layout>
        <mx:BubbleChart id="myChart"
                      dataProvider="{BBCData}" 
                      showDataTips="true"
                      maxRadius="50" minRadius="1">
            <mx:horizontalAxis>
                <mx:CategoryAxis 
                    dataProvider="{industry}" 
                    categoryField="Industry"
                    displayName="Industry"
                    labelFunction="horizontalLabelFunction"/>
            </mx:horizontalAxis>
            <mx:verticalAxis>
                <mx:CategoryAxis 
                    dataProvider="{range}" 
                    categoryField="Range"
                    displayName="Range"
                    labelFunction="verticalLabelFunction"/>
            </mx:verticalAxis>
            <mx:series>
                <mx:BubbleSeries xField="Industry" yField="Range"
                    displayName="Industry" radiusField="lcount"/>
            </mx:series>
        </mx:BubbleChart>
    </s:Panel>

</s:Application>

Hope this may help you....