Changing the bar width ratio on a Flex Bar Chart

By Peter deHaan On October 15, 2007 · 8 Comments

The following example shows how you can change the barWidthRatio style to control how wide each bar is in relation to the category width.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/10/15/changing-the-bar-width-ratio-on-a-flex-bar-chart/ -->
<mx:Application name="BarChart_barWidthRatio_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">
 
    <mx:ArrayCollection id="arrColl">
        <mx:source>
            <mx:Array>
                <mx:Object name="R Winn" obp=".353" slg=".445" avg=".300" />
                <mx:Object name="P Feliz" obp=".290" slg=".418" avg=".253" />
                <mx:Object name="O Vizquel" obp=".305" slg=".316" avg=".246" />
                <mx:Object name="B Molina" obp=".298" slg=".433" avg=".276" />
                <mx:Object name="R Durham" obp=".295" slg=".343" avg=".218" />
            </mx:Array>
        </mx:source>
    </mx:ArrayCollection>
 
    <mx:ApplicationControlBar dock="true">
        <mx:Form>
            <mx:FormItem label="barWidthRatio:">
                <mx:HSlider id="slider"
                        minimum="0.0"
                        maximum="1.0"
                        value="0.6"
                        liveDragging="true"
                        tickInterval="0.1" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>
 
     <mx:BarChart id="barChart"
             showDataTips="true"
             dataProvider="{arrColl}"
             width="100%"
             height="100%">
        <mx:verticalAxis>
            <mx:CategoryAxis categoryField="name"/>
        </mx:verticalAxis>
        <mx:series>
            <mx:BarSeries id="barSeries"
                    yField="name"
                    xField="avg"
                    displayName="avg"
                    barWidthRatio="{slider.value}" />
        </mx:series>
    </mx:BarChart>
 
</mx:Application>

View source is enabled in the following example.

Tagged with: barWidthRatio

About The Author

Peter deHaan

Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.

Visit Authors Website →

Add Widgets (Content Sidebar)

This is your Content Sidebar. Edit this content that appears here in the widgets panel by adding or removing widgets in the Content Sidebar area.

8 Responses to Changing the bar width ratio on a Flex Bar Chart

Rob says:

August 26, 2009 at 2:48 pm

Do you know if it’s possible to set the bar widths individually? Or change the spacing between bars individually?

Reply
- Peter deHaan says:
  
  August 26, 2009 at 6:01 pm
  
  @Rob,
  
  I’m not aware of any, but I’m far from a Charting expert. You may want to ask on FlexCoders.
  
  Peter
  
  Reply
angryProgrammer says:

September 20, 2009 at 8:26 pm

do you know how to display the data in a database on the barchart?

Reply
- Peter deHaan says:
  
  September 21, 2009 at 6:58 am
  
  @angryProgrammer,
  
  I think the easiest way would be to create a server-side script page using ColdFusion/PHP/ASP which retrieves the data from a database and outputs it as XML. Next, use the <mx:HTTPService/> tag in your Flex application to get the XML data from your server-side script and convert it into an XMLListCollection object which you can use as the BarChart control’s data provider.
  
  Peter
  
  Reply
rocksoccer says:

December 9, 2010 at 8:22 am

Just want to mention that, if you want to use barWidthRatio with actionscript code, you need to set it in either creationComplete or updateComplete event handler. Otherwise, it does NOT work at all.

It seems some properties in Flex must be set after creation and update. Are these the bugs, or they design it to be like this?

Reply
- Peter deHaan says:
  
  December 9, 2010 at 9:17 am
  
  @rocksoccer,
  
  Definitely sounds suspicious, but I’m not a charting expert. When in doubt, file a bug; http://bugs.adobe.com/flex/ and somebody from Adobe can investigate and comment in the bug.
  
  Thanks,
  Peter
  
  Reply
colin says:

April 15, 2011 at 12:43 pm

rocksocker, peter:
i can confirm that you need to do this in updateComplete when working with multiple series. resizing wasn’t working for me until i moved it to that handler.

Reply
Raviteja says:

November 15, 2011 at 8:15 am

I need a automated tool developed in FLEX, to show the bar charts when we enter the values..

reference..
http://asia.firstbaseit.net/infiniti/resources/flash/inner_banner.swf

asap…

Reply