Icono del sitio Blog de Programación y Desarrollo – Nube Colectiva

Como Mostrar Datos de una Base de Datos en Chart JS 2.7 ( Corregido 01-04-2019 )

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 en donde te enseñaré a Como Mostrar Datos de una Base de Datos en Chart JS 2.7 , usaremos PHP y MySQL, vamos con ello. 

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. 

Conclusión

En este tutorial has aprendido a Como Mostrar Datos de una Base de Datos en Chart JS, hacer esto te servirá para realizar implementaciones de este tipo más avanzadas. 

Nota(s)

 

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

Salir de la versión móvil