Como desplegar información de una Base de Datos en Chart JS 2.7 ( Corregido 01-04-2019 )

Backend | | Comunidad: Crear un Post, Eventos Devs, Foro

Demo Github

Hay proyectos de todo tipo, unos pueden contar con un informe o reporte que necesite mostrar datos en gráficos, barras, etc. y estos datos se encuentran almacenados en una base de datos determinada, te gustaría aprender a como hacer esto, te invitamos a leer este artículo muy interesante.

imagen: chartjs.org

Vamos a usar PHP para acceder al servidor y MySQL como Base de datos, al final lo que obtenemos es una estructura de datos en formato JSON que también lo puedes obtener si usas Frameworks como Django (Python), Ruby on Rails (Ruby), entorno Node JS (Javascript), entro otros. Los datos de esta estructura JSON serán visualizados en nuestro gráfico.

Desplegando Chart JS

Esta librería para mostrar gráficos estadísticos e informativos es Open Source y quizás la mejor alternativa en su categoría, puedes acceder a descargarla en el siguiente enlace, además puedes encontrar basta información y detalles sobre esta genial librería Javascript.

Instanciamos la librería con sus archivos Javascript, los colocamos antes de cerrar la etiqueta </body>

Con eso ya estamos listo para trabajar la vista Frontend, con Chart JS podemos representar con distintas formas visuales nuestra información, nosotros vamos a usar el tipo dona o rosquilla.

Ahora dentro de nuestra vista HTML voy a colocar una etiqueta canvas con un id llamado miGrafico para imprimir allí nuestro gráfico en forma de dona

Veamos a continuación la idea visual o el tipo de forma gráfica en donde mostraremos nuestros datos, mencionamos que era una dona como puedes ver a continuación

jQuery Ajax

Algo importante es instanciar jQuery en nuestro documento, ya que usaremos su método .ajax() para hacer una petición asíncrona al servidor, lo colocamos antes de los archivos de la librería Chart JS, ya que primero necesita que se cargue jQuery para poder trabajar con Chart JS

Vamos a crear un archivo llamado datos.js en donde usaremos el método ajax() junto con los métodos que nos ofrece Chart JS.

Vamos a pasar el método GET a nuestro archivo llamado datos.php que detallamos más abajo de este artículo, tambien usaremos 2 variables llamadas nombre y stock que son las que mostrarán los datos desde la base de datos y 2 variables locales color y bordercolor que usaremos para pintar nuestro gráfico.

Más abajo usamos métodos de Chart JS, uno de ellos es para dibujar nuestra dona en el campo type: ‘doughnut’, a continuación dejamos el código completo

Base de Datos

Creamos una tabla llamada postres para este ejemplo

A nuestra tabla creada le vamos a insertar los siguientes datos, en total son 6 postres:

Nuestra Base de datos debería tener la siguiente estructura

Conexión al Servidor

Ahora vamos a realizar la petición a la Base de Datos con los datos que mostraremos en nuestro gráfico, para esto debemos conectar con PHP a la base de datos MySQL y generar los datos en formato JSON, este proceso lo guardare en mi archivo datos.php

Cada linea del código PHP realiza una tarea específica y te lo explico en modo de comentarios dentro del código:

Al final puedes ver que generamos una salida de los datos en formato JSON, este formato y estructura es lo que necesita ChartJS junto con jQuery Ajax para mostrar los datos en nuestro gráfico.

Realizado todo lo anterior abrimos nuestro navegador y deberíamos ver nuestro gráfico mostrando un informe con datos desde la base de datos.

Puedes ver el resultado final en el Demo que esta al inicio de este artículo.

Notas

  • Algunos pasos, métodos o funciones pueden cambiar en futuras versiones, esto no depende de nosotros si no de los Desarrolladores que dan soporte a Chart JS.
  • En el Demo no usamos el dato precio, pero se puede implementar sin problemas.

 

Síguenos en las Redes Sociales para que no te pierdas nuestros próximos contenidos.

Newsletter

Suscríbete a Nuestro Boletín de Novedades:

(Luego de la suscripción no te va salir ningun mensaje. Solo revisa tu bandeja de Correo para confirmar tu suscripción)
* indicates required
Subscribirse
Notificar a
guest
16 Comments
antiguos
nuevos más votado
Inline Feedbacks
View all comments
Boris R
Boris R
7 meses atrás

Hola, excelente guía justo andaba buscando un ejemplo de como extraer datos de json en un Pie Chart, sería genial si pudieses agregarle el precio a fin de ver 2 valores en cada segmento si fuera posible

Boris R
Boris R
Reply to  Nube Colectiva
7 meses atrás

Gracias por tu respuesta,
sucede que en mi caso he cambiado el valor a porcentajes pero no logro encontrar el codigo correcto para mostrar valor y porcentaje a la vez, lo que me recomendaron era si al pasar el mouse y sobre la grafica ver el porcentaje y valor

luis
luis
6 meses atrás

eres capo men

Guille
Guille
6 meses atrás

Hola, excelente aporte. Yo estoy realizando gráficos con este mismo método, pero me cuesta agregar un dataset en forma dinámica accediendo a la BD. Estoy mostrando curvas de consumos diarios y quiero ir agregando dias de la semana con sus consumos. Hay algún ejemplo que pueda ver sobre esto?

Carlos Demasi
Carlos Demasi
6 meses atrás

Esta muy bueno el articulo, pero los ejemplos que hay en la web no hay (al menos yo no encontre un ejemplo) respecto a cantidad d datasets variable. Lo normal cuando utilizamos graficos, es que los datos que vamos a representar son dinamicos y variables. Puede que se quiera graficar un grafico de barras en una ocacion con 3 datasets y en otra con 2, porque eso dependera de la seleccion que haga el usuario. Todos los ejemplos apuntan a datasets fijos, uno, dos, o los que sean que forman parte del ejemplo. Tu podrias por favor, informarme donde puedo… Leer más »

Carlos Demasi
Carlos Demasi
Reply to  Nube Colectiva
6 meses atrás

Bueno dias Nube Colectiva, creo que no fui claro y tratare en ser mas explicito. Imaginate que tengo una BD donde en una tabla tengo la provincia, los casos confirmados de covid19, los fallecidos, los recuperados y la fecha a la que pertenecen los datos, es decir que tengo para cada dia calendario un registro con la informacion antes detallada. Ahora bien, supongamos que entra un usuario y necesita un grafico de barras, de una fecha determinada, donde se presenten los casos confirmados y los fallecidos de UNA provincia. Otro usuario necesita un grafico de barras tambien para una fecha… Leer más »

Ricardo silva
Ricardo silva
1 mes atrás

Buenas noches, excelente todo su trabajo. he realizado el mismo ejemplo con una bd con diferentes argumentos con la misma cantidad de elementos, sustituyendo los campo necesarios y no me queda, cambie varias cosas pero solo aparece el fondo sin la dona y con indefinido tachado. seria de mucha ayuda su comentario. gracias

básicamente, solo cambie la bd, cambiar algunos parámetros sin perder la lógica que llevo el trabajo origina

Captura1.PNG
Ricardo silva
Ricardo silva
Reply to  Nube Colectiva
1 mes atrás

Hola buenos días, gracias ya quedo, ese día actualice varias veces la pantalla y nada. al día siguiente seguí con el ejercicio y ya apareció. cualquier duda le comentare saludos