Flot – Una librería gráfica para jQuery

Es sorprendente la cantidad de alternativas para crear gráficos en un sitio web. Cuando empecé a investigar sobre el tema no esperaba encontrar tanto, pero la verdad es que hay opciones para todos los gustos:

Luego de probar Google Chart API (la unica opción de la lista que no requiere JavaScript) y gRaphael decidí quedarme con Flot, una librearía gráfica para jQuery. Gráficos atractivos, sintaxis intuitiva (es como usar cualquier otro plugin de jQuery), soporte para eventos y la posibilidad de ser extendida a través de plugins, son varias de las características que hicieron de esta librería mi elección para crear gráficos para la web.

El siguiente ejemplo muestra como crear un gráfico de líneas usando Flot. El resultado es un gráfico como el que aparece aquí.

Primero prepararemos una página HTML donde dibujar el gráfico. Debemos incluir jQuery, Flot, Navigate (un plugin para Flot) y un archivo con nuestro código JavaScript. El contenido de la página será un elemento DIV donde se va a renderizar el gráfico.

[codesyntax lang=”html4strict”]

[/codesyntax]

Ahora debemos generar los datos del gráfico en un formato apropiado para Flot. Flot acepta multiples series de datos, cada una como un objeto con atributos label y data. label es la etiqueta de la serie y data un array de parejas[x,y]:

[codesyntax lang=”javascript”]

[/codesyntax]

Usaremos la siguiente función para generar los datos que se utilizarán en el ejemplo. Los valores en el eje x serán timestamps y los valores en el eje y serán numeros enteros entre 0 y 600.

[codesyntax lang=”javascript”]

[/codesyntax]

El siguiente paso es usar Flot para convertir nuestros datos en un gráfico de lineas interactivo. Primero creamos el gráfico:

[codesyntax lang=”javascript”]

[/codesyntax]

La parte importante del fragmento de código anterior es el objeto options y la última linea, donde se crea el gráfico. Es importante notar que ninguna de las opciones definidas es obligatoria, Flot es capaz de generar el gráfico aun si se omite el parametro options. Sin embargo, para lograr el resultado que esperamos en esta ocasión se configuró el plugin como sigue:

  • series indica que se debe mostrar las lineas y los puntos de las series y que no si dibujará sombra.
  • grid habilita los eventos plothover y plotclick que se pueden escuchar en el contenedor del gráfico.
  • xaxis y yaxis permiten configurar parametros de los ejes del gráfico. en este caso se definieron los valores máximos y mínimos, dos parametros para el plugin de navegación y el parametro mode=time para indicar que los valores en el eje x son timestamps.
  • zoomRange y panRange restringen la profundidad del zoom y el area que se puede explorar del gráfico, respectivametne.
  • zoom y pan activan estas opciones del plugin de navegación.

La documentación para el API de Flot (texto en inglés) ofrece mucho mas detalle sobre estas y otras opciones de configuración. Se recomienda leerlas.

Para finalizar, utilizamos el evento plothover para mostrar un tooltip cuando el cursor pasa por alguno de los puntos del gráfico. Así:

[codesyntax lang=”javascript”]

[/codesyntax]

pos e item, parametros del callback para el evento plothover, ofrecen mas información que la descrita en el código anterior. Se recomienda usar console.log de Firebug para descubrir los secretos que esconde :P.

Así se ve el resultado final.

¿Qué librerias usan ustedes para generar gráficos en la web?

Lea acerca de otras librerías en Graphing/Charting Data on Web Pages: JavaScript Solutions y Using various javascript libraries to create pie chart.

  • oms

    es genial esta libreria grafica. muchisimas gracias.

    solo tengo una duda. estoy intentando hacer una grafica de una clasificacion, por lo que el punto mas alto corresponde al numero/dato mas bajo. He estado metiendo mano pero no consigo nada….

    hay alguna manera de que la numeracion de los ejes quede acorde a este tipo de grafico???

    1 saludo y de nuevo muchas gracias por el aporte.

    • pedro picapiedra

      Hola, yo estoy haciendo esactamente lo mismo pero con tiempos, asique me sucede los mismo que a ti, facil su solucion.

      Lo que debes de hacer es insertar numeros negativos, asi el menor valor sera el mas alto, y asi te queda tu menor valor como el mejor en la grafica 🙂

      Luego tu puedes modificar el archivo de como muestra los labels de la grafica, asique le pides que muestre el opuesto al que grafica, osea si te grafica -30, le pides que a la hora de mostrar muestre 30

      Saludos!

  • Andres623925

    aporte al blog en cuanto a Internet Explorer 8 para que te funciones necesitas de la siguiente linea de código :

    se que funciona con explorer 8 no e probado con inferiores a este, espero a alguien le sirva esta información

  • Pipo

    No veo el código. Podrás incluirlo nuevamente y aclarar un poco donde va la línea..
    gracias

  • CarlosG

    Gracias, yo tambien comence a utilizar flot