Introducir gráficos en una página web se convierte en una tarea sencilla gracias a este plugin para jQuery llamada Morris.js. Este plugin nos facilita mucho la tarea de realizar distintos tipos de gráficos:

Para utitilizar lo haremos a través de unas cuentas lineas de código. En primer lugar, como siempre, tenemos que añadir el plugin a nuestra web. Para ello tenemos dos opciones: descargarlo o introducir directamente la siguiente línea de código:


<script src="http://cdn.oesmith.co.uk/morris-0.5.1.min.js"></script>

También necesitaremos el plugin Raphael.js:


<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>

El siguiente paso es crear un contenedor donde introducir el gráfico. Es importante que el contenedor tenga una altura específica porque en caso contario puede que el gráfico no se vea correctamente.


<div id="migrafico" syte="height: 350px;"></div>

Ahora solo nos queda inicializar el gráfico con los datos. Para ello utilizaremos el siguiente código (en este caso utilizamos un gráfico de barras):


new Morris.Bar({
      element: 'migrafico',
      data: [
        { month: 'Ene', value: 31 },
        { month: 'Feb', value: 28 },
        { month: 'Mar', value: 31 },
        { month: 'Abr', value: 30 },
        { month: 'May', value: 31 },
        { month: 'Jun', value: 30 },
        { month: 'Jul', value: 31 },
        { month: 'Ago', value: 31 },
        { month: 'Sep', value: 30 },
        { month: 'Oct', value: 31 },
        { month: 'Nov', value: 30 },
        { month: 'Dic', value: 31 }
      ],
      xkey: 'month',
      ykeys: ['value'],
      labels: ['Days'],
      resize: true
    });

El plugin trae infinidad de opciones para configurar y personalizar los gráficos. Entre otras trae:

Puedes ver todas las opciones en la documentación oficial del plugin: gráficos de barras, gráficos de donuts, gráficos de líneas

###Ejemplos


new Morris.Bar({
      element: 'migrafico1',
      data: [
        { month: 'Ene', value: 31 },
        { month: 'Feb', value: 28 },
        { month: 'Mar', value: 31 },
        { month: 'Abr', value: 30 },
        { month: 'May', value: 31 },
        { month: 'Jun', value: 30 },
        { month: 'Jul', value: 31 },
        { month: 'Ago', value: 31 },
        { month: 'Sep', value: 30 },
        { month: 'Oct', value: 31 },
        { month: 'Nov', value: 30 },
        { month: 'Dic', value: 31 }
      ],
      xkey: 'month',
      ykeys: ['value'],
      labels: ['Days'],
      resize: true
    });

new Morris.Line({
      element: 'migrafico2',
      data: [
        { y: '2006', a: 100, b: 90 },
        { y: '2007', a: 75,  b: 65 },
        { y: '2008', a: 50,  b: 40 },
        { y: '2009', a: 75,  b: 65 },
        { y: '2010', a: 50,  b: 40 },
        { y: '2011', a: 75,  b: 65 },
        { y: '2012', a: 100, b: 90 }
      ],
      xkey: 'y',
      ykeys: ['a', 'b'],
      labels: ['A', 'B'],
      resize: true
    });

new Morris.Donut({
      element: 'migrafico3',
      data: [
        { label: 'Ene', value: 31 },
        { label: 'Feb', value: 28 },
        { label: 'Mar', value: 31 },
        { label: 'Abr', value: 30 },
        { label: 'May', value: 31 },
        { label: 'Jun', value: 30 },
        { label: 'Jul', value: 31 },
        { label: 'Ago', value: 31 },
        { label: 'Sep', value: 30 },
        { label: 'Oct', value: 31 },
        { label: 'Nov', value: 30 },
        { label: 'Dic', value: 31 }
      ]
    });

Tags