5 Replies Latest reply on Jul 30, 2009 1:27 AM by nikos101

    Barchart special formatting

    nikos101 Level 2

      rate.jpg

       

      I would like to do a bar chart like the above

       

      Is it possible?

       

      Can you do this without having multiple bar series?

       

      The code I have at the moment is:

       

          <mx:BarChart x="208.5" y="252" id="barchart1" backgroundElements="{bge}" width="327" height="136" showDataTips="true" dataTipFunction="barDataTips">

       

              <mx:verticalAxis>
                  <mx:CategoryAxis categoryField="type"/>
              </mx:verticalAxis>

       

              <mx:horizontalAxis>
                  <mx:LinearAxis minimum="1">

       

                  </mx:LinearAxis>
              </mx:horizontalAxis>

       


              <mx:series>
                  <mx:BarSeries barWidthRatio=".76"  xField="amount" yField="type"/>
              </mx:series>
          </mx:BarChart>

       

      Message was edited by: nikos101

        • 1. Re: Barchart special formatting
          _Natasha_ Level 4

          Hi,

           

          1. Series for each column.

          2. Create normal BarChart and set rotation for it in 90 degrees.

          1 person found this helpful
          • 2. Re: Barchart special formatting
            nikos101 Level 2

            Thanks but how would the rotation help me get closer to what I want?

            • 3. Re: Barchart special formatting
              nikos101 Level 2

              I tried this but I now have 9 bars:(

               

                  <mx:BarChart x="185.5" y="267" id="barchart1" backgroundElements="{bge}" width="327" height="136" showDataTips="true" dataTipFunction="barDataTips">

                      <mx:verticalAxis>
                          <mx:CategoryAxis categoryField="type"/>
                      </mx:verticalAxis>

                      <mx:horizontalAxis>
                          <mx:LinearAxis minimum="1">

                          </mx:LinearAxis>
                      </mx:horizontalAxis>


                      <mx:series>
                          <mx:BarSeries barWidthRatio=".80"  xField="amount" yField="type">
                             <mx:fill>
                                  <mx:SolidColor color="0x00a4e8"/>
                             </mx:fill>
                                      <mx:showDataEffect>
                                  <mx:SeriesInterpolate duration="300"/>
                              </mx:showDataEffect>
                          </mx:BarSeries>
                          <mx:BarSeries barWidthRatio=".80"  xField="amount" yField="type">
                             <mx:fill>
                                  <mx:SolidColor color="0xa1a1a1"/>
                             </mx:fill>
                                      <mx:showDataEffect>
                                  <mx:SeriesInterpolate duration="300"/>
                              </mx:showDataEffect>
                          </mx:BarSeries>
                          <mx:BarSeries barWidthRatio=".80"  xField="amount" yField="type">
                             <mx:fill>
                                  <mx:SolidColor color="0xb1b1b1"/>
                             </mx:fill>
                                      <mx:showDataEffect>
                                  <mx:SeriesInterpolate duration="300"/>
                              </mx:showDataEffect>
                          </mx:BarSeries>
                 
                         
                      </mx:series>
                  </mx:BarChart>

              • 4. Re: Barchart special formatting
                _Natasha_ Level 4

                Something like this.

                (For rotating variant)

                 

                <mx:BarChart x="185.5" y="267" id="barchart1" backgroundElements="{bge}" width="327" height="136" showDataTips="true" dataTipFunction="barDataTips" rotation="90">

                 

                        <mx:verticalAxis>
                            <mx:LinearAxis minimum="1">


                            </mx:LinearAxis>  
                        </mx:verticalAxis>

                 

                        <mx:horizontalAxis>

                <mx:CategoryAxis categoryField="type"/>

                        </mx:horizontalAxis>

                 


                        <mx:series>
                            <mx:BarSeries barWidthRatio=".80"  xField="amount" yField="type">
                              
                            </mx:BarSeries>
                           
                        </mx:series>
                    </mx:BarChart>

                • 5. Re: Barchart special formatting
                  nikos101 Level 2

                  I've managed to get the 3 colours by using code similar to the below:

                   

                   

                  <?xml version="1.0" encoding="utf-8"?>
                  <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="top"
                      horizontalAlign="center" backgroundGradientColors="[0x000000,0x323232]" paddingTop="0" viewSourceURL="srcview/index.html">
                     
                      <mx:Script>
                          <![CDATA[
                           
                          import mx.collections.ArrayCollection;

                   

                          [Bindable]
                      /*     private var medalsAC:ArrayCollection = new ArrayCollection( [
                              { Country: "USA", Gold: 35, Silver:39, Bronze: 29 },
                              { Country: "China", Gold: 32, Silver:17, Bronze: 14 },
                              { Country: "Russia", Gold: 27, Silver:27, Bronze: 38 } ]); */
                             
                                  private var medalsAC:ArrayCollection = new ArrayCollection( [
                           
                              { Country: "", Gold: 27, Silver:27, Bronze: 38 } ]);
                             
                          ]]>
                      </mx:Script>
                     
                      <mx:Panel title="BarChart Control" layout="horizontal" color="0xffffff" borderAlpha="0.15" width="480" height="240"
                           paddingTop="10" paddingRight="5" paddingBottom="10" paddingLeft="5" horizontalAlign="center">
                          
                           <mx:BarChart id="bar" height="100%" color="0x323232"
                               showDataTips="true" dataProvider="{medalsAC}" width="324" >
                                 
                              <mx:verticalAxis>
                                  <mx:CategoryAxis categoryField="Country"/>
                              </mx:verticalAxis>
                                 
                              <mx:series>
                                  <mx:BarSeries yField="Country" xField="Gold" displayName="Gold"/>
                                  <mx:BarSeries yField="Country" xField="Silver" displayName="Silver"/>
                                  <mx:BarSeries yField="Country" xField="Bronze" displayName="Bronze"/>
                              </mx:series>
                          </mx:BarChart>
                         
                      </mx:Panel>
                  </mx:Application>

                   

                  I know how barWidthRatio effects the space between bars of different categories but is it possible to have space bewteen bars of the same category?