Durante este tiempo, he estado desarrollando un script que muestra gráficos de barra. Si bien es cierto que ya existen sistemas similares, éste está orientado hacia la accesibilidad. Me inspiré en la entrada CSS For Bar Graphs. Sin embargo, una importante mejora es el añadido en flexibilidad que viene de implementarlo en ECMAScript. Aún con estos cambios, prevalece la intención primera: que el gráfico sea legible en HTML plano, y por este motivo resulta apropiado para un diseño accesible. Funciona creando primero el árbol DOM del gráfico, y luego aplicando los estilos pertinentes. El resultado son gráficos de barra como los de abajo:

Chart snapshot

El script está disponible en la dirección http://0xj.info/js/graphs.js. Utilizarlo es bastante sencillo.

Lo primero está en crear una instancia del objeto.

var x=_FMchart();

Luego hay que especificar una capa. Puede ser una cadena, o un nodo directamennte.

x.setLayer("IDCapa");
x.setLayer(document.getElementById("stats2"));

Ya se está en condiciones de dar los datos del gráfico.


x.draw(
{title:"Cases of Wereza vs. cases of Routment",
categories: ["Wereza", ["Routment","cc0"]],
proportional:true,
multidimentional:true,
data:{"1999":[10,30],"2000":[15,32],"2001":[30,40],"2002":[50,50],"2003":[150,50]}
});

title
título (descipción)
categories
arreglo con las categorías a las que pertenecen los datos. En el ejemplo, para Wareza estamos usando los colores por defecto y para Routment, el color en hexadecimal #cc0.
proportional
si se define a true, reemplaza los valores absolutos por valores relativos (por ejemplo, 4 en una muestra de 10 se representa como 40%.)
multidimentional
si se define a true establece que la longitud de las barras debe ser propocional entre sí. Si se observa la imagen adjunta, se observa que la última barra del último gráfico es más larga que las demás, porque la muestra era mayor en ese caso; si no se hubiese definido, o su valor hubiera sido false, todas las barras tendrían exactamente la misma longitud.
data
los datos propiamente dichos. Las etiquetas (“1999″, “2000″, etcétera) son necesarias para contrastar datos de distintas muestras.

Para que quede más claro, mostraré el ejemplo del código usado en el primer gráfico.

x.draw(
{title:"Windows RAM requirements across its different versions",
categories: ["Windows 95","Windows 98","Windows ME","Windows 2000","Windows XP","Windows Vista"],
dimensions:{w:"600px"},
data:[8,16,32,32,64,512]
});

Como aquí hay un dato por categoría y se están comparando las categorías entre sí, no es necesario indicar las etiquetas para data.

Otra particularidad que se introduce es el objeto dimensions. En realidad, indica el tamaño del gráfico. Tiene dos miembros: w (para el ancho) y h (para la altura.)

Me parece importante destacar que ha sido probado en los siguientes navegadores:

  • MSIE 5.5, 6, 7 y 8 (para Windows)
  • Netscape 7 y 9
  • Arora 0.7.1
  • Mozilla Firefox 0.8, 1.0.8, 1.5.0.12, 2.0.0.20, 3.0 y 3.5
  • Konqueror 3.5 y 4.2
  • Galeon 2.0.6
  • Opera 9.26, 9.63, 9.64 y 10
  • Kazehakase 0.5.4
  • Epiphany 2.22 y 2.26.3
  • K-Meleon 1.1.4
  • Flock 2.0.3
  • Safari 3.2.1 y 4.0
  • Avant 11.7

La ausencia de un navegador de la lista no implica que no funcione correctamente el script. No obstante, según las pruebas que se realizaron se puede afirmar que no lo hace en los navegadores (de nuevo, la lista no es exclusiva):

  • MSIE para Windows 5 y versiones anteriores
  • Chrome 2 (los gráficos con más de un dato por barra de la prueba se vieron desordenados (las etiquetas no aparecen en el orden en que se proporcionaron))
  • Netscape 6 (los gráficos con más de un dato por barra no se ven bien (se ve sólo el primer valor, y además los marcadores aparecen mal posicionados))
  • Netscape 4 y versiones anteriores

Continúe leyendo sobre los gráficos de torta.

No Comments »