Muchas gracias. Podré seguir avanzando en mi proyecto. Te agradezco el tiempo que te tomaste para enseñarnos. Solo por curiosidad, no te falto usar myChart.update(); para que la gráfica se renderice correctamente? Saludos
Buena tarde, realice el ejercicio como lo comentas y todo funciona, solo que al principio no me muestra nada la grafica hasta que le doy un zoom in o zoom out, no se porque pase eso???
Hola muchas gracias por el video. Lo hice con los datos de mi API y si los reconoce pero me sale el siguiente error: TypeError: Cannot read properties of undefined (reading 'labels') at index.html:48 at Array.forEach () at mostrar (index.html:47) at index.html:41
Hola, muy bueno tu video, pero tengo una pregunta, hago exactamente lo que dices en el video, solo que al recargar la pagina a mi no me muestra la grafica, tengo que presionar algun label de la grafica y es ahi donde ya muestra los datos.¿Alguna idea de porque pasa eso? Saludos y me encantan tus videos.
Muchas gracias Foko! Habilita la consola y fijate si te marca algún error. También desde la consola cambia el tamaño de pantalla, responsive. Esas opciones están en Chrome. Saludos!
@@informaticadp Si, la consola no me da ningún error y cuando lo pongo en responsive sigue igual. ¿Será que es porque lo puse en una funcion que se ejecuta justo después del crear el chart? Bueno igualmente seguiré tratando, aún así muchas gracias por tus vídeos y respuestas.
me pasa igual en el minuto 13:00 se ve que tampoco se muestra el grafico, pero después de mostrar el otro ejemplo vuelve a la pagina y esta ... incluso el la consola también cambio ... que será?
Gracias por el trabajo de realizar este tutorial y por proporcionarnos además los recursos Sos un gigante solo tengo una consulta, necesito refrescar el grafico cuando vaya tomando los datos de la base o con un boton de refresh, me ayudas en eso por favor? Gracias por tu ayuda
@@informaticadp De hecho baje los archivos hoy, me imagino que está actualizado pero no logro hacerlo funcionar, a no ser que no sea compatible con bootstrap
excelente tutorial, te hago una pregunta... al agregar que inicie de cero no funciona arranca desde 5, imagino que sera por las escalas, sabes como cambiarlas??
El video está muy claro igual no logro que me funcione. Más allá de eso no logro poner el fetch dentro de una funcion para por ejemplo pasarle un parámetro a la URL. ¿Alguna idea?
¡Muchas gracias por compartir! Buen ejercicio. Tengo una duda, he realizado el ejercicio un par de veces y las barras no se me despliegan de inmediato al ingresar a la app o dando f5, pero si se logra carga al momento que hago clic en el rectángulo del label Stock de productos, alguna idea de en que pueda estar equivocándome en el código? ¡Saludos!
Hola, si todavía te sirve. La respuesta esta en myChart.update(); Se lo agregué así: const mostrar = (usuarios) =>{ usuarios.forEach(usuario => { myChart.data['labels'].push(usuario.nombre); myChart.data['datasets'][0].data.push(usuario.edad); myChart.update(); }); } de esta manera se renderiza la gráfica sin necesidad de estar minimizando o picando en el navegador. Esa propiedad es de la misma libreria ChartJS. Ojala y el maestro nos pueda decir si estuvo bien el procedimiento. :-) de antemano muchas gracias InformaticaDP
Así es. En este caso, el tenía su archivo PHP que le devolvía un JSON. Este es el video más simple y sencillo que he visto explicando el tema de insertar datos en un grafica desde una base de datos. Me costo agarrarle, pues apenas estoy aprendiendo, pero muy buena explicación.
Hola Caro! Mira esa API forma parte de otro curso. Te paso link. Está en el video 6. Igual es algo muy simple. Para descargar está todo en la descripción. ruclips.net/p/PLrAw40DbN0l0ziD-_7LKx61xFhGjVbqbW
Cómo estás Andrés! Mira en este curso muestro gráficos sin usar una API. En los dos últimos videos explico eso. Podes re usar el código. ruclips.net/p/PLrAw40DbN0l2j80DX8Y1Euwmb1oF7rqFY
Cuando ejecuto el grafico, el primero de todos me sale bugeado creo, debe ser por la cantidad de colores puesta porque cuando sobrepongo mi mouse sobre la primera barra me sale color verde y cuando lo quito sale color negro xd
Trate de hacerlo de la siguiente forma con un boton pero no camina Refrescar datos function updateChart() { chart.data.datasets[0].data=data.push(element.temp) chart.data.datasets[0].labels=.push(element.id) chart.update() }
Hola muchas gracias por el video. Lo hice con los datos de mi API y si los reconoce pero me sale el siguiente error: TypeError: Cannot read properties of undefined (reading 'labels') at index.html:48 at Array.forEach () at mostrar (index.html:47) at index.html:41
![Chart.js Tutorial [En español con código de ejemplo] 📊](http://i.ytimg.com/vi/_vRS87AT1Yk/mqdefault.jpg)
es oro puro este canal
Muchas gracias Ruben! Saludos!!
Ya actualicé el link, ahora actualiza perfecto los gráficos, gracias al aporte de Eden Maga.
Después de mirar varios vídeos, definitivamente me quedo con este, logré entenderlo muy bien
Muchas gracias José. Abrazo y saludos!!!
lo haces ver demasiado fácil amigo, que buen canal... Enhorabuena colega
Gracias Bro!!! Abrazo!!
Diosss este video me soluciono toda una mañana perdida...Gracias! Like y suscrito
Excelente!!! Me alegro mucho que te haya servido. Saludos!!
Agradecido, explicas muy bien!
Gracias bro!!!
Excelente explicación. Muchas gracias
Cada día algo nuevo que te rompe la cabeza... gracias por siempre brindarnos todos los conocimientos!
Gracias a vos Nicolás. Te mando un abrazo!
@@informaticadp Otro y gracias!
gracias crack por compartir tus conocimientos. saludos
Muchas gracias Razor!! Abrazo bro!
Muchas gracias. Este video hizo que me suscriba a tu canal. Éxitos!
Como siempre muy buenas sus enseñanzas.
Gracias Betico!!!
Espectacular, fantástico trabajo
Muchas gracias! Saludos y éxitos!
Muy bien explicado, siempre veo lo que publicas,hacia rato que buscaba algo asi. Sl2
Muchas gracias Alejandro!!!
Eres un grande me salvaste de una amanecida T-T
Excelente Luis!!
Excelente explicación
Muchas gracias Harold! Saludos.
Justo lo que quería implementar
Buenísimo
Genial! Y qué bien explicas. Gracias por compartirlo ;)
Muchas gracias Darwin!!
Excelente contenido 🔝🔝
Muchas gracias David!
Un video de hacer una API restfull PHP eso sería genial. Gracias por compartir tu conocimiento
Gracias! Saludos Alejandro!
de donde saco ese archivo? no lo sé encontrar, encontré un archivo encriptado de la tabla que uso de los datos de la base de datos 10:30
Excelente contenido, sugerencia: poner un link en el vídeo que nos lleve al API de node 😀
Muchas gracias Angel!!!
Hola ya no funciona el Link para descargar la API REST con PHP podría compartirlo de nuevo por favor. Gracias.
Que envidia, y de la buena....
Muchas gracias. Podré seguir avanzando en mi proyecto. Te agradezco el tiempo que te tomaste para enseñarnos. Solo por curiosidad, no te falto usar myChart.update(); para que la gráfica se renderice correctamente? Saludos
Cómo estás Eden! Dejame que lo revise. Ahora estoy con el celular sin PC. Te mando un abrazo y tus aportes son de primera!
El mejor canal!!!!👏👏👏...con Chart Js también se puede exportar el gráfico a JPG, PDF, etc como en highcharts??
Muchas gracias Robert!! Creo que si con una extensión. Podemos hacer video. Abrazo!
@@informaticadp 🤯🤯🤯👍👍👍
Buena tarde, realice el ejercicio como lo comentas y todo funciona, solo que al principio no me muestra nada la grafica hasta que le doy un zoom in o zoom out, no se porque pase eso???
amigo como linkeas los datos de tu base de datos a un link?, o si ya tienes un video de eso no se si me lo podrias poner aqui, saludos!
Hola muy bueno y claro tu tutorial, lo único que no pude bajar fue la api Rest con Php, reboza de ads.
Muchas gracias! Estuve limpiando todos los links de esa publicidad. Ahora me fijo con ese.
Listo Osvaldo! Ya quedó limpia, está el link directo a Dropbox.
@@informaticadp Genial, ya lo bajo, muchas gracias!
Hola muchas gracias por el video. Lo hice con los datos de mi API y si los reconoce pero me sale el siguiente error: TypeError: Cannot read properties of undefined (reading 'labels')
at index.html:48
at Array.forEach ()
at mostrar (index.html:47)
at index.html:41
Me paso lo mismo jaja
Hola, muy bueno tu video, pero tengo una pregunta, hago exactamente lo que dices en el video, solo que al recargar la pagina a mi no me muestra la grafica, tengo que presionar algun label de la grafica y es ahi donde ya muestra los datos.¿Alguna idea de porque pasa eso? Saludos y me encantan tus videos.
Muchas gracias Foko! Habilita la consola y fijate si te marca algún error. También desde la consola cambia el tamaño de pantalla, responsive. Esas opciones están en Chrome. Saludos!
@@informaticadp Si, la consola no me da ningún error y cuando lo pongo en responsive sigue igual. ¿Será que es porque lo puse en una funcion que se ejecuta justo después del crear el chart? Bueno igualmente seguiré tratando, aún así muchas gracias por tus vídeos y respuestas.
Si podes, añadí en el codigo los console.log para ver que datos trae. Si no trae ninguno ese es el probelma. Cualquier duda avisame.
@@informaticadp me pasa lo mismo, justo es similar a lo que te paso en el minuto 12:58 donde actualizaste y no se mostro los datos
me pasa igual en el minuto 13:00 se ve que tampoco se muestra el grafico, pero después de mostrar el otro ejemplo vuelve a la pagina y esta ... incluso el la consola también cambio ... que será?
Gracias por el trabajo de realizar este tutorial y por proporcionarnos además los recursos Sos un gigante
solo tengo una consulta, necesito refrescar el grafico cuando vaya tomando los datos de la base o con un boton de refresh, me ayudas en eso por favor?
Gracias por tu ayuda
Hola muchas gracias!! Fíjate que actualicé el link y añadí una línea de código gracias a un compañero del canal. Lo viste a eso?
@@informaticadp De hecho baje los archivos hoy, me imagino que está actualizado pero no logro hacerlo funcionar, a no ser que no sea compatible con bootstrap
Hola!, Me gustaria hacerte una consulta sobre un CRUD que hiciste. Por donde te puedo contactar? Gracias!
Tengo el problema que si cambio un dato en base de datos no se me actualiza el canva hasta que le doy al f5, como puedo actualizarlo
Una consulta , por qué no me permite poner 2 gráficos en la misma pestaña ? Solo puedo uno :(
Hola, queria saber si vas a seguir subiendo cosas de node js.
Por supuesto que si.
⭐⭐⭐⭐⭐
hola, algun correo para poder contactar ? tengo un trabajo que me gustaria solo puedes cotizar
excelente tutorial, te hago una pregunta... al agregar que inicie de cero no funciona arranca desde 5, imagino que sera por las escalas, sabes como cambiarlas??
saludos. como podría agregar varios dataset en el mismo grafico, grafico de tipo line?
El video está muy claro igual no logro que me funcione. Más allá de eso no logro poner el fetch dentro de una funcion para por ejemplo pasarle un parámetro a la URL. ¿Alguna idea?
Al actualizar los datos de mysql es posible actualizar en tiempo real, o es necesario recargar la página??
Es en tiempo real. Fíjate en la descripción o en los comentarios hay una actualización del código, una línea que faltó.
¡Muchas gracias por compartir! Buen ejercicio. Tengo una duda, he realizado el ejercicio un par de veces y las barras no se me despliegan de inmediato al ingresar a la app o dando f5, pero si se logra carga al momento que hago clic en el rectángulo del label Stock de productos, alguna idea de en que pueda estar equivocándome en el código? ¡Saludos!
Hola, si todavía te sirve. La respuesta esta en myChart.update();
Se lo agregué así:
const mostrar = (usuarios) =>{
usuarios.forEach(usuario => {
myChart.data['labels'].push(usuario.nombre);
myChart.data['datasets'][0].data.push(usuario.edad);
myChart.update();
});
}
de esta manera se renderiza la gráfica sin necesidad de estar minimizando o picando en el navegador. Esa propiedad es de la misma libreria ChartJS. Ojala y el maestro nos pueda decir si estuvo bien el procedimiento. :-) de antemano muchas gracias InformaticaDP
la url es la de la base de datos ?
Así es. En este caso, el tenía su archivo PHP que le devolvía un JSON. Este es el video más simple y sencillo que he visto explicando el tema de insertar datos en un grafica desde una base de datos. Me costo agarrarle, pues apenas estoy aprendiendo, pero muy buena explicación.
Que tal!! Podrias pasarme el link del curso de API REST con PHP. Me gustaría entender la configuración que estas manejando
Hola Caro! Mira esa API forma parte de otro curso. Te paso link. Está en el video 6. Igual es algo muy simple. Para descargar está todo en la descripción.
ruclips.net/p/PLrAw40DbN0l0ziD-_7LKx61xFhGjVbqbW
@@informaticadp Muchas gracias! Tengo que entregar un proyecto en la universidad y esto me servirá un montón :)
Excelente! ¿Tiene que ser con PHP puro? Fijate en el canal, hay APIs con Laravel 8 y Node. Saludos.
@@informaticadp Si tiene que ser puro, pero igual los checare, muchas gracias!
Coml seria el charjs en tiempo real?
pasanos el link tio , por favor
Hola profe, como seria para mostrar datos desde php sin usar api, asi de manera directa sin apirest
Cómo estás Andrés! Mira en este curso muestro gráficos sin usar una API. En los dos últimos videos explico eso. Podes re usar el código.
ruclips.net/p/PLrAw40DbN0l2j80DX8Y1Euwmb1oF7rqFY
Cuando ejecuto el grafico, el primero de todos me sale bugeado creo, debe ser por la cantidad de colores puesta porque cuando sobrepongo mi mouse sobre la primera barra me sale color verde y cuando lo quito sale color negro xd
Profe podrias por favor enseñarnos como usar sin una api? usando sentencias sql
Trate de hacerlo de la siguiente forma con un boton pero no camina
Refrescar datos
function updateChart() {
chart.data.datasets[0].data=data.push(element.temp)
chart.data.datasets[0].labels=.push(element.id)
chart.update()
}
Hola muchas gracias por el video. Lo hice con los datos de mi API y si los reconoce pero me sale el siguiente error: TypeError: Cannot read properties of undefined (reading 'labels')
at index.html:48
at Array.forEach ()
at mostrar (index.html:47)
at index.html:41