Siguenos también en

Nuestro RSS Nuestro Twitter Proximamente Facebook

Inicio de Sesión

subscribete a nuestro RSS Feed

Jueves 11 de marzo de 2010

Analisis: 5 plugins para generar graficos usando jQuery

Escrito por Jorge Bravo el Enero 25, 2010

graficas

No me había tocado trabajar con grandes cantidades de gráficas generadas de manera dinámica en una web, pero en un proyecto relacionado con un backend para una aplicación on-line salto la idea de poder obtener ciertos datos estadísticos de manera dinámica y vistos en forma de gráficas.

Y pensando en la manera de hacer esto de una forma mas menos organizada y tratando de usar solo un paquete, en un momento pense en varias opciones como php y gd está jpGraph, html como las de Google, o varias en Flash y otras tantas en Javascript. Pero al final me decidí a buscar un plugin para jQuery que es la librería que ocupamos en el proyecto en cuestión.

Algunas razones, utiliza pocos recursos y se generan en el cliente liberando recursos del servidor, en momentos de máximos de trabajo.

Tuve una grata sorpresa al ver que hay una gran cantidad de plugins para esta tarea tan especifica y ademas de muy buena calidad.

1.- El primero de la lista es Flot

flot

Flot desarrollado por Ole Laursen, es una libreria Javascript para gráficos de lineas usando jQuery. Esta permite crear gráficas del lado del cliente con funciones como el seno, coseno, etc.

Es potente, fácil de implementar y la estética, al igual que en otros productos para jQuery, es muy buena. Le falta soportar gráficos de torta, pero podemos utilizar la modificación de Flot que se encuentra aquí.

Ejemplos: demos
Descargar: jquery.flot-0.1.pack.js

2.- jQuery Visualize – Para crear gráficos accesibles

fchart

jQuery Visualize permite crear gráficas accesibles desde una tabla de datos estándar haciendo uso de canvas. Se pueden crear varios tipos de gráficas como: torta (pie), lineal, área y de barras.

En su sitio podemos encontrar ejemplos muy bien explicados (en ingles). Muy funcional, práctico y sencillo de implementar, jQuery Visualize, una excelente opción.

Sitio: Filament Group

3.- HighCharts – Completo sistema de gráficas

hishart

HighCharts, uno de los mas completos sitesmas de graficas, este magnifico plugin para jquery incorpora los más conocidos formatos para mostrar graficas y con una presentación impecable. Animaciones y colores realmente agradables, todo esto con muy bajo consumo.

Sitio: HighCharts
Ejemplos: www.highcharts.com/demo/

4.- Sparklines – Gráficas inline con jQuery

spriaklines

Sparklines es un plugin de jQuery que facilita la creación de gráficos inline. Los datos pueden ser pasados por parámetro o sino a través de funciones JavaScript.

Dispone de una buena cantidad de tipos de gráficos y en su sitio a pesar de estar en Ingles esta muy bien documentado.

Sitio: Sparklines
Descarga: jQuery Sparklines

5.- jqPlot – Gráficos Profesionales con jQuery

jqPlot

jqPlot tambien usa la canvas para generar los gráficas, posee multiples funcionalidades como – Gráficos de Torta – Entradas para una pares de datos X/Y – Entradas para series de datos x1,x2,… – Series de Datos Multiples – Multiples ejes Y – Gráficos Logaritmicos – Ejes con fechas etc…

Las imagenes generadas son de gran calidad y con muy buena presentación. Buenos colores, no están muy cargados y lo mejor es muy simple de usar.

Sitio: Web Oficial jqPlot
Ejemplos: jqPlot

Bien finalmente la decisión es de ustedes hay para todos los gustos y colores. Todo dependerá de lo que esperemos conseguir como resultado.

Artículos relacionados



Comentarios (2)

 

  1. Información Bitacoras.com…

    Valora en Bitacoras.com: No me había tocado trabajar con grandes cantidades de gráficas generadas de manera dinámica en una web, pero en un proyecto relacionado con un backend para una aplicación on-line salto la idea de poder obtener ciertos datos e…..

  2. Hermes dice:

    Hola! muy util esta pagina muy pronto las utilizare
    en un proyecto, y me inclino por HighCharts. Gracias por este material!

Responder

XHTML: Puedes usar las siguientes etiquetas: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>