Use ColumnSet, BarSet, and AreaSet classes to combine groups of chart series, : Bar Chart « Chart « Flex






Use ColumnSet, BarSet, and AreaSet classes to combine groups of chart series,

          

<!--
Code from Flex 4 Documentation "Using Adobe Flex 4".

This user guide is licensed for use under the terms of the Creative Commons Attribution 
Non-Commercial 3.0 License. 

This License allows users to copy, distribute, and transmit the user guide for noncommercial 
purposes only so long as 
  (1) proper attribution to Adobe is given as the owner of the user guide; and 
  (2) any reuse or distribution of the user guide contains a notice that use of the user guide is governed by these terms. 
The best way to provide notice is to include the following link. 
To view a copy of this license, visit http://creativecommons.org/licenses/by-nc-sa/3.0/

-->
<!-- charts/UsingBarSets.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    creationComplete="initApp()">
    <mx:Script>
        import mx.charts.Legend;
        import mx.charts.BarChart;
        import mx.charts.series.BarSet;
        import mx.charts.series.BarSeries;
        import mx.collections.ArrayCollection;
        [Bindable]
        private var yearlyData:ArrayCollection = new ArrayCollection([
            {month:"January", revenue:120, costs:45,overhead:102, oneTime:23},
            {month:"February", revenue:108, costs:42,overhead:87, oneTime:47},
            {month:"March", revenue:150, costs:82,overhead:32, oneTime:21},
            {month:"April", revenue:170, costs:44,overhead:68},
            {month:"May", revenue:250, costs:57,overhead:77, oneTime:17},
            {month:"June", revenue:200, costs:33,overhead:51, oneTime:30},
            {month:"July", revenue:145, costs:80,overhead:62, oneTime:18},
            {month:"August", revenue:166, costs:87,overhead:48},
            {month:"September", revenue:103, costs:56,overhead:42},
            {month:"October", revenue:140, costs:91,overhead:45, oneTime:60},
            {month:"November", revenue:100, costs:42,overhead:33, oneTime:67},
            {month:"December", revenue:182, costs:56,overhead:25, oneTime:48},
            {month:"May", revenue:120, costs:57,overhead:30}
            ]);
        private function initApp():void {
            var c:BarChart = new BarChart();
            c.dataProvider = yearlyData;
            var vAxis:CategoryAxis = new CategoryAxis();
            vAxis.categoryField = "month";
            c.verticalAxis = vAxis;
            var mySeries:Array = new Array();
            var outerSet:BarSet = new BarSet();
            outerSet.type = "clustered";
            var series1:BarSeries = new BarSeries();
            series1.xField = "revenue";
            series1.displayName = "Revenue";
            outerSet.series = [series1];
            var innerSet:BarSet = new BarSet();
            innerSet.type = "stacked";
            var series2:BarSeries = new BarSeries();
            var series3:BarSeries = new BarSeries();
            series2.xField = "costs";
            series2.displayName = "Recurring Costs";
            series3.xField = "oneTime";
            series3.displayName = "One-Time Costs";
            innerSet.series = [series2, series3];
            c.series = [outerSet, innerSet];
            var l:Legend = new Legend();
            l.dataProvider = c;
            panel2.addChild(c);
            panel2.addChild(l);
        }
      </mx:Script>
    <mx:Panel title="Mixed Sets Chart Created in MXML" id="panel1">
        <mx:BarChart id="myChart" dataProvider="{yearlyData}">
            <mx:verticalAxis>
                <mx:CategoryAxis categoryField="month" />
            </mx:verticalAxis>
            <mx:series>
                <mx:BarSet type="clustered">
                    <mx:BarSeries xField="revenue" displayName="Revenue" />
                    <mx:BarSet type="stacked">
                        <mx:BarSeries xField="costs"
                            displayName="Recurring Costs" />
                        <mx:BarSeries xField="oneTime"
                            displayName="One-Time Costs" />
                    </mx:BarSet>
                </mx:BarSet>
            </mx:series>
        </mx:BarChart>
        <mx:Legend dataProvider="{myChart}" />
    </mx:Panel>
    <mx:Panel title="Mixed Sets Chart Created in ActionScript" id="panel2">
    </mx:Panel>
</mx:Application>

   
    
    
    
    
    
    
    
    
    
  








Related examples in the same category

1.A bar chart with a vertical axisA bar chart with a vertical axis
2.CSS for BarSeries and ColumnSeriesCSS for BarSeries and ColumnSeries
3.Setting fills with CSS for BarChartSetting fills with CSS for BarChart
4.Set up legend for Bar chartSet up legend for Bar chart
5.Series for Bar chartSeries for Bar chart
6.Bar Chart with ArrayCollectionBar Chart with ArrayCollection
7.Dynamically size Bar chartDynamically size Bar chart
8.Defines a line width of 2 pixels, with a dark/light gray border for BarChartDefines a line width of 2 pixels, with a dark/light gray border for BarChart
9.BarChartBarChart
10.Basic BarChart SizeBasic BarChart Size
11.A simple BarChart control with data from asp.netA simple BarChart control with data from asp.net
12.Vertical Axis as the data seriesVertical Axis as the data series
13.Gradient Fills In ActionScriptGradient Fills In ActionScript
14.Setting the direction of legendsSetting the direction of legends
15.Legend with a border and title barLegend with a border and title bar
16.Name data series by using the displayName property of the series:Name data series by using the displayName property of the series:
17.Showing multiple DataTipsShowing multiple DataTips
18.Define a new callback function, dtFunc, that returns a formatted value for the DataTip:Define a new callback function, dtFunc, that returns a formatted value for the DataTip:
19.Create a custom legend in ActionScript.Create a custom legend in ActionScript.
20.Creating charts in ActionScript
21.Sets the angle property to 90, which specifies that the transition occurs from the top of the chart to the bottom.Sets the angle property to 90, which specifies that the transition occurs from the top of the chart to the bottom.
22.Use a LinearGradient class with three colors for a gradient fill of the chart's background:Use a LinearGradient class with three colors for a gradient fill of the chart's background:
23.Use fills to set the background of the chartsUse fills to set the background of the charts
24.To enable DataTips, set the value of the chart control's showDataTips property to trueTo enable DataTips, set the value of the chart control's showDataTips property to true
25.Add a Legend to a chart in ActionScriptAdd a Legend to a chart in ActionScript