Dibujar gráficos con HTML5 y jQuery
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.
Tenéis el enlace para consultar todas las instrucciones y descargar el código, al final de este post.
Datos de la tabla
Ejemplo 1
Ejemplo 2
Ejemplo 3
Ejemplo 4
