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>