SeriesZoom effect : Zoom Effect « Effects « 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 » Effects » Zoom EffectScreenshots 
SeriesZoom effect
SeriesZoom effect
    

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
 creationComplete="initApp()" backgroundColor="#FFFFFF">
  <mx:Script>
    
    import mx.charts.events.ChartItemEvent;
    import mx.collections.ArrayCollection;
    import mx.charts.HitData;
    
    [Bindable]
    private var productSales:ArrayCollection;
 
 
    private function initApp():void{
      productSales = new ArrayCollection( [
            Quarter: "1", PC: 10000, Mac: 3000, Gadgets: 1000, Total: 14000 },
            Quarter: "2", PC: 12000, Mac: 4000, Gadgets: 2000, Total: 18000 },
            Quarter: "3", PC: 15000, Mac: 8000, Gadgets: 5000, Total: 28000 },
            Quarter: "4", PC: 20000, Mac: 10000, Gadgets: 9000, Total: 39000 }
            ]);
      
       var pieData:ArrayCollection = new ArrayCollection( [
         {Product: "PC", Total: 1},
         {Product: "Mac", Total: 2},
         {Product: "Gadgets", Total: 3},
        ]);
       pieChart.dataProvider=pieData;
    }
            
    public function display(data:Object, field:String, index:Number,percentValue:Number):String {
      return data.Product + ": " + data.Total;
    }

  
  </mx:Script>
    
  <mx:SeriesZoom id="showPieEffect" duration="1000"/>
  <mx:Panel title="Effects" width="100%" height="100%">
    <mx:ColumnChart id="columnChart" height="100%" width="100%" showDataTips="true" dataProvider="{productSales}">
      <mx:horizontalAxis>
        <mx:CategoryAxis categoryField="Quarter"/>
      </mx:horizontalAxis>          
      <mx:series>
        <mx:ColumnSeries xField="Quarter" yField="Total" displayName="Quarter"/>
      </mx:series>
    </mx:ColumnChart>
    <mx:PieChart id="pieChart" height="100%" width="100%" showDataTips="true" >
      <mx:series>
        <mx:PieSeries showDataEffect="{showPieEffect}" labelPosition="callout" field="Total" labelFunction="display"/>
      </mx:series>
    </mx:PieChart>
  </mx:Panel>
</mx:Application>

   
    
    
    
  
Related examples in the same category
1.Using the Zoom effect to make the button zoom-in largeUsing the Zoom effect to make the button zoom-in large
2.Use Zoom class to set zoom effectUse Zoom class to set zoom effect
3.Apply a Zoom effect to multiple Buttons with data binding to effect's targets propertyApply a Zoom effect to multiple Buttons with data binding to effect's targets property
4.Set up zoom effect in ActionScriptSet up zoom effect in ActionScript
5.Zoom EffectsZoom Effects
6.Zoomer Pattern 2Zoomer Pattern 2
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.