miércoles, 28 de enero de 2015

Gráfico de Cajas con HTML5 (Canvas) y en Excel (Box & Whisker Plot)

Es interesante ver como programas actuales como el Excel no permiten elaborar en forma simple un gráfico de cajas (Box &Whisker Plot) y si bien aún con dificultad es posible graficarlo, se complica más la cosa si se pretende hacer en otra herramienta que no lo tenga dentro de su librería gráfica.


Dado el reto me propuse hacerlo con HTML5, del cual se muy poco o nada y logré hacer una página web, que reciba los 5 parámetros de cada gráfico que se quiere mostrar y que al final lo presente en pantalla.

Comparto mi descubrimiento tanto en Excel donde al final no me salió tan elegante, como en HTML5 donde si se puede ver algo mejor. Al final el resultado fue crear una función, cuyo parámetro sería el único punto a cambiar si se desea copiar el código en una aplicación que pueda generar y mostrar código HTML.


Una vez cargada la página, pueden ver el código fuente y revisar cómo se programó la misma para obtener ese resultado. Se pueden graficar una o más cajas, solo hay que ingresar los cinco puntos (bigotes, cuartiles 1 y 3 así como la mediana) de cada caja deseada separado de comas, ej. para tres cajas: 12,20,35,41,44,18,33,55,69,78, 12,44, 56, 70, 95. El programita calcula el número de cajas de acuerdo a cuantos puntos se ingresen, tampoco importa el orden en que se brindaron los datos de cada caja pues el primer paso que realiza es el de ordenar los datos.

La gráfica poder ser visible en cualquier navegador que soporte HTML5 (Chrome, Internet Explorer), no requiere Java.

Para descargar los documentos: