Creating clustered, stacked, overlaid, and 100% Bar charts in Flex 3

The following example shows the differences between a clustered, stacked, 100%, and overlaid Bar chart in Flex 3.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/10/11/creating-clustered-stacked-overlaid-and-100-bar-charts-in-flex-3/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:ApplicationControlBar dock="true">
        <mx:Form>
            <mx:FormItem label="type:">
                <mx:ComboBox id="comboBox">
                    <mx:dataProvider>
                        <mx:Object label="clustered" />
                        <mx:Object label="stacked" />
                        <mx:Object label="100%" />
                        <mx:Object label="overlaid" />
                    </mx:dataProvider>
                </mx:ComboBox>
            </mx:FormItem>
            <mx:FormItem label="showDataTips:">
                <mx:CheckBox id="checkBox1" />
            </mx:FormItem>
            <mx:FormItem label="showAllDataTips:">
                <mx:CheckBox id="checkBox2" />
            </mx:FormItem>
        </mx:Form>

        <mx:Spacer width="100%" />

        <mx:Legend dataProvider="{barChart}"/>
    </mx:ApplicationControlBar>

    <mx:BarChart id="barChart"
            type="{comboBox.selectedItem.label}"
            showDataTips="{checkBox1.selected}"
            showAllDataTips="{checkBox2.selected}"
            height="100%"
            width="100%">

        <mx:dataProvider>
            <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:dataProvider>

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

        <mx:series>
            <mx:BarSeries yField="name" xField="obp" displayName="OBP"/>
            <mx:BarSeries yField="name" xField="slg" displayName="SLG"/>
            <mx:BarSeries yField="name" xField="avg" displayName="AVG"/>
        </mx:series>
    </mx:BarChart>

</mx:Application>

View source is enabled in the following example.

12 thoughts on “Creating clustered, stacked, overlaid, and 100% Bar charts in Flex 3

  1. In Stacked column/area chart, is it possible to show the total of all the series for one particular stack at the end of the bar?

    In your eg. above, in type combo box if stacked is selected for R.Durham I would like to show “0.856” at the end of the bar. Is it possible?

    Thanks

    1. I am also getting those annoying long decimal places when using Stacked Column charts. Any way to avoid or work around them?

  2. Hi Friends,

    Need help in Bar charts.. would be great if any one could suggest some options..

    Thanks,
    Visu

  3. Hi, i am doing a project related to this example you have.. However, where can i find the full codings for this Bar chart sample, would really appreciate your help. Thanks

  4. Hi, i am currently using flex 4…I encountered this error when implementing which says “Could not resolve to a component implementation.” Is there ways to solve this problem?

  5. Sorie mistake from the previous post. The error is “Could not resolve < mx:Array > to a component implementation.”

Comments are closed.