Change fields of a series to change chart data at run time

           

<!-- charts/ToggleSeries.mxml -->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:s="library://ns.adobe.com/flex/spark"
    initialize="initApp();" height="600">
    <fx:Script> 
        [Bindable] 
        public var dataSet:Array; 
        public var myStates:Array = ["Wisconsin","Ohio","Arizona","Penn"]; 
        public var curSeries:String; 
        public function initApp():void { 
            var newData:Array = []; 
            for(var i:int=0;i<myStates.length;i++) { 
                newData[i] = {  Apples: Math.floor(Math.random()*150), 
                                Oranges: Math.floor(Math.random()*150), 
                                myState: myStates[i] 
                } 
            } 
            dataSet = newData; 
            curSeries = "apples"; 
        } 
        public function changeData():void { 
            var series:Object = myChart.series[0]; 
            if (curSeries == "apples") { 
                curSeries="oranges"; 
                series.yField = "Oranges"; 
                series.displayName = "Oranges"; 
                series.setStyle("fill",0xFF9933); 
            } else { 
                curSeries="apples"; 
                series.yField = "Apples"; 
                series.displayName = "Apples"; 
                series.setStyle("fill",0xFF0000); 
            } 
        } 
      </fx:Script>
    <s:layout>
        <s:VerticalLayout />
    </s:layout>
    <s:Panel title="Column Chart">
        <s:layout>
            <s:VerticalLayout />
        </s:layout>
        <mx:ColumnChart id="myChart" dataProvider="{dataSet}"
            showDataTips="true">
            <mx:horizontalAxis>
                <mx:CategoryAxis dataProvider="{dataSet}"
                    categoryField="myState" />
            </mx:horizontalAxis>
            <mx:series>
                <mx:ColumnSeries yField="Apples" displayName="Apples">
                    <mx:fill>
                        <mx:SolidColor color="0xFF0000" />
                    </mx:fill>
                </mx:ColumnSeries>
            </mx:series>
        </mx:ColumnChart>
        <mx:Legend dataProvider="{myChart}" />
    </s:Panel>
    <s:Button id="b1" label="Toggle Series" click="changeData()" />
</s:Application>

Related examples in the same category

1.	ColumnChart with ColumnSeries
2.	Use the fill property to set the color for each ColumnSeries object in a ColumnChart control
3.	Define a custom SolidColor object and a custom SolidColorStroke object, and applies them to the ColumnSeries object in the ColumnChart control.
4.	The following example mixes a LineSeries and a ColumnSeries
5.	The following example defines the colors for two series in the ColumnChart control:
6.	Adding Series to ColumnChart
7.	defines the colors for two series in the ColumnChart control
8.	Create a ColumnChart control with two series
9.	Data Update In Real Time Series
10.	uses two series to allow a visual comparison of two stocks that trade in different ranges
11.	Cast the HitData object to a Series class
12.	Set elementOffset property of SeriesInterpolate to 0.
13.	Increments and decrements the series's selectedIndex property to select each item
14.	Add or remove a data point from a series in ActionScript.
15.	Use a similar technique to add data series to your charts rather than replacing the existing ones
16.	yValue of the ColumnSeriesItem represents the percentage a series takes up in a 100% chart
17.	Use chart items in more than one series
18.	Zoom in data series from the upper-right corner of the chart.
19.	The final result is a chart with multiple axes, but whose series share some of the same properties defined by common axis renderers.

Change fields of a series to change chart data at run time : Column Chart ColumnSeries « Chart « Flex

Related examples in the same category