<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
    creationComplete="init()" viewSourceURL="srcview/index.html">
    
    <mx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            
            [Bindable]
            private var dataProvider : ArrayCollection = new ArrayCollection([
                                                            {label:"Caracas", tren1: 5, tren2: 0, tren3: 0},
                                                            {label:"Los Teques", tren1: 0, tren2: 7, tren3: 0},
                                                            {label:"Maracaibo", tren1: 0, tren2: 0, tren3: 3}]);
            
            // Clases de imagenes que seran la base de los itemrenderers a utilizar 
            [Embed( source="asset/tren1.png" )]
            private var claseTren1 : Class;
            
            [Embed( source="asset/tren2.png" )]
            private var claseTren2 : Class;
            
            [Embed( source="asset/tren3.png" )]
            private var claseTren3 : Class;
            
            // Se hace un ClassFactory a cada una de las clases de imagenes.
            // Dado que ClassFactory hereda de IFactory, estos objetos podran ser asignados
            // como itemrenderers o itemeditors.
            [Bindable]
            private var tren1Factory : ClassFactory = new ClassFactory( claseTren1 );
            
            [Bindable]
            private var tren2Factory : ClassFactory = new ClassFactory( claseTren2 );
            
            [Bindable]
            private var tren3Factory : ClassFactory = new ClassFactory( claseTren3 );
            
            // timer auxiliar para cambiar los valores del dataprovider periodicamente
            private var timer : Timer;
            
            private function init():void
            {
                // configuracion e inicio del timer auxiliar para cambiar el dataprovider
                // cada 4 segs
                timer = new Timer( 4000 );
                timer.addEventListener( TimerEvent.TIMER, updateDataProvider );
                timer.start();
            }
            
            // metodo auxiliar para cambiar los datos del dataprovider exclusivamente
            private function updateDataProvider( event : TimerEvent ):void
            {
                var objeto : Object = dataProvider.getItemAt( 0 );
                objeto.tren1 = Math.round( 20 * Math.random() );
                dataProvider.removeItemAt( 0 );
                dataProvider.addItemAt( objeto, 0 );
                
                objeto = dataProvider.getItemAt( 1 );
                objeto["tren2"] = Math.round( 20 * Math.random() );
                dataProvider.removeItemAt( 1 );
                dataProvider.addItemAt( objeto, 1 );
                
                objeto = dataProvider.getItemAt( 2 );
                objeto["tren3"] = Math.round( 20 * Math.random() );
                dataProvider.removeItemAt( 2 );
                dataProvider.addItemAt( objeto, 2 );
                
                barChart.invalidateDisplayList();
            }
        ]]>
    </mx:Script>
    <!-- efecto de graficas para suavizar la transicion de los barseries al cambio de dataprovider -->
    <mx:SeriesInterpolate
        id="efectoSeries"
        duration="800"/>
    <mx:BarChart
        id="barChart"
        width="100%" height="100%"
        showDataTips="true">
        <mx:series>
            <!-- se le asigna un dataprovider tipo ClassFactory a cada barseries -->
            <mx:BarSeries
                dataProvider="{dataProvider}"
                xField="tren1" yField="label"
                displayName="Caracas"
                itemRenderer="{tren2Factory}"
                creationCompleteEffect="{efectoSeries}"
                showDataEffect="{efectoSeries}"/>
            <mx:BarSeries
                dataProvider="{dataProvider}"
                xField="tren2" yField="label"
                displayName="Los Teques"
                itemRenderer="{tren1Factory}"
                creationCompleteEffect="{efectoSeries}"
                showDataEffect="{efectoSeries}"/>
            <mx:BarSeries
                dataProvider="{dataProvider}"
                xField="tren3" yField="label"
                displayName="Maracaibo"
                itemRenderer="{tren3Factory}"
                creationCompleteEffect="{efectoSeries}"
                showDataEffect="{efectoSeries}"/>
        </mx:series>
        <mx:verticalAxis>
            <mx:CategoryAxis
                dataProvider="{dataProvider}"
                categoryField="label"/>
        </mx:verticalAxis>
        <mx:horizontalAxis>
            <mx:LinearAxis
                />
        </mx:horizontalAxis>
    </mx:BarChart>
</mx:Application>


























<!-- El presente ejemplo fue realizado con fines ilustrativos y educacionales para ria212.com 
    por Juan Manrique (DonKenshin). http://groups.google.com/group/flex-air-ve 
                                          RIA212.com 24-mayo-2010 -->