Programmation Flex/Utilisation des composants/Charts

Programmation_Flex
Charts
Sommaire
Liste des composants Utilisation des composants Controles Layout Navigator Adobe Air Charts Applications avancées
Liens
Liens
Modifier ce modèle

Area chart

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="top"
    horizontalAlign="center" backgroundGradientColors="[0x000000,0x323232]" paddingTop="0" viewSourceURL="srcview/index.html">
    
    <mx:Script>
        <![CDATA[

        import mx.collections.ArrayCollection;

        [Bindable]
        private var expensesAC:ArrayCollection = new ArrayCollection( [
            { Month: "Jan", Profit: 2000, Expenses: 1500, Amount: 450 },
            { Month: "Feb", Profit: 1000, Expenses: 200, Amount: 600 },
            { Month: "Mar", Profit: 1500, Expenses: 500, Amount: 300 },
            { Month: "Apr", Profit: 1800, Expenses: 1200, Amount: 900 },
            { Month: "May", Profit: 2400, Expenses: 575, Amount: 500 } ]);
        ]]>
    </mx:Script>
    
    <mx:Panel title="AreaChart Control" layout="horizontal" color="0xffffff" borderAlpha="0.15" width="600" height="240"
         paddingTop="10" paddingRight="5" paddingBottom="10" paddingLeft="5" horizontalAlign="center">
         
        <mx:AreaChart id="Areachart" color="0x323232" height="100%" showDataTips="true" dataProvider="{expensesAC}">
            
            <mx:horizontalAxis>
                <mx:CategoryAxis categoryField="Month"/>
            </mx:horizontalAxis>

            <mx:series>
                <mx:AreaSeries yField="Profit" form="curve" displayName="Profit"/>
                <mx:AreaSeries yField="Expenses" form="curve" displayName="Expenses"/>
                <mx:AreaSeries yField="Amount" form="curve" displayName="Amount"/>
            </mx:series>
        </mx:AreaChart>
            
        <mx:Legend dataProvider="{Areachart}" color="0x323232"/>
        
    </mx:Panel>
</mx:WindowedApplication>

• Ce graphique a trois courbes dans les séries - Profit, Expenses, Amount
• AreaChart a le tableau {expensesAC} en point d'entrée du dataProvider

BarChart

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="top"
    horizontalAlign="center" backgroundGradientColors="[0x000000,0x323232]" paddingTop="0" viewSourceURL="srcview/index.html">
    
    <mx:Script>
        <![CDATA[
          
        import mx.collections.ArrayCollection;

        [Bindable]
        private var medalsAC:ArrayCollection = new ArrayCollection( [
            { Country: "USA", Gold: 35, Silver:39, Bronze: 29 },
            { Country: "China", Gold: 32, Silver:17, Bronze: 14 },
            { Country: "Russia", Gold: 27, Silver:27, Bronze: 38 } ]);
        ]]>
    </mx:Script>
    
    <mx:Panel title="BarChart Control" layout="horizontal" color="0xffffff" borderAlpha="0.15" width="600" height="240"
         paddingTop="10" paddingRight="5" paddingBottom="10" paddingLeft="5" horizontalAlign="center">
         
         <mx:BarChart id="bar" height="100%" color="0x323232" 
             showDataTips="true" dataProvider="{medalsAC}">
                
            <mx:verticalAxis>
                <mx:CategoryAxis categoryField="Country"/>
            </mx:verticalAxis>
                
            <mx:series>
                <mx:BarSeries yField="Country" xField="Gold" displayName="Gold"/>
                <mx:BarSeries yField="Country" xField="Silver" displayName="Silver"/>
                <mx:BarSeries yField="Country" xField="Bronze" displayName="Bronze"/>
            </mx:series>
        </mx:BarChart>

        <mx:Legend dataProvider="{bar}" color="0x323232"/>
        
    </mx:Panel>
</mx:WindowedApplication>

