estoy realizando un código donde almaceno datos en tiempo real a una base de datos en MySQL, y los muestro en unas graficas a través de una grafica de Charts.js, pero cada vez que quero ver como se modifica la grafica tengo que actualizar la pagina web, y lo que yo necesito es que automáticamente se vaya actualizando al ingresar los valores a la base de datos. un detalle que tengo es que cuándo ya llevan muchos datos almacenados y actualizo la pagina web se tarda bastante en volver a cargar las graficas, por eso me gastaría que se muestreara en tiempo real. mi script es el siguiente.
**var ctx= document.getElementById('myChart').getContext("2d");
/////Creacion de un grafico/////////////
var myChart= new Chart(ctx,{
type: "line",
data:{
//labels:['col1','col2','col3'],
datasets:[{
label: 'ANI INSTANTANÉO',
//data:[10,9,15],
backgroundColor: ['#ffff00'],
borderColor: ['#ffff00'],
//borderColor: none,
borderWidth:1,
tension: 0.7,
pointRadius: .1,
pointHoverRadius: 5,
pointHitRadius: 30,
pointBorderWidth: 2,
},
{ label: 'ANI MEDIO',
backgroundColor: ['#ff8000'],
borderColor: ['#ff8000'],
borderWidth:1,
tension: 0.7,
pointRadius: .1,
pointHoverRadius: 5,
pointHitRadius: 30,
pointBorderWidth: 2,
}]
},
options:{
scales:{
y: {
suggestedMin: 0,
suggestedMax: 100
}
}
}
})
////////Fin de grafico /////////
var ctx= document.getElementById('energia').getContext("2d");
var energia= new Chart(ctx,{
type: "line",
data:{
//labels:['col1','col2','col3'],
datasets:[{
label: 'ENERGIA',
//data:[10,9,15],
backgroundColor: ['#30FF24'],
borderColor: ['#30FF24'],
//borderColor: none,
borderWidth:1,
tension: 0.7,
pointRadius: .1,
pointHoverRadius: 5,
pointHitRadius: 30,
pointBorderWidth: 2,
}]
},
options:{
scales:{
y: {
suggestedMin: 0,
suggestedMax: 3
}
}
}
})
let url = 'http://localhost/somnus/apirest/DBAni_lectura.php'
fetch(url)
.then( response => response.json() )
.then( datos => mostrar(datos) )
.catch( error => console.log(error) )
const mostrar = (ani_datos) =>{
ani_datos.forEach(element => {
myChart.data['labels'].push(element.hora)
myChart.data['datasets'][0].data.push(element.ani_inst)
myChart.data['datasets'][1].data.push(element.ani_med)
myChart.update()
energia.data['labels'].push(element.hora)
energia.data['datasets'][0].data.push(element.energia)
energia.update()
});
console.log(myChart.data)
//console.log(myChart2.data)
}**