Flotr2 biblioteca HTML5

Flotr2 es un biblioteca (o framework) para dibujar y crear gráficos estadísticos con HTML5. Se trata de un desarrollo open source que se basa en el proyecto Flotr pero sin hacer uso de Prototype y con muchas mejoras, entre ellas el uso de canvas de HTML5.

Principales características de Flotr2:

  • Soporta dispositivos móviles.
  • Es independiente de cualquier framework.
  • Gráficos estadísticos personalizables como: lineales, barras, torta y burbuja entre algunos otros.
  • Soporta Firefox, Chrome, IE6, Android y iOS.

Modo de uso

En general es muy sencillo crear cualquier gráfica. Para desarrollar utilizando esta librería se requiere conocimiento en Javascript.

El siguiente código de ejemplo, es toda la implementación completa (HTML, Javascript, CSS..) para mostrar la gráfica del seno animada que se puede ver en la página del proyecto:

<head>
<style type="text/css">
body {
margin: 0px;
padding: 0px;
}
#container {
width : 600px;
height: 384px;
margin: 8px auto;
}
</style>
</head>
<body>
<div id="container">
<!--[if lt IE 9]>
<script type="text/javascript" src="/static/lib/FlashCanvas/bin/flashcanvas.js"></script>
<![endif]-->
<script type="text/javascript" src="/static/lib/flotr2/flotr2.min.js"></script>
<script type="text/javascript">
(function () {
var
container = document.getElementById('container'),
start = (new Date).getTime(),
data, graph, offset, i;
// Draw a sine curve at time t
function animate (t) {
data = [];
offset = 2 * Math.PI * (t - start) / 10000;
// Sample the sine function
for (i = 0; i < 4 * Math.PI; i += 0.2) {
data.push([i, Math.sin(i - offset)]);
}
// Draw Graph
graph = Flotr.draw(container, [ data ], {
yaxis : {
max : 2,
min : -2
}
});
// Animate
setTimeout(function () {
animate((new Date).getTime());
}, 50);
}
animate(start);
})();
</script>
</body>
</html>

Flotr2

Website | www.humblesoftware.com/flotr2/documentation

Vía | www.webresourcesdepot.com

Por Diego Cambiaso

Comunicador Social, Desarrollador de Software y UX Designer. Blogger desde el 2006, creador de Pixelco Tech. Viajero y fotógrafo. Entusiasta del diseño, apasionado por la tecnología y el social media. EN-ES-IT