Cómo crear fácilmente gráficos utilizando jQuery y HTML5

 

Hasta ahora, el único modo de introducir un buen gráfico en un diseño web, era o bien mediante una imagen, o con flash si queríamos hacer algo dinámico. Ahora, gracias a HTML5 y por supuesto a jQuery, podemos fácilmente hacer un gráfico personalizado de una forma rápida y con un buen diseño.

Para ello, utilizamos el plugin de jQuery visualize.js

El uso es muy sencillo, nos descargamos la CSS y Javascripts necesarios y creamos un documento en HTML. Dibujamos un tabla en la que introducimos todos los datos requeridos, como podéis ver en la primera imagen, después de la tabla introducimos el código que podremos encontrar en catswhocode.com y si queremos podemos ocultar la tabla y dejar sólo el gráfico usando un display: none para la tabla.

A continuación, podéis ver 4 ejemplos de la potencia de este plugin.

Aquí tenéis el enlace para consultar todas las instrucciones y descargar el código.

 

 

Posted in: diseño