Problema con Graficos estadisticos en flex

Hola, tengo un problema con un grafico que tengo que hacer con flex 3. El problema es, que me gustaria poder seleccionar simplemente un dato del array para que se muestre como una columna y no me muestre todos los datos del array a la vez, pero esto deve de variar segun el checkbox seleccionado por el usuario.
Hasta el momento e conseguido que me muestre todos los datos que tiene el array, os pongo el codigo que tengo ahora mismo:

Código Flex :

<?xml version="1.0" encoding="utf-8"?>
<mx:Application 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}"><!-- con esta funcion me peta -->
                
            <mx:horizontalAxis>
                <mx:CategoryAxis categoryField="Country"/>
            </mx:horizontalAxis>
                
            <mx:series>
                <mx:ColumnSeries xField="Country" yField="Gold" displayName="Gold"/> <!--imagino que con esta tmb me petaria -->
                <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:Application>

Hasta la fecha este es todo el codigo que tengo (por si a alguien le puede servir de ejemplo), pero me gustaria hacerle un panel al lado con la finalidad de poder seleccionar uno de los datos os pongo una pagina paraque veais un ejemplo, solo que en esta pagina estan utilizando Olap

pagina de ejemplo

Un saludo y gracias.

Hola

Si no entiendo mal, lo que queres hacer es tener un listado de radios con los diferentes paises y cuando seleccionas uno, que el grafico te muestre los datos para ese pais unicamente.

Si es eso, aca te dejo el codigo con el que vas a poder hacer eso mismo (basado en tu mismo codigo).

Código ActionScript :

<?xml version="1.0" encoding="utf-8"?> 
<mx:Application 
   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; 
 
        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 } ]); 
        
        [Bindable]
        private var modelToUse:ArrayCollection = new ArrayCollection([]);
        
        private function onRadioChange():void
        {
           var indice:Number = radios.selectedValue as Number;
           modelToUse.source = [this.medalsAC.getItemAt(indice)];
        }
]]>
 
    </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="{modelToUse}"><!-- con esta funcion me peta --> 
                 
            <mx:horizontalAxis> 
                <mx:CategoryAxis categoryField="Country"/> 
            </mx:horizontalAxis> 
                 
            <mx:series> 
                <mx:ColumnSeries xField="Country" yField="Gold" displayName="Gold"/> <!--imagino que con esta tmb me petaria --> 
                <mx:ColumnSeries xField="Country" yField="Silver" displayName="Silver"/> 
                <mx:ColumnSeries xField="Country" yField="Bronze" displayName="Bronze"/> 
            </mx:series> 
        </mx:ColumnChart> 
       
       <mx:VBox>
          <mx:RadioButtonGroup id="radios" change="onRadioChange();" />
          <mx:RadioButton label="USA" value="0" group="{this.radios}" />
          <mx:RadioButton label="China" value="1" group="{this.radios}"/>
          <mx:RadioButton label="Russia" value="2" group="{this.radios}"/>
          <mx:Legend dataProvider="{column}" color="0x323232"/>
       </mx:VBox>
         
    </mx:Panel> 
</mx:Application>

Espero q te sirva, cualquier cosa chifla.

Saludos!

Muchas gracias tu ejemplo con lo radioButton, me a ido muy bien ver por donde iban los tiros. Pero es y no es exactamente como lo decía. Me explico ahora mismo tengo adaptado el proyecto para que me haga un ejemplo parecido al tuyo, pero lo que tengo que mirar como seleccionar una sola columna.

Dejo el código por si alguien necesita algo similar.

Código Flex :

<?xml version="1.0" encoding="utf-8"?>  
<mx:Application 
    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.events.CollectionEvent;
          import mx.collections.ArrayCollection;   
                
       private var todos:ArrayCollection= new ArrayCollection([]);
       private var usa:Object = { Country: "USA", Gold: 35, Silver:39, Bronze: 29 };
       private var china:Object= { Country: "China", Gold: 32, Silver:17, Bronze: 14 };
       private var russia:Object= { Country: "Russia", Gold: 27, Silver:27, Bronze: 38 };

         private function checkUSA():void{
            if(chb_usa.selected==true){
               todos.addItem(usa);
            }else{
               todos.removeItemAt(todos.getItemIndex(usa));
            }onRadioChange();
         }
         
         private function checkChina():void{
            if(chb_china.selected==true){
               todos.addItem(china);
            }else{
               todos.removeItemAt(todos.getItemIndex(china));
            }onRadioChange();
         }
         
         private function checkRussia():void{
            if(chb_russia.selected==true){
               todos.addItem(russia);
            }else{
               todos.removeItemAt(todos.getItemIndex(russia));
            }onRadioChange();
         }
         
         private function onRadioChange():void 
          {
                   column.dataProvider = todos;
          } ]]>  
   </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">               
      <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:VBox> 
        <mx:CheckBox id="chb_usa" label="USA" change="checkUSA()"/>
        <mx:CheckBox id="chb_china" label="China" change="checkChina()"/>
        <mx:CheckBox id="chb_russia" label="Russia" change="checkRussia()"/>    
         
         <mx:Legend dataProvider="{column}" color="0x323232"/>        
       </mx:VBox>               
