Visualize es un solución para graficar datos con Javascript y HTML5. Filament Grop es un sitio del que ya he publicado varias soluciones, en este caso es una actualización de un plugin jQuery para graficar datos.
El hecho de adaptar la solución a HTML5, es la de ofrecer una alternativa más accesible ya que esta vez utiliza una tabla HTML bien formada y en base a ésta, se crea al gráfico usando el elemento canvas y la API nativa de Javascript que permite graficar dinámicamente. Con esto se pretende que en caso que se usen lectores o navegadores que no soporten Javascript, Visualize plugin asignará dos importantes atributos:
- role=”image” – dice a los lectores de pantallas que existe contenido en un gráfico y que puede ser salteado.
- aria-label=”Chart representing data from: [table caption value]” – identifica específicamente el gráfico asociándolo con la tabla.
De esta forma, puede que por algún motivo no se vea el gráfico, pero siempre estará disponible la tabla con todos los datos.
Visualize soporta los navegadores: IE6, IE7, IE8, Firefox 2, Firefox 3.5, Safari 3 y 4 y Opera 9. Como Visualize utiliza el elemento Canvas de HTML5, para IE y Opera utiliza la biblioteca Javascript mantenida por Google, excanvas.js.
Implementar Visulize
En el sitio de Visualize existe abundante documentación (en inglés) sobre como implementarlo en nuestros sitios para graficar datos. Básicamente todo lo que se requiere es un código como el siguiente:<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<title>Charting</title>
/* Cargar archivos CSS y JS*/
<link href="css/basic.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="../_shared/EnhanceJS/enhance.js"></script>
/*Script Javascript*/
<script type="text/javascript">
// Run capabilities test
enhance({
loadScripts: [
'js/excanvas.js',
'../_shared/jquery.min.js',
'js/visualize.jQuery.js',
'js/example.js'
],
loadStyles: [
'css/visualize.css',
'css/visualize-dark.css'
]
});
</script>
</head>
<body>
/*Estructura de la tabla HTML*/
<table >
<caption>2009 Employee Sales by Department</caption>
<thead>
<tr>
<td></td>
<th scope="col">food</th>
<th scope="col">auto</th>
<th scope="col">household</th>
<th scope="col">furniture</th>
<th scope="col">kitchen</th>
<th scope="col">bath</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Mary</th>
<td>190</td>
<td>160</td>
<td>40</td>
<td>120</td>
<td>30</td>
<td>70</td>
</tr>
<tr>
<th scope="row">Tom</th>
<td>3</td>
<td>40</td>
<td>30</td>
<td>45</td>
<td>35</td>
<td>49</td>
</tr>
<tr>
<th scope="row">Brad</th>
<td>10</td>
<td>180</td>
<td>10</td>
<td>85</td>
<td>25</td>
<td>79</td>
</tr>
<tr>
<th scope="row">Kate</th>
<td>40</td>
<td>80</td>
<td>90</td>
<td>25</td>
<td>15</td>
<td>119</td>
</tr>
</tbody>
</table>
</body>
</html>
En este código sólo se enlazan los archivos CSS y JS, se agrega el Javascript que creará el gráfico y por último se crean los datos en una tabla HTML.
Conclusión
Visualize es un poderoso recurso para graficar datos, es fácil de implementar, crea gráficos con excelente apariencia y además de todo esto, es muy accesible (accesible desde el punto de vista de accesibilidad web no en cuanto a que es gratis).
Si quieres probarlo tu mismo, en el sitio de Visualize, hay un demo funcional que se puede descargar en un archivo ZIP que contiene todos los archivos necesarios y que lo puedes correr desde el navegador sin necesidad de montarlo en un servidor.
Visualize
Visitar/descargar: www.filamentgroup.com/lab/update_to_jquery_visualize_accessible_charts_with_html5_from_designing_with
Suscribirse para recibir las últimas actualizaciones de Pixelco.
