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 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

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

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

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 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.

Si tienes algun proyecto o simplemente te interesa saber como funciona un poco la API de Twitter este es tu tutorial. Vamos a personalizar un mensaje usando PHP y el API de Twitter para luego plubicarlo.

En realidad es algo muy sencillo y solo vamoa utilizar un par de lineas de codigo nada muy complejo, pero nos servira como introducción.

Para el siguiente ejemplo usaremos dos archivos PHP.

# insertarMensaje.php ( contiene la interface de nuestro ejemlo )
# twitterApi.php ( contiene el codigo nesesario para usar el API )

Bien manos a la obra el codigo explicado y los parametros de configuración:

En primer lugar en el archivo insertarMensaje.php tenemos que modificar dos parámetros:
$twitter_user, con tu nombre de usuario de Twitter y $twitter_psw, con tu contraseña de Twitter.

/* Esto lo dejamos tal cual
/* —————————————- */
require(’twitterApi.php’);

if(isset($_POST['twitter_msg'])){
$twitter_msge=$_POST['twitter_msg'];
if( strlen($twitter_msge)<1 ){
$error = 1;
} else {
$twitter_status = postToTwitter($twitter_user, $twitter_psw, $twitter_msge);
}
}
?>

Bien la parte que esta comentada indica donde esta el codigo PHP que no debemos tocar y que es el que procesa la instrucción.

El siguiente es el codigo de nuestra interface donde ponemos nuestro mensaje a Twitter.
Como veran es muy basico y solo contiene un par de lineas de PHP para verificar si ha habido un error en el mensaje.

< ?php } else if(isset($error)){?>

< ?php }?>

¿Que estas haciendo?

Finalmente podemos poner esto en nuestro servidor local o nuestro hosting y probarlo directamente.

Archivos del tutorial: twitter (99)
Articulo original: Antonio Lupetti

dhtmlxScheduler es un sistema de Calendario de eventos basado en Web como puede ser Google Calendar, con múltiples opciones para añadir, guardar y editar nuestro calendario a gusto, una aplicación genial para integrar en proyectos ya existentes o partir de una aplicación que ya nos entrega un punto de partida para algo mayor que tengamos en mente.

Debido a la dinámica de carga de datos a través de Ajax el calendario de eventos se pueden añadir / modificar / borrar sin actualizar la página. Una avanzada funcionalidad de drag-n-drop permite a los usuarios cambiar los eventos por fechas y fácilmente mover o cambiar el tamaño de las cajas a gusto. Los eventos se pueden visualizar en vistas de día, semana o mes.

- Al mismo tiempo, el programa es muy ligero (unos 19kb gzip) y de rápido rendimiento.
- Soporte para los navegadores mas utilizados, IE, Firefox, Opera, Safari y Chrome.

Propiedasdes

• Muy ligero
• total control mediante script API
• tres tipos de vistas: día, semana, mes
• una intuitiva interface
• fácil implementación
• compatibilidad con dhtmlxConnector
• modificación de themes
• eventos unicos/multi-días
• suporte para formato iCal
• modificable y escalable
• y lo mejor de todo OpenSource

Enlace: dhtmlxScheduler
Demo: Calendario de Eventos