Visualizando: Estadísticas de navegadores (II)

En el anterior artículo de la serie comentaba los pasos para la obtención de los datos, la unificación de las fuentes, y finalmente el cálculo de los parámetros del gráfico.  Para dar el siguiente paso hay que modificar el código del ejemplo.  En concreto, hay que modificar sólo dos archivos:

• browser_stats.xml, es el archivo que contiene los datos.
• BrowserMarketShare.mxml, que es el que contiene el código ActionScript de Flash y MXML de Flex para modificar los datos.

La primera parte es relativamente sencilla, teniendo el archivo XML generado en la hoja de cálculo.  Sólo hay que tener en cuenta de no olvidarse de los tags ... que engloban todo el contenido.  Pasamos al segundo paso.

Modificación del código

Para adaptar los anillos hay que ir a las líneas 148-149, donde se definen las variables innerRadius y outerRadius.  Aquí se define el valor del límite interno y externo de cada anillo.

En la versión original estos radios son constantes.  Pero ahora lo que hay que hacer es utilizar los atributos innerRadius y outerRadius generados en el archivo XML.  Los valores aquí ya tienen que ser absolutos, por lo que hemos de multiplicar los radios normalizados a 1 por el radio total del gráfico. Las líneas deben contener lo siguiente:

innerRadius="{radialLayout.currentDatum.innerRadius*radialLayout.height/2}"
outerRadius="{radialLayout.currentDatum.outerRadius*radialLayout.height/2}"

Describo brevemente los parámetros de las fórmulas:

• Estamos recogiendo el valor de innerRadius (u outerRadius en la segunda) y los estamos multiplicando por la mitad de la altura de la caja donde se mostrará el gráfico.  Dado que el gráfico está centrado, dividimos la altura entre dos para conseguir el mayor radio posible. La altura total es el diámetro, por lo que su mitad es el radio.
• Luego, dado que innerRadius y outerRadius en el XML son valores entre 0 y 1 (el innerRadius del anillo más interior es 0 y el outerRadius del anillo más exterior es 1) y son contiguos, los anillos toman su máxima medida posible para la caja del gráfico (radialLayout).

Aparte de estos cambios, he comentado las líneas 178-180 (etiqueta "January 2002" que aparecía en la parte central) y las líneas 121 a 123 (la etiqueta "August 2009", que aparecía en la parte exterior). Hay que tener en cuenta que el modo de comentario es XML, no ActionScript.

Compilación

Ya sólo queda generar el archivo SWF. Para ello es necesario que descargar Flex SDK (gratuito, precisa Java), instalarlo (se descomprime en un directorio, sin más) y compilar.  Abriendo una consola y situándote en el directorio "src" del ejemplo, pues compilar (en Linux) así:

/ruta/hasta/flex/bin/mxmlc BrowserMarketShare.mxml -include-libraries ../libs/DegrafaLibrary.swc ../libs/AxiisLibrary.swc

Compilando en Windows, el programa es mxmlc.exe, y las rutas a los directorios se indican con contrabarra (\).

Aparecerán algunos avisos pero todo funciona correctamente.  La última línea del proceso será algo así como:

/home/_usuario_/..../axiis examples/src/BrowserMarketShare.swf (568757 bytes)

Puedes abrir el archivo SWF en tu navegador y verás algo parecido a la siguiente imagen:



¿Todo bien? ¿Algo no ha funcionado? Si dejas algún comentario quizá lo aclaremos.  Clicando con el botón derecho en la versión de pantalla completa puedes ver el código del archivo MXML.

Queda un último apartado para comentar los resultados del gráfico, compararlo con el original, analizar qué podemos extraer de él, y valorar las ventajas e inconvenientes por los criterios que he seguido.