Flex Examples » BarChart http://blog.flexexamples.com Just a bunch of Adobe Flex Examples Wed, 26 Jan 2011 18:09:51 +0000 en hourly 1 Rotating labels in a Flex chart axis using the labelRotation style http://blog.flexexamples.com/2007/10/15/rotating-labels-in-a-flex-chart-axis-using-the-labelrotation-style/ http://blog.flexexamples.com/2007/10/15/rotating-labels-in-a-flex-chart-axis-using-the-labelrotation-style/#comments Tue, 16 Oct 2007 03:53:26 +0000 Peter deHaan http://blog.flexexamples.com/2007/10/15/rotating-labels-in-a-flex-chart-axis-using-the-labelrotation-style/ The following example shows how you can rotate the vertical and horizontal axis renderer’s label by setting the labelRotation style.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2007/10/15/rotating-labels-in-a-flex-chart-axis-using-the-labelrotation-style/ --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:Style> @font-face { src: local("Arial"); font-family: EmbeddedArial; } BarChart { font-family: EmbeddedArial; } </mx:Style> [...]]]> The following example shows how you can rotate the vertical and horizontal axis renderer’s label by setting the labelRotation style.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/10/15/rotating-labels-in-a-flex-chart-axis-using-the-labelrotation-style/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        @font-face {
            src: local("Arial");
            font-family: EmbeddedArial;
        }

        BarChart {
            font-family: EmbeddedArial;
        }
    </mx:Style>

    <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:FormHeading label="labelRotation" />
            <mx:FormItem label="horizontalAxisRenderer:">
                <mx:HSlider id="horizontalLabelRotation"
                        minimum="-90"
                        maximum="90"
                        value="0"
                        liveDragging="true"
                        snapInterval="10"
                        tickInterval="10" />
            </mx:FormItem>
            <mx:FormItem label="verticalAxisRenderer:">
                <mx:HSlider id="verticalLabelRotation"
                        minimum="-90"
                        maximum="90"
                        value="0"
                        liveDragging="true"
                        snapInterval="10"
                        tickInterval="10" />
            </mx:FormItem>
        </mx:Form>

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

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

    <mx:BarChart id="barChart"
             showDataTips="true"
             dataProvider="{arrColl}"
             width="100%"
             height="100%">

        <!-- vertical axis -->
        <mx:verticalAxis>
            <mx:CategoryAxis categoryField="name" title="Player"/>
        </mx:verticalAxis>

        <!-- vertical axis renderer -->
        <mx:verticalAxisRenderer>
            <mx:AxisRenderer labelRotation="{verticalLabelRotation.value}" />
        </mx:verticalAxisRenderer>

        <!-- horizontal axis renderer -->
        <mx:horizontalAxisRenderer>
            <mx:AxisRenderer labelRotation="{horizontalLabelRotation.value}" />
        </mx:horizontalAxisRenderer>

        <!-- series -->
        <mx:series>
            <mx:BarSeries id="obpSeries"
                    yField="name"
                    xField="obp"
                    displayName="obp" />
            <mx:BarSeries id="slgSeries"
                    yField="name"
                    xField="slg"
                    displayName="slg" />
            <mx:BarSeries id="avgSeries"
                    yField="name"
                    xField="avg"
                    displayName="avg" />
        </mx:series>
    </mx:BarChart>

</mx:Application>

View source is enabled in the following example.

 
]]> http://blog.flexexamples.com/2007/10/15/rotating-labels-in-a-flex-chart-axis-using-the-labelrotation-style/feed/ 24 Changing the bar width ratio on a Flex Bar Chart http://blog.flexexamples.com/2007/10/15/changing-the-bar-width-ratio-on-a-flex-bar-chart/ http://blog.flexexamples.com/2007/10/15/changing-the-bar-width-ratio-on-a-flex-bar-chart/#comments Mon, 15 Oct 2007 15:02:22 +0000 Peter deHaan http://blog.flexexamples.com/2007/10/15/changing-the-bar-width-ratio-on-a-flex-bar-chart/ 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" [...]]]> 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.

 
]]> http://blog.flexexamples.com/2007/10/15/changing-the-bar-width-ratio-on-a-flex-bar-chart/feed/ 8 Using data effects to animate chart data http://blog.flexexamples.com/2007/10/15/using-data-effects-to-animate-chart-data/ http://blog.flexexamples.com/2007/10/15/using-data-effects-to-animate-chart-data/#comments Mon, 15 Oct 2007 14:19:51 +0000 Peter deHaan http://blog.flexexamples.com/2007/10/15/236/ In a previous example, “Animating data changes in a Flex Pie Chart”, we looked at using the SeriesInterpolate effect to animate a pie chart when the data changed.

The following example shows how you can use the SeriesInterpolate, SeriesSlide, and SeriesZoom effects to create different animations.

Full code after the jump.

In a previous example, “Animating data changes in a Flex Pie Chart”, we looked at using the SeriesInterpolate effect to animate a pie chart when the data changed.

The following example shows how you can use the SeriesInterpolate, SeriesSlide, and SeriesZoom effects to create different animations.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/10/15/using-data-effects-to-animate-chart-data/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            private function updateDP():void {
                var str:String = categoryFieldComboBox.selectedItem.data;
                barSeries.xField = str;
                barSeries.displayName = str;
            }
        ]]>
    </mx:Script>

    <mx:SeriesInterpolate id="seriesInterpolate" duration="1000" />
    <mx:SeriesSlide id="seriesSlide" duration="1000" direction="right" />
    <mx:SeriesZoom id="seriesZoom" duration="1000" />

    <mx:Array id="dataEffects">
        <mx:Object label="seriesInterpolate" data="{seriesInterpolate}" />
        <mx:Object label="seriesSlide" data="{seriesSlide}" />
        <mx:Object label="seriesZoom" data="{seriesZoom}" />
    </mx:Array>

    <mx:Array id="categoryFields">
        <mx:Object data="obp" label="OBP" />
        <mx:Object data="slg" label="SLG" />
        <mx:Object data="avg" label="AVG" />
    </mx:Array>

    <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="categoryField:">
                <mx:ComboBox id="categoryFieldComboBox"
                    dataProvider="{categoryFields}"
                        change="updateDP();" />
            </mx:FormItem>
            <mx:FormItem label="showDataEffect:">
                <mx:ComboBox id="showDataEffectComboBox"
                        dataProvider="{dataEffects}"
                        change="updateDP();" />
            </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="obp"
                    displayName="obp"
                    showDataEffect="{showDataEffectComboBox.selectedItem.data}" />
        </mx:series>
    </mx:BarChart>

</mx:Application>

View source is enabled in the following example.

 
]]> http://blog.flexexamples.com/2007/10/15/using-data-effects-to-animate-chart-data/feed/ 6 Creating clustered, stacked, overlaid, and 100% Bar charts in Flex 3 http://blog.flexexamples.com/2007/10/11/creating-clustered-stacked-overlaid-and-100-bar-charts-in-flex-3/ http://blog.flexexamples.com/2007/10/11/creating-clustered-stacked-overlaid-and-100-bar-charts-in-flex-3/#comments Fri, 12 Oct 2007 06:19:03 +0000 Peter deHaan http://blog.flexexamples.com/2007/10/11/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%" [...]]]> 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.

 
]]> http://blog.flexexamples.com/2007/10/11/creating-clustered-stacked-overlaid-and-100-bar-charts-in-flex-3/feed/ 12