Toggle data series when the user clicks on the Change Series button: : ToggleButton « Components « Flex

Home
Flex
1.Chart
2.Components
3.Container
4.Data Model
5.Development
6.Effects
7.Event
8.Graphics
9.Grid
10.Style
Flex » Components » ToggleButtonScreenshots 
Toggle data series when the user clicks on the Change Series button:
Toggle data series when the user clicks on the Change Series button:
       

<!-- 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.A toggle button with an image for up, down, over, and disabled statesA toggle button with an image for up, down, over, and disabled states
2.Toggle Button color between blue and the defaultToggle Button color between blue and the default
3.Toggle button font size between null and 8Toggle button font size between null and 8
4.Use ToggleBarButton to toggle two forms in ViewStackUse ToggleBarButton to toggle two forms in ViewStack
5.Toggle style buttonToggle style button
6.Mark a Button as Toggle.Mark a Button as Toggle.
7.Toggle color of the Button control between blue and the default by using this techniqueToggle color of the Button control between blue and the default by using this technique
java2s.com  | Contact Us | Privacy Policy
Copyright 2009 - 12 Demo Source and Support. All rights reserved.
All other trademarks are property of their respective owners.