</mx:Panel>
</mx:Application>

Un saludo y muchas gracias de verdad, a sido un buen ejemplo.

Hola

Creo q ahi entiendo... vos queres seleccionar ademas del pais, la serie q deberia mostrarse... bueno la cosa seria asi (tomando como base tu ultimo ejemplo)

Código ActionScript :

<?xml version="1.0" encoding="utf-8"?>   
<mx:Application  
    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.charts.series.ColumnSeries;  
         import mx.events.CollectionEvent; 
          import mx.collections.ArrayCollection;    
                 
       private var todos:ArrayCollection= new ArrayCollection([]); 
       private var usa:Object = { Country: "USA", Gold: 35, Silver:39, Bronze: 29 }; 
       private var china:Object= { Country: "China", Gold: 32, Silver:17, Bronze: 14 }; 
       private var russia:Object= { Country: "Russia", Gold: 27, Silver:27, Bronze: 38 };
       [Bindable]
       private var series:Array =    [{displayName:"Gold", key:"Gold"}, 
                                {displayName:"Silver", key:"Silver"},
                                {displayName:"Bronze", key:"Bronze"}];
          
       [Bindable]
       private var seriesView:Array = [];
       
         private function checkUSA():void{ 
            if(chb_usa.selected==true){ 
               todos.addItem(usa); 
            }else{ 
               todos.removeItemAt(todos.getItemIndex(usa)); 
            }onRadioChange(); 
         } 
          
         private function checkChina():void{ 
            if(chb_china.selected==true){ 
               todos.addItem(china); 
            }else{ 
               todos.removeItemAt(todos.getItemIndex(china)); 
            }onRadioChange(); 
         } 
          
         private function checkRussia():void{ 
            if(chb_russia.selected==true){ 
               todos.addItem(russia); 
            }else{ 
               todos.removeItemAt(todos.getItemIndex(russia)); 
            }onRadioChange(); 
         } 
          
         private function onRadioChange():void  
          { 
                   column.dataProvider = todos; 
          }  
          private function addSerie(event:*):void
          {
             var a:int = 0;
             var obj:Object = event.currentTarget.getRepeaterItem();
             if ( event.currentTarget.selected )
             {
                addSerieToArray(obj.key, obj.displayName);
             }
             else
             {
                remSerieToArray(obj.key);
             }
          }
          private function addSerieToArray(key:String, name:String):void
          {
             var s:ColumnSeries = new ColumnSeries();
             s.xField = "Country";
             s.yField = key;
             s.displayName = name;
             this.seriesView.push(s);
             column.series = this.seriesView;
          }
          private function remSerieToArray(key:String):void
          {
             var c:ColumnSeries;
             var elem:*;
             for ( elem in this.seriesView )
             {
                c = this.seriesView[elem]
                if ( c.yField == key )
                {
                   this.seriesView = this.seriesView.slice(0, elem).concat(this.seriesView.slice(elem+1));
                   break;
                }
             }
             this.column.series = this.seriesView;
          }
]]>
   
   </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" series="{seriesView}">                
      <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:VBox>  
        <mx:HBox>
           <mx:VBox>
              <mx:Label text="Select Country" />
              <mx:CheckBox id="chb_usa" label="USA" change="checkUSA()" color="0x000000"/> 
              <mx:CheckBox id="chb_china" label="China" change="checkChina()" color="0x000000"/> 
              <mx:CheckBox id="chb_russia" label="Russia" change="checkRussia()" color="0x000000"/>  
           </mx:VBox>
           <mx:VBox>
              <mx:Label text="Select Series" />
            <mx:Repeater id="rp" dataProvider="{series}">
                   <mx:CheckBox  color="0x000000" 
                       label="{rp.currentItem.displayName}"
                       click="addSerie(event)"/>
               </mx:Repeater>    
           </mx:VBox>
        </mx:HBox>
         <mx:Legend dataProvider="{column}" color="0x323232"/>         
       </mx:VBox>                
</mx:Panel> 
</mx:Application>

Espero q te sirva, sino avisa


Saludos!

Hola, gracias por tu ayuda esa algo del estilo al ultimo ejemplo que me expones como lo quería hacer.

Un Saludo.