• En dataprovider on a le tableau medalsAC
• En barSeries on a 3 données par groupe Country (axe des Y), soit Gold - Silver - Bronze (axe des x)

BubbleChart

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="top"
    horizontalAlign="center" backgroundGradientColors="[0x000000,0x323232]" paddingTop="0" viewSourceURL="srcview/index.html">
    
    <mx:Script>
        <![CDATA[
        
        import mx.collections.ArrayCollection;

        [Bindable]
        private var expensesAC:ArrayCollection = new ArrayCollection( [
            { Month: "Jan", Profit: 2000, Expenses: 1500, Amount: 450 },
            { Month: "Feb", Profit: 1000, Expenses: 200, Amount: 600 },
            { Month: "Mar", Profit: 1500, Expenses: 500, Amount: 300 },
            { Month: "Apr", Profit: 1800, Expenses: 1200, Amount: 900 },
            { Month: "May", Profit: 2400, Expenses: 575, Amount: 500 } ]);
        ]]>
    </mx:Script>
    
    <mx:Style>        
        BubbleChart { color:#000099; }
    </mx:Style>
    
    <mx:Panel title="BubbleChart Control" layout="vertical" color="0xffffff" borderAlpha="0.15" width="600" height="240"
         paddingTop="10" paddingRight="10" paddingBottom="10" paddingLeft="10" horizontalAlign="center">
         
         <mx:BubbleChart id="bubblechart" height="100%" width="100%" paddingRight="5" paddingLeft="5" color="0x323232"
            showDataTips="true" maxRadius="20" dataProvider="{expensesAC}">

            <mx:series>
                <mx:BubbleSeries displayName="Profit/Expenses/Amount" 
                    xField="Profit" yField="Expenses" radiusField="Amount"/>
            </mx:series>            
        </mx:BubbleChart>
            
        <mx:Legend dataProvider="{bubblechart}" color="0x323232"/>
        
    </mx:Panel>
</mx:WindowedApplication>

• dataProvider="{expensesAC}" le tableau déclaré dans le mx:script
• en X : le "profit", en y : "Expenses", le rayon de la bulle est "Amount"

CandlestickChart

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="top"
    horizontalAlign="center" backgroundGradientColors="[0x000000,0x323232]" paddingTop="0" viewSourceURL="srcview/index.html">
    
     <mx:Script>
        <![CDATA[
          
        import mx.collections.ArrayCollection;

        [Bindable]
        private var expensesAC:ArrayCollection = new ArrayCollection( [
            { Date: "25-Jul", Open: 40.75,  High: 40.75, Low: 40.24, Close:40.31},
            { Date: "26-Jul", Open: 39.98,  High: 40.78, Low: 39.97, Close:40.34},
            { Date: "27-Jul", Open: 40.38,  High: 40.66, Low: 40, Close:40.63},
            { Date: "28-Jul", Open: 40.49,  High: 40.99, Low: 40.3, Close:40.98},
            { Date: "29-Jul", Open: 40.13,  High: 40.4, Low: 39.65, Close:39.95},
            { Date: "1-Aug", Open: 39.00,  High: 39.50, Low: 38.7, Close:38.6}, 
            { Date: "2-Aug", Open: 38.68,  High: 39.34, Low: 37.75, Close:38.84}, 
            { Date: "3-Aug", Open: 38.76,  High: 38.76, Low: 38.03, Close:38.12}, 
            { Date: "4-Aug", Open: 37.98,  High: 37.98, Low: 36.56, Close:36.69},                       
            { Date: "5-Aug", Open: 36.61,  High: 37, Low: 36.48, Close:36.86} ]);
        ]]>
    </mx:Script>
    
    <mx:Panel title="CandlestickChart Control" layout="vertical" color="0xffffff" borderAlpha="0.15" width="600" height="240"
         paddingTop="10" paddingRight="10" paddingBottom="10" paddingLeft="10" horizontalAlign="center">
         
         <mx:CandlestickChart id="candlestickchart" height="100%" width="100%" paddingRight="5" paddingLeft="5" 
            color="0x323232" showDataTips="true" dataProvider="{expensesAC}">
            
            <mx:verticalAxis>
                <mx:LinearAxis baseAtZero="false" />
            </mx:verticalAxis>

            <mx:horizontalAxis>
                <mx:CategoryAxis categoryField="Date" title="Date"/>
            </mx:horizontalAxis>

            <mx:series>
                <mx:CandlestickSeries openField="Open" highField="High" 
                    lowField="Low" closeField="Close"/>
            </mx:series>

        </mx:CandlestickChart>
        
    </mx:Panel>
</mx:WindowedApplication>

• dataProvider="{expensesAC}" du tableau du mx:script en entrée
• en X (axe horizontal) on a la categoryField "Date"
• en Y (axe vertical) on a des unités données par flex
• les chandelles ont 4 champs : "Open", "High", "Low", "Close"

ColumnChart

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="top"
    horizontalAlign="center" backgroundGradientColors="[0x000000,0x323232]" paddingTop="0" viewSourceURL="srcview/index.html">
    
    <mx:Script>
        <![CDATA[
          
        import mx.collections.ArrayCollection;

        [Bindable]
        private var medalsAC:ArrayCollection = new ArrayCollection( [
            { Country: "USA", Gold: 35, Silver:39, Bronze: 29 },
            { Country: "China", Gold: 32, Silver:17, Bronze: 14 },
            { Country: "Russia", Gold: 27, Silver:27, Bronze: 38 } ]);
        ]]>
    </mx:Script>
    
    <mx:Panel title="ColumnChart Control" layout="horizontal" color="0xffffff" borderAlpha="0.15" width="600" height="240"
         paddingTop="10" paddingRight="5" paddingBottom="10" paddingLeft="5" horizontalAlign="center">
         
         <mx:ColumnChart id="column" height="100%" color="0x323232"
            showDataTips="true" dataProvider="{medalsAC}">
                
            <mx:horizontalAxis>
                <mx:CategoryAxis categoryField="Country"/>
            </mx:horizontalAxis>
                
            <mx:series>
                <mx:ColumnSeries xField="Country" yField="Gold" displayName="Gold"/>
                <mx:ColumnSeries xField="Country" yField="Silver" displayName="Silver"/>
                <mx:ColumnSeries xField="Country" yField="Bronze" displayName="Bronze"/>
            </mx:series>
        </mx:ColumnChart>

        <mx:Legend dataProvider="{column}" color="0x323232"/>
        
    </mx:Panel>
</mx:WindowedApplication>

• dataProvider="{medalsAC}" du tableau sous mx:script
• groupage en X : "Country"
• les champs par "Country" : Gold, Silver, Bronze
• en Y, on a les valeurs assignées par flex

HLOCChart

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="top"
    horizontalAlign="center" backgroundGradientColors="[0x000000,0x323232]" paddingTop="0" viewSourceURL="srcview/index.html">
    
    <mx:Script>
        <![CDATA[
          
        import mx.collections.ArrayCollection;

        [Bindable]
        private var stockDataAC:ArrayCollection = new ArrayCollection( [
            { Date: "25-Jul", Open: 40.55,  High: 40.75, Low: 40.24, Close:40.31},
            { Date: "26-Jul", Open: 40.15,  High: 40.78, Low: 39.97, Close:40.34},
            { Date: "27-Jul", Open: 40.38,  High: 40.66, Low: 40, Close:40.63},
            { Date: "28-Jul", Open: 40.49,  High: 40.99, Low: 40.3, Close:40.98},
            { Date: "29-Jul", Open: 40.13,  High: 40.4, Low: 39.65, Close:39.95},
            { Date: "1-Aug", Open: 39.00,  High: 39.50, Low: 38.7, Close:38.6}, 
            { Date: "2-Aug", Open: 38.68,  High: 39.34, Low: 37.75, Close:38.84}, 
            { Date: "3-Aug", Open: 38.76,  High: 38.76, Low: 38.03, Close:38.12}, 
            { Date: "4-Aug", Open: 37.98,  High: 37.98, Low: 36.56, Close:36.69},                       
            { Date: "5-Aug", Open: 36.61,  High: 37, Low: 36.48, Close:36.86} ]); 
        ]]>
    </mx:Script>
    
    <mx:Panel title="HLOCChart Control" layout="vertical" color="0xffffff" borderAlpha="0.15" width="600" height="240"
         paddingTop="10" paddingRight="10" paddingBottom="10" paddingLeft="10" horizontalAlign="center">
         
         <mx:HLOCChart id="hlocchart" height="100%" width="100%" paddingRight="5" paddingLeft="5"
             color="0x323232" showDataTips="true" dataProvider="{stockDataAC}">
            
            <mx:verticalAxis>
                <mx:LinearAxis baseAtZero="false" />
            </mx:verticalAxis>

            <mx:horizontalAxis>
                <mx:CategoryAxis categoryField="Date" title="Date" />
            </mx:horizontalAxis>

            <mx:series>
                <mx:HLOCSeries openField="Open" highField="High" 
                    lowField="Low" closeField="Close"/>
            </mx:series>
        </mx:HLOCChart>
        
    </mx:Panel>
</mx:WindowedApplication>

• dataProvider="{stockDataAC}" en entrée un tableau sous mx:script
• en X (horizontal) les "Date"
• en Y les valeurs assignées par flex
• les 4 champs de HLOCSeries sont : "Open", "High", "Low", "Close"

LineChart

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="top"
    horizontalAlign="center" backgroundGradientColors="[0x000000,0x323232]" paddingTop="0" viewSourceURL="srcview/index.html">
    
    <mx:Script>
        <![CDATA[

        import mx.collections.ArrayCollection;

        [Bindable]
        private var expensesAC:ArrayCollection = new ArrayCollection( [
            { Month: "Jan", Profit: 2000, Expenses: 1500, Amount: 450 },
            { Month: "Feb", Profit: 1000, Expenses: 200, Amount: 600 },
            { Month: "Mar", Profit: 1500, Expenses: 500, Amount: 300 },
            { Month: "Apr", Profit: 1800, Expenses: 1200, Amount: 900 },
            { Month: "May", Profit: 2400, Expenses: 575, Amount: 500 } ]);
        ]]>
    </mx:Script>
    
    <mx:Panel title="LineChart Control" layout="horizontal" color="0xffffff" borderAlpha="0.15" width="600" height="240"
         paddingTop="10" paddingRight="5" paddingBottom="10" paddingLeft="5" horizontalAlign="center">
         
         <mx:LineChart id="linechart" color="0x323232" height="100%"
            showDataTips="true" dataProvider="{expensesAC}">
                
            <mx:horizontalAxis>
                <mx:CategoryAxis categoryField="Month"/>
            </mx:horizontalAxis>

            <mx:series>
                <mx:LineSeries yField="Profit" form="curve" displayName="Profit"/>
                <mx:LineSeries yField="Expenses" form="curve" displayName="Expenses"/>
                <mx:LineSeries yField="Amount" form="curve" displayName="Amount"/>
            </mx:series>
        </mx:LineChart>

        <mx:Legend dataProvider="{linechart}" color="0x323232"/>
        
    </mx:Panel>
</mx:WindowedApplication>

• dataProvider="{expensesAC}" le tableau sous mx:script
• en X : le "Month"
• 3 séries : "Profit", "Expenses", "Amount"

PieChart

 
<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="top"
    horizontalAlign="center" backgroundGradientColors="[0x000000,0x323232]" paddingTop="0" viewSourceURL="srcview/index.html">
    
    <mx:Script>
        <![CDATA[
          
        import mx.collections.ArrayCollection;

        [Bindable]
        private var medalsAC:ArrayCollection = new ArrayCollection( [
            { Country: "USA", Gold: 35, Silver:39, Bronze: 29 },
            { Country: "China", Gold: 32, Silver:17, Bronze: 14 },
            { Country: "Russia", Gold: 27, Silver:27, Bronze: 38 } ]);
    
        private function displayGold(data:Object, field:String, index:Number, percentValue:Number):String {
            var temp:String= (" " + percentValue).substr(0,6);
            return data.Country + ": " + '\n' + "Total Gold: " + data.Gold + '\n' + temp + "%";
        }
        ]]>
    </mx:Script>
    
    <mx:Panel title="PieChart Control" layout="vertical" color="0xffffff" borderAlpha="0.15" height="240"
         paddingTop="10" paddingRight="10" paddingBottom="10" paddingLeft="10" horizontalAlign="center">
         
         <mx:PieChart id="chart" height="100%" width="100%" paddingRight="5" paddingLeft="5" color="0x323232"
            showDataTips="true" dataProvider="{medalsAC}" >
            
            <mx:series>
                <mx:PieSeries labelPosition="callout" field="Gold" labelFunction="displayGold">
                    <mx:calloutStroke>
                        <mx:Stroke weight="0" color="0x888888" alpha="1.0"/>
                    </mx:calloutStroke>
                    <mx:radialStroke>
                        <mx:Stroke weight="0" color="#FFFFFF" alpha="0.20"/>
                    </mx:radialStroke>
                    <mx:stroke>
                        <mx:Stroke color="0" alpha="0.20" weight="2"/>
                    </mx:stroke>
                </mx:PieSeries>
            </mx:series>
        </mx:PieChart>

    </mx:Panel>
</mx:WindowedApplication>

• dataProvider="{medalsAC}" du tableau sous mx:script
• le field en part de tarte est "Gold"
• le label ou indications externe est faite par la fonction displayGold

PlotChart

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="top"
    horizontalAlign="center" backgroundGradientColors="[0x000000,0x323232]" paddingTop="0" viewSourceURL="srcview/index.html">
    
    <mx:Script>
        <![CDATA[

        import mx.collections.ArrayCollection;

        [Bindable]
        private var expensesAC:ArrayCollection = new ArrayCollection( [
            { Month: "Jan", Profit: 2000, Expenses: 1500, Amount: 450 },
            { Month: "Feb", Profit: 1000, Expenses: 200, Amount: 600 },
            { Month: "Mar", Profit: 1500, Expenses: 500, Amount: 300 } ]);
        ]]>
    </mx:Script>
    
    <mx:Panel title="PlotChart Control" layout="horizontal" color="0xffffff" borderAlpha="0.15" width="600" height="240"
         paddingTop="10" paddingRight="10" paddingBottom="10" paddingLeft="10" horizontalAlign="center">
         
         <mx:PlotChart id="plot" height="100%" paddingLeft="5" paddingRight="5"  color="0x323232"
            showDataTips="true" dataProvider="{expensesAC}">
                
            <mx:series>
                <mx:PlotSeries xField="Expenses" yField="Profit" displayName="Expenses/Profit"/>
                <mx:PlotSeries xField="Amount" yField="Expenses" displayName="Amount/Expenses"/>
                <mx:PlotSeries xField="Profit" yField="Amount" displayName="Profit/Amount"/>
            </mx:series>
        </mx:PlotChart>

        <mx:Legend dataProvider="{plot}" color="0x323232"/>
        
    </mx:Panel>
</mx:WindowedApplication>

• dataProvider="{expensesAC}" du tableau sous mx:script
• trois rapports : Expenses/Profit en X et Y , Amount/Expenses en X et Y, Profit/Amount en X et Y