Recoger datos desde una base de datos XML y adaptarlos a gráficos estadísticos Chart Flex de una forma profesional y de aspecto amigable ya no es problema. Gracias a los componentes DataVisualization del que disponemos en Flex, esta taréa resulta muy fácil de implementar y ofrece una gran variedad de uso para aplicaciones complejas, ya que podemos crear componentes propios partiendo de la base de estos componentes gráficos, pero a su vez dandoles un toque personal y adaptado a las circunstancias que se nos presenten.

Para ir familiariazandonos con estas librerias, he desarrollado un ejemplo muy básico pero a la vez aclarativo de como se implementan dos de estos componentes estadísticos. Entrando en detalle, se tratan de los componentes ‘ColumnChart’ y ‘PieChart’ a mi parecer dos de los más importantes tipos de gráficas de las cuales nos pueden hacer falta en el desarrollo de aplicaciones RIA Flex y las cuales son muy significativas a la hora de explicar en pocas palabras los resultados obtenidos.

La aplicación consta de dos ficheros, el primero que encontramos es el fichero contenedor de los datos en formato XML, el cual será llamado desde la aplicación para ser dibujado gráficamente mediante los componentes de DataVisualization.

datos.xml

<?xml version="1.0" encoding="utf-8"?>
<chart>  
     <equipo>  
         <name>Equipo Azul</name>  
         <tiempo>17</tiempo>  
     </equipo>
     <equipo>  
         <name>Equipo Rojo</name>  
         <tiempo>24</tiempo>  
     </equipo>
     <equipo>  
         <name>Equipo Verde</name>  
         <tiempo>6</tiempo>  
     </equipo>
     <equipo>  
        <name>Equipo Negro</name>  
        <tiempo>10</tiempo>  
    </equipo>  
</chart>

Y por otro lado encontramos el fichero Chart_view.mxml, el cual define a nivel de componente la aplicación en sí, y en él podemos encontrar los dos componentes gráficos que han sido implementados.

Chart_view.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="435" height="348" 
	backgroundGradientAlphas="[1.0, 1.0]" backgroundGradientColors="[#FFFFFF, #FFFFFF]"
	creationComplete="datos.send()">
 
	<mx:HTTPService url="datos.xml" id="datos" result="handlerResult(event)" resultFormat="e4x" />
 
	<mx:Script>
		<![CDATA[
			import mx.rpc.events.ResultEvent;
 
		 	[Bindable]private var info:XMLList;  
 
	        private function handlerResult(evt:ResultEvent):void{  
 
	             info = evt.result.equipo;  
 
	         }  
 
		]]>
	</mx:Script>
 
	 <mx:ColumnChart dataProvider="{info}" id="testChart" showDataTips="true" width="381" height="177" x="27" y="29">  
        <mx:horizontalAxis>  
             <mx:CategoryAxis dataProvider="{info}" categoryField="name"/>  
        </mx:horizontalAxis>  
        <mx:series>  
             <mx:ColumnSeries xField="name" yField="tiempo" displayName="Puntuacion"/>  
        </mx:series>  
      </mx:ColumnChart>  
	 <mx:Label x="128.5" y="8" text="Datos estadísticos automáticos" fontWeight="bold" color="#000000"/>
	 <mx:Canvas x="18.5" y="214" width="398" height="124" borderStyle="solid" borderColor="#757575">
	 	 <mx:PieChart x="20.35" y="0" id="piechart1" showDataTips="true" dataProvider="{info}" width="148.17627" height="122">
	 	 	 <mx:series>
	 	 	 	 <mx:PieSeries displayName="Series 1" field="tiempo" nameField="name" labelField="name"/>
	 	 	 </mx:series>
	 	 </mx:PieChart>
	 	 <mx:Legend dataProvider="{piechart1}" x="231" y="5"/>
	 </mx:Canvas>
 
</mx:Application>

A continuación se puede ver el resultado de la compilación, el cual muestra la información depositada en el fichero XML de una forma profesional y con un aspecto atractivo y amigable al usuario, como bien anotábamos en los primeros párrafos.

Hay que destacar que los componentes DataVisualization, ofrecen una magnitud enorme de posibilidades de configurar sus parámetros, de tal modo que, por ejemplo podemos determinar los vertices de la gráfica con imágenes personalizadas o valores propios de los datos obtenidos, es decir, ofrece un amplio abanico de posibilidades de personalización que espero poder ofreceros en los siguientes post.

Para terminar, agraceros el tiempo depositado en el blog y espero que os haya servido esta breve explicación. Un saludo.