Flex: Ejemplo de uso de BarChart y HSlider

Un ejemplo sencillo de como usar BarChart y HSlider. Se trata de una versión un poco más elaborada del ejemplo propuesto por mi amigo BlackDragon en la generación de gráficos estadísticos.



Funcionamiento: cada HSlider está 'enlazado' a cada una de las 3 barras del BarChart. Al mover cualquier HSlider se invoca la función 'myupdate()' a través del evento 'change'. Este enlace del que hablo solo es una reconstrucción del array 'mydata' a través de la función myupdate(), es decir, nada especial. El BarChart si está vinculado a una variable que le suministra los datos, mydata. Ahí les va, para testear en sus pcs. Bye ;).

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()">
<mx:Script>
<![CDATA[
 // para poder trabajar con el proveedor de
       import mx.collections.ArrayCollection;
 // hacer vinculable mydata
       [Bindable]
       private var mydata:ArrayCollection;
 // con esta función inicializa el array de datos mydata
 // observa la asignación de los 3 valores
 private function init():void {
  mydata = new ArrayCollection([{Axis: "Slider3", val: 8}, {Axis: "Slider2", val: 8},
  {Axis: "Slider1", val: 8}]);
  myslider_1.value = 8;
  myslider_2.value = 8;
  myslider_3.value = 8;
 }
 // esta función sólo se ejecuta al detectarse el evento change en los hsliders
 private function myupdate():void {
  // limpio mydata
  mydata.removeAll();
  // asigno los valores de las 3 barras, uso el primer elemento Axis
  // para el eje vertical
  mydata.addItem({Axis: "Slider3", val: myslider_3.value});
  mydata.addItem({Axis: "Slider2", val: myslider_2.value});
  mydata.addItem({Axis: "Slider1", val: myslider_1.value});
 }
]]>
</mx:Script>

<mx:Panel y="10" width="520" height="380" layout="absolute" title="My Cool Charts XD" horizontalCenter="0">
 <mx:BarChart x="50" y="10" id="mybarchart" height="246" dataProvider="{mydata}" showDataTips="true">
  <!-- En este caso usamos 'Axis' (primer elemento de cada objeto mydata, observa arriba) -->
  <mx:verticalAxis>
   <mx:CategoryAxis categoryField="Axis"/>
  </mx:verticalAxis>
  <!-- Con una sola 'serie' podemos generar el gráfico -->
  <mx:series>
   <mx:BarSeries displayName="Cantidad" xField="val"/>
  </mx:series>
 </mx:BarChart>
 <mx:Legend dataProvider="{mybarchart}" x="347" y="259"/>
 <!-- observa como llamar a myupdate() al detectar que 'movimos' un hslider =D -->
 <mx:HSlider x="160" y="266" id="myslider_1" change="myupdate()"/>
 <mx:HSlider x="160" y="286" id="myslider_2" change="myupdate()"/>
 <mx:HSlider x="160" y="306" id="myslider_3" change="myupdate()"/>
 <mx:Label x="107" y="264" text="Slider1"/>
 <mx:Label x="107" y="283" text="Slider2"/>
 <mx:Label x="107" y="302" text="Slider3"/>
</mx:Panel>
</mx:Application>