Gráficos Estadísticos con jQuery

Pablo

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:

Gráficos Estadísticos con jQuery

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.

Comentarios

  1. Franco Responder

    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!

  2. Kehos Responder

    Muchisimas gracias por la aportación, me salvaste la vida!

    Muy útil y queda muy chulo :)

  3. Kehos Responder

    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!

Realizar un comentario