• Publicidad
  • Contacto
Tech News, Magazine & Review WordPress Theme 2017
  • Noticias
  • Video
  • Tecnología
    • Audio & Video
    • LifeStyle
    • Transformación Digital
  • Ciencia
    • Ciencia Ficción
  • Fotografía
  • Internet
    • Desarrollo/programación
    • Diseño
Sin resultados
Ver todos los resultados
  • Noticias
  • Video
  • Tecnología
    • Audio & Video
    • LifeStyle
    • Transformación Digital
  • Ciencia
    • Ciencia Ficción
  • Fotografía
  • Internet
    • Desarrollo/programación
    • Diseño
Sin resultados
Ver todos los resultados
Pixelco Tech
Sin resultados
Ver todos los resultados

Flotr2 – Biblioteca HTML5 para crear gráficos de todo tipo

Diego Cambiaso por Diego Cambiaso
07/02/2012
Compartir en FacebookCompartir en TwitterCompartir en WhatsappCompartir en TumblrCompartir en Telegram

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

Tags: HTMLJavascriptSoftware libre
Diego Cambiaso

Diego Cambiaso

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

Siguiente

Cómo publicar el contenido del blog en las redes sociales

Tech

Diego Cambiaso

VideosReviews - Tutoriales
4+2 Herramientas profesionales de inteligencia artificial para la generación de imágenes

4+2 Herramientas profesionales de inteligencia artificial para la generación de imágenes

Diego Cambiaso
26/05/2023
Lenovo ThinkPhone conoce todos los detalles, características y conectividad

Lenovo ThinkPhone conoce todos los detalles, características y conectividad

Diego Cambiaso
15/05/2023
SMARTFILMS 2023 participa de la novena edición de este festival de cine realizado con smartphones

SMARTFILMS 2023 participa de la novena edición de este festival de cine realizado con smartphones

Diego Cambiaso
13/04/2023
Motorola celebra el 50º aniversario de la primera llamada comercial desde un teléfono móvil

Motorola celebra el 50º aniversario de la primera llamada comercial desde un teléfono móvil

Diego Cambiaso
03/04/2023
La pantalla externa del motorola razr 40 ultra es la más grande y avanzada

La pantalla externa del motorola razr 40 ultra es la más grande y avanzada

02/06/2023
4+2 Herramientas profesionales de inteligencia artificial para la generación de imágenes

4+2 Herramientas profesionales de inteligencia artificial para la generación de imágenes

26/05/2023
Se abren registros de Solve For Tomorrow 2023, el programa que incentiva a los jóvenes a proponer ideas para mejorar su comunidad

Se abren registros de Solve For Tomorrow 2023, el programa que incentiva a los jóvenes a proponer ideas para mejorar su comunidad

25/05/2023
Pixelco - Pride Month

Pixelco Tech

Pixelco es sitio de noticias de tecnología, diseño y desarrollo web e Internet escrito por profesionales.

Objetivo de Pixelco

Informar, promocionar, proporcionar recursos y ayuda sobre el diseño y desarrollo web, estándares, Internet y tecnología.

Buscar

Sin resultados
Ver todos los resultados
  • Contacto
  • Publicidad
  • Sobre Pixelco
  • Política de Privacidad

© 2023 Pixelco por Diego Cambiaso.

Sin resultados
Ver todos los resultados
  • Publicidad
  • Contacto
  • Política de Privacidad
  • Sobre Pixelco
  • Internet
    • Recursos
    • Diseño
    • Desarrollo/programación
  • Tecnología
  • Noticias
  • Fotografía

© 2023 Pixelco por Diego Cambiaso.

Welcome Back!

Login to your account below

Forgotten Password?

Retrieve your password

Please enter your username or email address to reset your password.

Log In

Add New Playlist