Gráficos Estadísticos con jQuery
Morris.js es un plugin jQuery de lo más atractivo para la creación de gráficos estadísticos, al menos de los que pude probar en estos últimos meses. Su atractivo principal es su peso, menos de 8kb en su versión comprimida, un valor que se encuentra muy por debajo de otras alternativas similares.
Los gráficos creados son compatibles con la mayoría de los navegadores, en la web oficial del proyecto se comenta que soporta Safari, Chrome, Firefox e Internet Explorer, para sorpresa mía, en su terrorífica versión 6. Ademas da completo soporte para móviles, permitiendo su correcto renderizado en los sistemas operativos iOS 3+ y Android 3+.
A continuación una pequeña captura de un gráfico generado con este plugin y el código necesario para lograrlo:
Ejemplo de uso
Morris.Line({
element: 'annual',
data: [
{y: '2012', a: 100},
{y: '2011', a: 75},
{y: '2010', a: 50},
{y: '2009', a: 75},
{y: '2008', a: 50},
{y: '2007', a: 75},
{y: '2006', a: 100}
],
xkey: 'y',
ykeys: ['a'],
labels: ['Series A']
});
Web: Morris.js
Pablo
Programador desde hace más de 11 años, adicto a internet, cafeinómano, fanático de la información, intento de emprendedor, trabaja de forma compulsiva solo en lo que ama. Sueña con tener una aplicación con más de 1 millón de usuarios.
A la perinola! soporta IE6, excelente el script éste!
Che, la verdad que los felicito por el espacio que tienen en la web, es de una calidad excelente.
Saludos!
Muchisimas gracias por la aportación, me salvaste la vida!
Muy útil y queda muy chulo
Tengo una pregunta, en Internet Explorer 9 me funciona perfectamente, pero en las otras versiones no me aparece, qué puedo haber hecho mal, si dices que funciona bien hasta en el 6?
Te dejo mi código aquí:
En html
En javascript
Morris.Line({
element: ‘visitors’,
data: [
{y: '2012', a: 100},
{y: '2011', a: 75},
{y: '2010', a: 50},
{y: '2009', a: 75},
{y: '2008', a: 50},
{y: '2007', a: 75},
{y: '2006', a: 100}
],
xkey: ‘y’,
ykeys: ['a'],
labels: ['Series A']
});
Muchas gracias!