0 Replies Latest reply on Aug 19, 2009 6:07 AM by Pratap Reddy

    UI issue with Column Chart

    Pratap Reddy

      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

      testChart.jpg

       

      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