UI issue with Column Chart

Question

Hi all.. Am working with Column chart, and am having uneven data with which i need to come out with coumn chart.
code is give below..
<?xml version="1.0"?>
<!-- Simple example to demonstrate the ColumnChart and BarChart controls. -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:custom="components.*">
    <mx:Script>
        <![CDATA[         
        import mx.collections.ArrayCollection;
        [Bindable]
        private var medalsAC:ArrayCollection = new ArrayCollection( [
            { Country: "USA", Gold: 35},
            { Country: "China", Silver:17},
            { Country: "Russia", Bronze: 14} ]);
        ]]>
    </mx:Script>
    <!-- Define custom colors for use as fills. -->
    <mx:SolidColor id="sc1" color="yellow" alpha=".8"/>
    <mx:SolidColor id="sc2" color="0xCCCCCC" alpha=".6"/>
    <mx:SolidColor id="sc3" color="0xFFCC66" alpha=".6"/>
    <!-- Define custom Strokes for the columns. -->
    <mx:Stroke id="s1" color="yellow" weight="2"/>
    <mx:Stroke id="s2" color="0xCCCCCC" weight="2"/>
    <mx:Stroke id="s3" color="0xFFCC66" weight="2"/>
    <mx:Panel title="ColumnChart and BarChart Controls Example"
        height="100%" width="100%" layout="horizontal">
        <mx:ColumnChart id="column"
            height="100%"
            width="100%"
            paddingLeft="5"
            paddingRight="5"
            showDataTips="true"
            dataProvider="{medalsAC}"
        >               
            <mx:horizontalAxis>
                <mx:CategoryAxis categoryField="Country"/>
            </mx:horizontalAxis>
            <mx:series>
                 <custom:extended
                    xField="Country"
                    yField="Gold"
                    displayName="Gold"
                    fill="{sc1}"
                    stroke="{s1}"/>
                <custom:extended
                    xField="Country"
                    yField="Silver"
                    displayName="Silver"
                    fill="{sc2}"
                    stroke="{s2}"/>
               <custom:extended
                    xField="Country"
                    yField="Bronze"
                    displayName="Bronze"
                    fill="{sc3}"
                    stroke="{s3}"/>
            </mx:series>
        </mx:ColumnChart>
        <mx:Legend dataProvider="{column}"/>
    </mx:Panel>
</mx:Application>
as per code... its showing graph as
If u notice the chart in each series, as there no proper data.. its showing that empty gap as per the order of column series created..
In array collection, in each object we are missing some value.
Any idea ow to remove this gap.. How to remove those empty spaces....
Thanks & Regards
Pratap

Answer 1

Hi ramesh,
check out my edited version of Chandrashekhar Mahajan's fiddle
http://jsbin.com/jetoz/1/edit
Chandra was trying to create a new Dialog everytime which i've modified & chart inside a popup is a known issue which has been mentioned by SAP UI5 in Notes section. You can do a workaround by manually rerender() or setTimeout()
Regards
Sakthivel