Gráficas con MorrisJS
Gráficas con MorrisJS
¡INSCRÍBETE A CUALQUIER CURSO CON UN 50% DE DESCUENTO PARA NUEVOS CLIENTES!

Morris.js es una librería javascript que trabaja con jQuery y nos permite de forma muy sencilla crear gráficas de muchos tipos y con muy buena apariencia, gráficas de tipo Area, Line, Bar y Donut.

En este tutorial vamos a ver lo sencillo que es crear gráficas con Morris.js, utilizaremos una base de datos mysql para que el ejemplo sea lo más cercano posible a la realidad.

Sql para crear la base de datos


Ahora crea un proyecto vacío y ejecuta los siguientes comandos para instalar las dependencias con bower, si no tienes instalado bower simplemente ejecuta desde la terminal el siguiente comando.


Con eso ya tenemos todo lo que necesitamos y podemos ver el código que nos interesa.

Obtener los datos

Ahora crea un archivo llamado data.php y escribe el siguiente código, simplemente obtenemos los datos de la base de datos.


De esa forma tan sencilla conectamos con nuestra base de datos, obtenemos todos los registros agrupados por ciudad y devolvemos los datos en los dos formatos que vamos a necesitar para crear las gráficas con Morris.js.

Finalmente, sólo nos queda crear el código que pinta las gráficas haciendo uso de los métodos de Morris.js, así que crea un archivo index.php con el siguiente código.


Ahora puedes lanzar la aplicación ubicado en el directorio del proyecto con el siguiente comando para ver el resultado.


Si ahora visitas localhost:8888 verás que todas las gráficas se muestran una debajo de la otra y si te colocas encima de cada una verás cómo aparecen las lables flotantes.

Si te fijas, hemos asignado cada gráfica a una variable, eso es muy útil si queremos actualizar los datos de cada gráfica sin actualizar la página gracias al método setData de Morris.js, simplemente deberías hacer lo siguiente para actualizar una gráfica con nuevos datos.


Ahora sólo debes revisar un poco la documentación de Morris.js para adaptar cada gráfica a tus necesidades.