Como Desplegar Información de Una Base de Datos en Chart JS 2.7 (Corregido 01-04-2019) - Blog Nube Colectiva

9/8/2021 Como desplegar información de una Base de Datos en Chart JS 2.
7 ( Corregido 01-04-2019 ) | Blog Nube Colectiva
BACKEND FRONTEND MÓVIL TUTORIALES DIGITAL 

+ MÁS        
Como desplegar información de

una Base de Datos en Chart JS 2.7 (


Corregido 01-04-2019 ) Síguenos En YouTube (Streamings
En Vivo) 

BACKEND PUBLICADO: 05-08-2018 | ACTUALIZADO/CORREGIDO: 21-10-2019
| COMUNIDAD:

 CREAR UN POST, EVENTOS DEVS, FORO







Síguenos En Twitch (Streamings
En Vivo)
Compartir
FACEBOOK
Demo Github
Hay proyectos de todo tipo, unos pueden contar con un informe o reporte que
También Te Puede Interesar
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 5 Características de
hacer esto, te invitamos a leer este artículo muy interesante. JavaScript en Desuso y sus
Alternativas
05/08/2021
Las 5 Consultas más

Populares en Stack Overflow
– Mes Julio 2021
02/08/2021
5 Repositorios que Fueron

Tendencia en GitHub – Mes
Julio 2021
01/08/2021
Los 20 Lenguajes de
Programación más Populares
imagen: chartjs.org – Julio 2021
31/07/2021
Si
Vamos a usar PHP para acceder al servidor y MySQL como Base de datos, al
deba
final lo que obtenemos es una estructura de datos en formato JSON que Las 10 Bases de Datos más
r
Populares – Julio 2021
también lo puedes obtener si usas Frameworks como Django (Python), Ruby
31/07/2021

https://blog.nubecolectiva.com/como-desplegar-informacion-de-una-base-de-datos-en-chart-js/ 1/12
9/8/2021 Como desplegar información de una Base de Datos en Chart JS 2.7 ( Corregido 01-04-2019 ) | Blog Nube Colectiva
on Rails (Ruby), entorno Node JS (Javascript), entro otros. Los datos de esta
+ MÁS        
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>





Neumáticos para flotas 

Goodyear® Max Series, máxima durabilidad

 garantizada: 5 años de vida total

Goodyear Abrir
Últimos Posts Corregidos /


Modificados

<script src="https://cdnjs.cloudflare.com/ajax/libs
5 Características de JavaScript en
Desuso y sus Alternativas - Actualizado:
05-08-2021

¿ Qué es la Arquitectura Serverless (Sin
</body> Servidor) ? - Actualizado: 05-08-2021

</html> Que es Vue JS, Historia y otros detalles
- Actualizado: 03-08-2021
Con eso ya estamos listo para trabajar la vista Frontend, con Chart JS Las 5 Consultas más Populares en
podemos representar con distintas formas visuales nuestra información, Stack Overflow – Mes Julio 2021 -
nosotros vamos a usar el tipo dona o rosquilla. Actualizado: 02-08-2021
Ahora dentro de nuestra vista HTML voy a colocar una etiqueta canvas con un 5 Repositorios que Fueron Tendencia en
GitHub - Mes Julio 2021 - Actualizado:
id llamado miGrafico para imprimir allí nuestro gráfico en forma de dona
01-08-2021
Mantente Informado
Neumáticos para flotas
Goodyear® Max Series, máxima
durabilidad garantizada: 5 años de
vida total
Goodyear
Si
deba
r
<div class="row">
<div class="col-md-12"> 

<canvas id="miGrafico"></canvas>
+ MÁS        

</div>
</div>
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














garantizada: 5 años de vida total
Goodyear Abrir
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


<script crossorigin="anonymous" integrity="sha384-xB



<script type="text/javascript" src="js/datos.js"></
Si
deba </body>
r </html>

+ MÁS        

garantizada: 5 años de vida total
Goodyear 
Abrir


 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.


