Introducción a Adobe Flex Charting 2

Revisando algunos archivos viejos en mi ordenador, encontré un fichero en excel llamado Biorritmo. Recordé que hace un par de años, lo hice para practicar gráficos de datos. Luego me dije, si lo hice en excel, ¿porque no en Flex? De esta forma nació la idea para este artículo, al principio haré una pequeña introducción sobre que es el Biorritmo, aunque lo bueno de verdad viene cuando decido llevar este ejemplo al maravilloso mundo de Flex. Al final aunque me alargue un poco, para los curiosos dejaré más información sobre el Biorritmo. Puedes ver el resultado de este artículo aquí.

¿Qué es el Biorritmo?

El Biorritmo o ritmo de la vida se refiere a tres ciclos biológicos activos en todos los seres humanos: Físico o Masculino, Emocional o Femenino, y Mental o Espiritual. Estos ciclos determinan en las personas ciertas estados favorables o desfavorables que podemos preveer, con el objetivo de planificar y orientar de manera más conveniente y eficaz nuestras actividades en todos los aspectos de la vida.

Adobe® Flex™ Charting 2

Adobe® Flex™ Charting 2, es una librería para la creación de gráficas interactivas que pueden ser incorporados en nuestras aplicaciones Flex 2. Ideal para el análisis y la visualización dinámica de datos. La renderización se realiza en el cliente, manteniendo la conexión con el modelo de datos. Además poseen gran interactividad y pueden ser extendidos y/o personalizados.

Este artículo cubrirá el tipo de gráfico LineChart, usaremos una LineSeries para cada curva del Biorritmo y para que nos quede un poco más "bonito" os mostraré como darle un toque personal al gráfico, cambiando los renders vertical y horizontal, los colores, etc.

Creando la Interfaz de Usuario

Aunque hay quienes prefieren empezar por las tripas, este artículo va de gráficos, así que definiré primero la interfaz gráfica, luego nos preocuparemos porque todo funcione de verdad.

Nuestro gráfico es LineChart id="biorritmo" como proveedor de datos tenemos un var datos:ArrayCollection que de momento está vacío. A su vez el gráfico tiene 3 curvas ó LineSeries una por cada ciclo, es decir la curva Emocional, Física y la Intelectual. Debajo de los DateChooser he puesto la Legend que asigna un color y el displayName de cada serie de datos.

Rellenando la fuente de datos

Para generar los datos de las curvas, usaremos las siguientes fórmulas:

Curva emocional = seno( 2*PI/28*(fechaNacimiento - fechaDelBiorritmo))
Curva física = seno( 2*PI/23*(fechaNacimiento - fechaDelBiorritmo))
Curva intelectual = seno( 2*PI/33*(fechaNacimiento - fechaDelBiorritmo))

Al compilar el ejemplo y ver el resultado en el navegador, veremos el Biorritmo de 28 días, iniciando el día 1 de noviembre, para una persona nacida el 20 de enero de 1980. Esto es posible gracias al método inicializar.

Dotando de interactividad y estilo personalizado

El gráfico de momento funciona, faltarían algunos detalles, como poner en el eje x las fechas en las que se aplica el Biorritmo. Además el gráfico debe de cambiar si seleccionamos otra fecha de nacimiento y otra fecha de inicio. Para no complicar mucho este ejemplo sólo mostraré como pintar el eje x con 28 días, no voy a controlar que las fechas se muestren de forma correcta. Para los que quieran profundizar, hay una clase especializada para pintar datos de fechas en los ejes llamada DateTimeAxis. También dotaremos a nuestro gráfico y componentes de un estilo personalizado y de un efecto de interpolación al cambiar los datos. Para los que conocen el mundo de Flash se sorprenderán de lo fácil que es esto en Flex.

Se ha añadido la etiqueta Style para aplicar todos los estilos de la aplicación, los paneles, los dateChooser y el tipo de letra que se empleará para las etiqueta de los ejes.

En la etiqueta Script se han agregado dos array, var diasESP:Array y mesesESP:Array que se usan para poner los textos de los DateChooser en nuestro idioma. También he agregado un conjunto de datos al ArrayCollection --> datos.addItem({ dia: diaSelec... que usaré en el eje x.

A cada DateChooser se le ha asignado la función generarDatos() en el evento change, para que cada vez qe cambien las fechas los datos se generen nuevamente.

Para tener el "eje x" y el "eje y" mejor formateados se han utilizado las etiquetas mx:horizontalAxis y mx:verticalAxis. La primera pinta los días del Biorritmo y la segunda limita el mínimo y el máximo del eje y, así como el intervalo.

A su vez, utilizamos los renders mx:horizontalAxisRenderer y mx:verticalAxisRenderer para cambiar hacer de color negro la líneas del plano cartesiano y las pequeñas rayas separadoras (tickStroke).

Con la etiqueta mx:backgroundElements se pueden definir los elementos de fondo del gráfico. Biorritmo tiene franjas horizontales amarillas que se pintan una sí una no. Con la etiqueta mx:GridLines y las propiedades horizontalChangeCount="1" direction="horizontal" consigo el efecto.

Por último a cada LineSeries se le ha modificado el color de la curva y el grosor, también se ha creado un efecto SeriesInterpolate id="pintarDatos", luego en el trigger showDataEffect="{pintarDatos}" se llama dicho efecto, consiguiendo una transición muy chula, sin casi despeinarnos.

Menos Flex y más Biorritmo

Como lo prometido es deuda, ya sé que esto no tiene nada que ver con Flex, pero para los curiosos y que así no tengan que buscar en la red, os dejo algo de información al respecto.

Curva Emocional

Este ciclo está dividido en dos ondas de catorce días cada una. Este ciclo corresponde al elemento Femenino que se encuentra activo tanto en el hombre como en la mujer pero más activo en esta última. Durante la onda positiva de este ciclo la mujer manifiesta plenamente sus elementos femeninos y el hombre los del sexo opuesto. En este ciclo rige el sistema nervioso, la actividad emocional, lo pasivo, el subconsciente, la creatividad, la inspiración, el optimismo, la cooperación , la amistad y favorece el predominio de la mente sobre la materia y es reductor de la actividad física.

Curva Físico

Este ciclo está dividido en dos ondas de once días y medio cada una. Este ciclo corresponde a la manifestación del elemento masculino y aunque existe tanto en el hombre y la mujer, está más activo en el varón. Durante la onda positiva de este ciclo, el hombre manifiesta con más fuerza sus elementos masculinos y la mujer las del sexo opuesto. En este ciclo rige la actividad física, la energía, la resistencia, el poder de recuperación del organismo y estimula el apetito sexual, el egoísmo, la cólera, el orgullo, la temeridad, rebeldía y la voluntad.

Curva Intelectual

Este ciclo está dividido en dos ondas de dieciseis días y medio cada una. Este ciclo rige la manifestación de los procesos mentales y del elemento espiritual tanto en el hombre como en la mujer. Durante la onda positiva de este ciclo exteriorizamos los elementos espirituales y mentales que poseemos, por lo tanto se manifiesta una mayor claridad mental, facilidad para aprender y retener lo aprendido y voluntad para tomar decisiones.

Los días Críticos

Estos días se dan en cualquiera de estos ciclos en el momento del cambio de positivo a negativo o viceversa. También se considera día crítico el día anterior y posterior al día del cambio. Entre los aspectos más relevantes en estos días críticos se encuentran los siguientes: Predisposición a accidentes, inestabilidad emocional, irritabilidad, errores de juicio, etc.

Aplicaciones del Biorritmo

El Biorritmo se usa con mucho éxito en países del primer mundo como Japón, Alemania, Holanda, Suecia, Suiza, etc, en donde los estudios biorrítmicos son tomados en cuenta para la programación de itinerarios y turnos de trabajo, así como para la determinación de los cronogramas en diversas actividades, como por ejemplo en los ámbitos de:

Seguridad Industrial: El biorritmo es actualmente usado por muchas plantas manufactureras, habiéndose logrado reducir significativamente los accidentes laborales y por lo tanto se ha logrado incrementar la productividad.

Transporte Público: En Japón en un estudio realizado en varias empresas de transporte urbano, se comprobó estadísticamente que la cantidad de accidentes de tránsito se había reducido en un 60 % mediante el uso del biorritmo. Así mismo en un estudio realizado por la Municipalidad de Osaka se comprobó que en 2,000 accidentes fatales, el 70 % se había producido cuando los choferes pasaban por los días críticos en sus ciclos.

Salud: Ya hay muchas clínicas, sobre todo en los países europeos que se basan en los cálculos biorrítmicos para programar las operaciones quirúrgicas de sus pacientes, no sólo evitando los días críticos, sino haciéndolo en sus días óptimos.

Deporte: Cuando entrenaba atletismo en Colombia, recuerdo que mi entrenadora planificaba nuestras competiciones para los días más positivos de la curva física. Tal vez todo esto pueda sonar un poco a cuento, pero os puedo asegurar que hay quienes dan mucha importancia a ello.

Descubridores del Biorritmo

La mayoría de autores sobre este tema, atribuyen el descubrimiento de los ciclos Físico y Emocional a un psicólogo vienés apellidado Swoboda y a un doctor Alemán de apellido Fliess y el descubrimiento del ciclo mental lo atribuyen al doctor en Ingeniería Alfred Telscher. Sin embargo el sabio griego Platón en su libro la República, hablaba de una ciudad ideal donde los padres responsables debían usar el Biorritmo para engendrar progenie superante, inteligente y afortunada, de modo que la sociedad sea justa y no se corrompa. De acuerdo a esos cálculos el padre infundiría la máxima eficiencia en los elementos que aporte como varón, lo mismo que la madre en sus elementos femeninos y ambos los mejores elementos mentales y espirituales , lo cual sería la base de la ciudad ideal que el sabio griego preconizaba.

Descargas

Proyecto Biorritmo (Adobe Flex Builder 2)

BiorritmoOK.swf (Archivo swf ejecutable)

Requisitos

Para ejecutar el ejemplo, basta con descargar BiorritmoOK.swf y podrás verlo en el navegador, si deseas crear aplicaciones con Adobe® Flex™ Charting 2, puedes utilizar la versión de prueba del Adobe Flex Builder 2, pues ya trae incluido el paquete. El ejemplo aquí expuesto no utilizan tecnología servidor con lo cual no es necesario FDS2.

En fin espero que os haya gustado, lo importante realmente no es si la teoría del Biorritmo es verdad o no, la cuestión es acercarnos a la potencia del paquete de Charting, lo personalizable que es, la variedad de gráficos que ofrece y la interactividad que dá a los usuarios y eso por no hablar de la riqueza visual que supera todo lo visto en applets de Java u otras tecnologías web.

Un saludo

Edgar Rivera.

UPDATE: Añadido yearNavigationEnabled=�true� dentro del DateChooser para facilitar la navegación por meses. Actualizados el SWF y el zip con el proyecto.