$(document).ready(function(){
$.ajax({
url: "php/datos.php",
dataType: 'json',
contentType: "application/json; charset=utf-8",
method: "GET",
success: function(data) {
var nombre = [];
var stock = [];
var color = ['rgba(255, 99, 132, 0.2)', 'rgba(54,
var bordercolor = ['rgba(255,99,132,1)', 'rgba(5
console.log(data);
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
$(document).ready(function() {
$.ajax({
url: "php/datos.php",
dataType: 'json',
contentType: "application/json; charset=utf-8",
Si method: "GET",
deba success: function(data) { Newsletter
r var nombre = [];
Email Address*
var stock = [];
var color = ['rgba(255, 99, 132, 0.2)', 'rg 
var bordercolor = ['rgba(255,99,132,1)', 'r
console.log(data); Nombres y Apellidos
+ MÁS        

for (var i in data) {
nombre.push(data[i].nombre);
* = campo obligatorio
stock.push(data[i].stock);
}
SUBSCRIBIRSE

var chartdata = {
labels: nombre, powered by MailChimp !
datasets: [{

label: nombre,

backgroundColor: color,

borderColor: color,

borderWidth: 2,

hoverBackgroundColor: color,

hoverBorderColor: bordercolor,

data: stock

}]

};



var mostrar = $("#miGrafico");



var grafico = new Chart(mostrar, {
type: 'doughnut',
data: chartdata,
options: {
responsive: true,
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
}, Video
error: function(data) {
console.log(data);
}
});
});
Base de Datos
Tutorial: Como Validar un Formulario con

Angular 10 - Parte 2 (Final)
Goodyear® Max Series, máxima
durabilidad garantizada: 5 años de
vida total
Goodyear
Si
deba
r
Creamos una tabla llamada postres para este ejemplo

CREATE TABLE `postres` (
`id` int(11) NOT NULL,
+ MÁS        
`nombre` varchar(255) COLLATE utf8_unicode_ci NOT NUL
`stock` varchar(255) COLLATE utf8_unicode_ci NOT NULL
`precio` varchar(255) COLLATE utf8_unicode_ci NOT NUL
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unico
A nuestra tabla creada le vamos a insertar los siguientes datos, en total son 6
postres:

 INSERT INTO `postres` (`id`, `nombre`, `stock`, `precio
(1, 'Mazamorra Morada', '50', '3.00'), 
 (2, 'Torta de Chocolate', '35', '5.00'),
(3, 'Pie de Manzana', '45', '4.50'), 
 (4, 'Arroz con Leche', '36', '2.50'),
(5, 'Gelatina de Fresa', '60', '1.50'), 
 (6, 'Suspiro a la LimeÃ±a', '26', '6.00');


Nuestra Base de datos debería tener la siguiente estructura



Canal Discord
17 Members Online
Conexión al Servidor
General
Ahora vamos a realizar la petición a la Base de Datos con los datos que
MEMBERS ONLINE
mostraremos en nuestro gráfico, para esto debemos conectar con PHP a la
127.0.0.1
base de datos MySQL y generar los datos en formato JSON, este proceso lo AlejandraBM
guardare en mi archivo datos.php alex_w
Apollo apollo.fyi | !help
Cada linea del código PHP realiza una tarea específica y te lo explico en modo Dai
David1728
de comentarios dentro del código:
Derian
ElAnthony
<?php F3R
joan
// Seteamos la cabecera a JSON
MEE6
header('Content-Type: application/json');
Nightbot
Sebas Loguzzo
// Configuramos la conexión a la base de datos S d k
Free voice chat from Connect
define('DB_HOST', 'localhost'); Discord
define('DB_USERNAME', 'root');
define('DB_PASSWORD', '');
define('DB_NAME', 'mibasededatos');

// Desplegamos la conexión a la Basde de Datos
$mysqli = new mysqli(DB_HOST, DB_USERNAME, DB_PASSWORD,

$mysqli->query("SET NAMES 'utf8'");

if(!$mysqli){
Si die("La Conexión ha fallado: " . $mysqli->error);
deba }
r
// Seleccionamos los datos de la tabla postres
$query = sprintf("SELECT id, nombre, stock, precio FROM 

$result = $mysqli->query($query);
+ MÁS        

// Hacemos un bucle con los datos obntenidos
$data = array();
foreach ($result as $row) {
$data[] = $row;
}

// Limpiamos memoria consumida al extraer los datos
$result->close();



// Cerramos la conexión a la Base de Datos

$mysqli->close();



// Mostramos los datos en formato JSON

print json_encode($data);



//var_dump($data);



 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 Comentarios Recientes
gráfico mostrando un informe con datos desde la base de datos.
Nube Colectiva en Que es Vue JS,
Historia y otros detalles
Felix Noel en Que es Vue JS, Historia y

otros detalles
Nube Colectiva en Como Leer un archivo

JSON con Angular 8 + Tabla de
Bootstrap 4
Enrique en Como Leer un archivo JSON

con Angular 8 + Tabla de Bootstrap 4
Nube Colectiva en Cargar una ubicación

desde la Base de Datos MySQL con PHP
y Google Maps Javascript API
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

Si contenidos.
deba
r
Newsletter
+ MÁS        
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
Email * 


 Nombres y Apellidos



SUBSCRIBIRSE




 ARTÍCULOS RELACIONADOS

Forma ideal de Trabajar Listar datos con Angular Como pasar un token en
con Imágenes y una Base (1.4.8), MySQL y PHP Postman
de Datos en un Proyecto
Web
5 Tendencias que se darán 7 Cuentas de Instagram Que es API REST +

en el Desarrollo BackEnd que debes Seguir si eres Mejores Prácticas
para el 2021 Developer
 Subscribirse  Conectarse con 

E scribe acá
{} [+] 
16 COMMENTS   antiguos

Boris R
Si 
1 año atrás
deba
Hola, excelente guía justo andaba buscando un ejemplo de como
r
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
1
Responder
+ MÁS        
Nube Colectiva Moderador
 Reply to Boris R 
1 año atrás
Hola Boris, si vez en el gráfico estoy usando el nombre y stock,

cuando colocas el mouse encima de una porción del gráfico (dona),
te aparece el nombre y seguido de 2 puntos el stock, por ejemplo:
Torta de Chocolate: 35
0
Responder

 Boris R

 Reply to Nube Colectiva
 
1 año 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

 0
Responder

 Nube Colectiva Moderador
 Reply to Boris R 
1 año atrás 
Como seria el formato al colocar el mouse encima de
una porción de la dona, seria así zapatos: 25% ?
0
Responder
luis

1 año atrás
eres capo men
1
Responder
 Reply to luis 
1 año atrás
Gracias luis, bienvenido a la comunidad.
0
Responder
Guille

1 año 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?
0
Responder
 Reply to Guille 
1 año atrás
Hola Guille, si son líneas, puedes revisar la documentación oficial:
https://www.chartjs.org/docs/latest/charts/line.html
Si Me avisas como te fue.

deba
r 0
Responder

Carlos Demasi

1 año atrás
+ MÁ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 » 

1
Responder 

Nube Colectiva Moderador 
  Reply to Carlos Demasi 
1 año atrás
Hola Carlos, gracias por visitar el Blog, estuve buscando información


 al respecto y existen los Mixed en Chart JS, por ejemplo puedes
tener un gráfico de líneas y otro de barras al mismo tiempo, puedes 
 ver el código y el ejemplo en su documentación oficial:
https://www.chartjs.org/docs/latest/charts/mixed.html


Me avisas como te fue.

0
Responder
Carlos Demasi
 Reply to Nube Colectiva 

1 año 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 »
0
Responder
 Reply to Carlos Demasi 

1 año atrás
Entiendo que quieres crear 4 gráficos de 4 provincias,

revisa este ejemplo con 3 datos y en base a ello,
puedes implementar lo que necesitas:
http://jsfiddle.net/p3g07d09/
Me avisas como te fue.
0
Responder
Ricardo silva

10 meses 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
Si
indefinido tachado. seria de mucha ayuda su comentario. gracias
deba
r básicamente, solo cambie la bd, cambiar algunos parámetros sin
perder la lógica que llevo el trabajo origina


+ MÁS        
1
Responder 

Nube Colectiva Moderador 
  Reply to Ricardo silva 
10 meses atrás

Revisa y comparteme en la consola chrome dev tools que error te da
 ?

  Last edited 10 meses atrás by Nube Colectiva

 0
Responder

 Ricardo silva
 Reply to Nube Colectiva 
10 meses 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
1
Responder
 Reply to Ricardo silva 

10 meses atrás
Genial Ricardo, lo importante es que no te rindas

hasta que lo logres. Felicidades, Bienvenido a la
comunidad y cualquier cosa tambien estamos en los
grupos de comunicación (WhatsApp, Telegram,
Discord, etc.) en donde yo y otros usuarios de la
comunidad te estaremos ayudando.
 Last edited 10 meses atrás by Nube Colectiva
2
Responder
← Post Anterior Siguiente Post →
Que es Material Cargar Como Conceptos y Que es Firebase Como Crear una
Design, como asincrónicament implementar la Técnicas de Git y Otros Detalles Página Web con
usarlo y más e un plugin función que debes saber Node JS 10,
detalles jQuery (Método Compartir con antes de unirte a Express JS 4 y
Abreviado) Kotlin en un Equipo de Git Bootstrap 4 –
Android Studio – Parte 1 Parte 4 (Final)
Si 3.3
deba
r
Copyright © 2021 El conocimiento en la Nube es Colectivo. Compartimos
Tutoriales y Recursos sobre Desarrollo Web, Back-end, Front-end, 
La Magia en Internet existe. A diferencia de la vida real, en Internet
podemos soñar, viajar, leer, pensar sin costo alguno. Internet nos dio la
Aplicaciones Móviles, UX, UI, Seguridad Web, etc..
p , , , g ,
oportunidad de ser Felices. Todos los Derechos Reservados. Desarrollado por Nube Colectiva
BACKEND FRONTEND MÓVIL TUTORIALES DIGITAL        
+ MÁS 
Inicio Android Archivos Articulos Marketing Digital Tecnología Tutoriales SEO Web Contacto














Si
deba
r

Como Desplegar Información de Una Base de Datos en Chart JS 2.7 (Corregido 01-04-2019) - Blog Nube Colectiva

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Como Desplegar Información de Una Base de Datos en Chart JS 2.7 (Corregido 01-04-2019) - Blog Nube Colectiva

Cargado por

Copyright:

Formatos disponibles

9/8/2021 Como desplegar información de una Base de Datos en Chart JS 2.

7 ( Corregido 01-04-2019 ) | Blog Nube Colectiva

BACKEND FRONTEND MÓVIL TUTORIALES DIGITAL 

Como desplegar información de

Las 5 Consultas más

5 Repositorios que Fueron

Esta librería para mostrar gráficos estadísticos e informativos es Open Source y

Últimos Posts Corregidos /

Neumáticos para flotas

Goodyear® Max Series, máxima

durabilidad garantizada: 5 años de

Veamos a continuación la idea visual o el tipo de forma gráfica en donde

Neumáticos para flotas

garantizada: 5 años de vida total

Algo importante es instanciar jQuery en nuestro documento, ya que usaremos

BACKEND FRONTEND MÓVIL TUTORIALES DIGITAL 

Neumáticos para flotas

garantizada: 5 años de vida total

var bordercolor = ['rgba(255,99,132,1)', 'r

labels: nombre, powered by MailChimp !

Tutorial: Como Validar un Formulario con

Neumáticos para flotas

Goodyear® Max Series, máxima

durabilidad garantizada: 5 años de

Felix Noel en Que es Vue JS, Historia y

Nube Colectiva en Como Leer un archivo

Enrique en Como Leer un archivo JSON

Nube Colectiva en Cargar una ubicación

Algunos pasos, métodos o funciones pueden cambiar en futuras

En el Demo no usamos el dato precio, pero se puede implementar sin

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

Suscríbete a Nuestro Boletín de Novedades:

(Luego de la suscripción no te va salir ningun mensaje.

5 Tendencias que se darán 7 Cuentas de Instagram Que es API REST +

 Subscribirse  Conectarse con 

Nube Colectiva Moderador

Hola Boris, si vez en el gráfico estoy usando el nombre y stock,

Gracias por tu respuesta,

eres capo men

Nube Colectiva Moderador

Gracias luis, bienvenido a la comunidad.

Hola, excelente aporte. Yo estoy realizando gráficos con este mismo

Nube Colectiva Moderador

Hola Guille, si son líneas, puedes revisar la documentación oficial:

Si Me avisas como te fue.

Hola Carlos, gracias por visitar el Blog, estuve buscando información

 Reply to Nube Colectiva 

Bueno dias Nube Colectiva, creo que no fui claro y tratare en

Nube Colectiva Moderador

 Reply to Carlos Demasi 

Entiendo que quieres crear 4 gráficos de 4 provincias,

Me avisas como te fue.

Buenas noches, excelente todo su trabajo. he realizado el mismo

BACKEND FRONTEND MÓVIL TUTORIALES DIGITAL 

Nube Colectiva Moderador

 Reply to Ricardo silva 

Genial Ricardo, lo importante es que no te rindas

 Last edited 10 meses atrás by Nube Colectiva

← Post Anterior Siguiente Post →

También podría gustarte